Soc Forms are built upon the Bootstrap form style. The 'soc-form' is simplified however, in stead of using different bootstrap classes to style your form, only a single 'soc-form' class must be added to the form element. This will create a horizontal form on large screens and change itself to a vertical one on smaller devices.

Guidelines for implementation

  • Wrap entire form in a form element with the 'soc-form' class set
  • Wrap label and its corresponding input element in a div
  • Wrap the input element in a div as well
  • Add one or more buttons at the end of the form
  • It is recommended to always combine inputs with labels because screen readers might have trouble with the form if they are omitted
  • Don't apply css classes to any of the elements within the form

Style options are available to change details of the form. Use the following classes next to 'soc-form' to change the form:

  • 'inline': Creates an inline form in which elements float
  • 'compact': Uses narrower elements (cannot be used together with inline)
  • 'btn-left': Places the buttons on the left hand side
  • 'hidden-labels': Removes the labels from screen but keeps them for screenreaders
  • 'vertical': Skips the responsive part and goes straight to the vertical form layout

Regular form

emmet:
form.soc-form>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}

Inline form with hidden labels

emmet:
form.soc-form.inline.hidden-labels>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}

Compact form with buttons on the left

emmet:
form.soc-form.compact.btn-left>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}+button.btn-danger{Cancel}

Vertical Form with different elements

This is static