Horizontal Forms - examples of a horizontal responsive form
Summary of features
Creating fully responsive forms that neatly collapse down at multiple break-points is not easy. However, as you can see from the examples below, even a complicated form structure with multiple break-points can look good at every viewport width with the COLOURcode template. As is common for this template, by simply adding one classname to the form's containing form or panel, all the form's inputs will change their appearance, or all the form's elements will change their colour.
At a glance
- Change all of a form's inputs with a single style class.
- Colour all components of a form with a single colour class.
- Choose from up to ten named and two branding colour-sets.
- All colour-sets based on single SASS-variable base colours.
Styled form in a .brand1 panel
form.form-horizontal.form-styled inside .panel.panel-brand1 with .checkbox.checkbox-styled
Default form in a .brand1 panel
form.form-horizontal inside .panel.panel-brand1 with .checkbox.checkbox-styled
Styled form in a .brand2 panel
form.form-horizontal.form-styled inside .panel.panel-brand2 with .checkbox.checkbox-styled
Default form in a .brand2 panel
form.form-horizontal inside .panel.panel-brand2 with .checkbox.checkbox-styled
Styled form in a .blue panel
form.form-horizontal.form-styled inside .panel.panel-blue with .checkbox.checkbox-styled
Default form in a .blue panel
form.form-horizontal inside .panel.panel-blue with .checkbox.checkbox-styled
Styled form in a .yellow panel
form.form-horizontal.form-styled inside .panel.panel-yellow with .checkbox.checkbox-styled
Default form in a .yellow panel
form.form-horizontal inside .panel.panel-yellow with .checkbox.checkbox-styled
Styled form in a .red panel
form.form-horizontal.form-styled inside .panel.panel-red with .checkbox.checkbox-styled
Default form in a .red panel
form.form-horizontal inside .panel.panel-red with .checkbox.checkbox-styled
Styled form in a .green panel
form.form-horizontal.form-styled inside .panel.panel-green with .checkbox.checkbox-styled
Default form in a .green panel
form.form-horizontal inside .panel.panel-green with .checkbox.checkbox-styled
Styled form in a .orange panel
form.form-horizontal.form-styled inside .panel.panel-orange with .checkbox.checkbox-styled
Default form in a .orange panel
form.form-horizontal inside .panel.panel-orange with .checkbox.checkbox-styled
Styled form in a .purple panel
form.form-horizontal.form-styled inside .panel.panel-purple with .checkbox.checkbox-styled
Default form in a .purple panel
form.form-horizontal inside .panel.panel-purple with .checkbox.checkbox-styled
Styled form in a .gold panel
form.form-horizontal.form-styled inside .panel.panel-gold with .checkbox.checkbox-styled
Default form in a .gold panel
form.form-horizontal inside .panel.panel-gold with .checkbox.checkbox-styled
Styled form in a .bronze panel
form.form-horizontal.form-styled inside .panel.panel-bronze with .checkbox.checkbox-styled
Default form in a .bronze panel
form.form-horizontal inside .panel.panel-bronze with .checkbox.checkbox-styled
Styled form in a .silver panel
form.form-horizontal.form-styled inside .panel.panel-silver with .checkbox.checkbox-styled
Default form in a .silver panel
form.form-horizontal inside .panel.panel-silver with .checkbox.checkbox-styled
Styled form in a .grey panel
form.form-horizontal.form-styled inside .panel.panel-grey with .checkbox.checkbox-styled
Default form in a .grey panel
form.form-horizontal inside .panel.panel-grey with .checkbox.checkbox-styled
Styled form in a default panel
form.form-horizontal.form-styled inside .panel.panel-default with .checkbox.checkbox-styled
Default form in a default panel
form.form-horizontal inside .panel.panel-default with .checkbox.checkbox-styled
Visually grouped inputs (wrap with .darken)
form.form-horizontal inside .panel.panel-green with div.darken around single and multiple form-groups