Example Forms - examples of vertical and inline forms
Summary of features
The COLOURcode template allows for the fact that admin/webapp forms tend to be presented and used very differently to website forms. A website form will nearly always appear with blank inputs, and the labels need to be prominent. Conversely, most admin/webapp forms will already be populated when loaded, and operators will soon become familiar with the various labels. COLOURcode forms are specifically designed for ease of reading when complete.
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.
Default form in a default panel
form inside .panel.panel-default with .checkbox.checkbox-styled
Styled form in a default panel
form.form-styled inside .panel.panel-default with .checkbox.checkbox-styled
Styled inline forms in a .brand1 panel
form.form-inline.form-styled inside .panel.panel-brand1 with .checkbox.checkbox-styled
Note that inline forms display as 'inline' in viewports wider than 768px. Inline form elements do not stack particularly well, so their use should be avoided for responsive layouts.
Styled inline forms in a default panel
form.form-inline.form-styled inside .panel.panel-default with .checkbox.checkbox-styled
Default inline forms in a default panel
form.form-inline inside .panel.panel-default with .checkbox.checkbox-styled
Styled form in a .brand1 panel
form.form-styled inside .panel.panel-brand1 with .checkbox.checkbox-styled
Default form in a .brand1 panel
form inside .panel.panel-brand1 with .checkbox.checkbox-styled
Styled form in a .brand2 panel
form.form-styled inside .panel.panel-brand2 with .checkbox.checkbox-styled
Default form in a .brand2 panel
form inside .panel.panel-brand2 with .checkbox.checkbox-styled
Styled form in a .blue panel
form.form-styled inside .panel.panel-blue with .checkbox.checkbox-styled
Default form in a .blue panel
form inside .panel.panel-blue with .checkbox.checkbox-styled
Styled form in a .yellow panel
form.form-styled inside .panel.panel-yellow with .checkbox.checkbox-styled
Default form in a .yellow panel
form inside .panel.panel-yellow with .checkbox.checkbox-styled
Styled form in a .red panel
form.form-styled inside .panel.panel-red with .checkbox.checkbox-styled
Default form in a .red panel
form inside .panel.panel-red with .checkbox.checkbox-styled
Styled form in a .green panel
form.form-styled inside .panel.panel-green with .checkbox.checkbox-styled
Default form in a .green panel
form inside .panel.panel-green with .checkbox.checkbox-styled
Styled form in a .orange panel
form.form-styled inside .panel.panel-orange with .checkbox.checkbox-styled
Default form in a .orange panel
form inside .panel.panel-orange with .checkbox.checkbox-styled
Styled form in a .purple panel
form.form-styled inside .panel.panel-purple with .checkbox.checkbox-styled
Default form in a .purple panel
form inside .panel.panel-purple with .checkbox.checkbox-styled
Styled form in a .gold panel
form.form-styled inside .panel.panel-gold with .checkbox.checkbox-styled
Default form in a .gold panel
form inside .panel.panel-gold with .checkbox.checkbox-styled
Styled form in a .bronze panel
form.form-styled inside .panel.panel-bronze with .checkbox.checkbox-styled
Default form in a .bronze panel
form inside .panel.panel-bronze with .checkbox.checkbox-styled
Styled form in a .silver panel
form.form-styled inside .panel.panel-silver with .checkbox.checkbox-styled
Default form in a .silver panel
form inside .panel.panel-silver with .checkbox.checkbox-styled
Styled form in a .grey panel
form.form-styled inside .panel.panel-grey with .checkbox.checkbox-styled
Default form in a .grey panel
form inside .panel.panel-grey with .checkbox.checkbox-styled