Designing Responsive Forms

Updated on

Beginning with the Q4 2015 release of iMIS, a set of responsive templates are now available for use with your iMIS website. Deploying Sonic Forms to take full advantage of bootstrap techniques is straightforward.

Form Part Fields

The basic pattern for bootstrap forms is as follows:
  1. A label and a Form Part are combined using a <div> tag to create a "Form Group"
  2. Your label and Form Part are then inserted into the bootstrap template using the standard iMIS layout CSS.
For example, a "First Name" field would be laid out as follows in HTML:

<div class="row"> <-- Defines the form elements as a row
     <div class="col-md-12"> <-- Defines that this group spans 12 columns
             <div class="form-group"> <-- Defines that this content is a unit within your form
                     <label for="FirstName">First Name: </label>
<input type="text" vaatt="Char.25" ccontact="True" value="ccontact.First_Name" va_val="required." requiredmsg="Required Field" /></div>
      </div>
</div>

where
  • the class "row" allows the data to be grouped together in a single row within a layout,
  • the class "col-md-12" defines a twelve column layout for bootstrap and
  • the class "form-group" defines that the label and the input field are a logical group - an important principle for accessibility.
Note that you can place multiple Form parts on the same row by using different classes for each column group. For example "col-md-4" will allow for three fields to be placed on the same line (First Name, Middle Name, Last Name). Because they are in the same row tabbing between the fields will be intuitive.

Checkbox Form Parts

Checkboxes are a special case as the checkbox and the label need to stay together and should not fold under one another as is the case with standard Form Parts.

<div class="row"> <-- Defines the form elements as a row
     <div class="col-md-12"> <-- Defines that this group spans 12 columns
           <div class="checkbox">  <-- Defines that the checkbox class is to be used
                  <label> <input type="button" requiredmsg="Required Field" class="VAFFButton" vaatt="CheckBox" value="VA_PROMO.DEMO_INTEREST" va_val="required." /> Remember me </label> </div>
      </div>
</div>

More Information

For more information on Bootstrap and layout please visit http://getbootstrap.com/css/