Responsive FormsPRO

Responsive forms look good on all devices, from your mobile phone and tablet to a desktop computer screen.

Traditional forms do not change in layout. This means that on mobile devices they can be very difficult to read. A responsive form typically goes from a multi-column layout to a single-column format as you drop down in screen size to a mobile device. This makes reading and using a form on a mobile device much easier.

WS Form PRO enables you to produce fully-responsive forms that work on all devices. Furthermore, as you add fields to a form, WS Form Pro will ensure that when they are tapped on mobile devices an appropriate keyboard will display (e.g. a numeric keyboard for phone numbers).

Breakpoints

In order to make a form responsive, breakpoints are introduced. Each breakpoint refers to a maximum or minimum width of the web browser. If you were to resize a web browser window on a desktop computer, you would be moving the width of the website through the different breakpoints.

Example breakpoints might be:

  • Extra small – Up to 575 pixels width (mobile device)
  • Small – Up to 767 pixels with (tablet)
  • Medium – Up to 991 pixels (laptop)
  • Large – Up 1199 pixels (desktop)
  • Extra large –  1200 pixels or more

In WS Form PRO, you can specify different section and field widths and offsets for each breakpoint. Widths and offsets are specified in units of columns. A typical web page is made up of 12 columns. Therefore a field that is half the width of the page would be set to six columns.

Section and field widths and offsets are inherited as you go up the breakpoints. Therefore if you set a width at the extra-small breakpoint, it will be inherited by the small, medium, large, and extra-large breakpoints, unless you specifically set a custom width or offset at those breakpoints.

Breakpoint Selector

WS Form PRO - Breakpoint Selector
When editing a form in WS Form PRO, you can select the breakpoint you wish to edit by using the slider at the bottom of the screen. You can either click a breakpoint to view it, or click and drag to see various breakpoints. If you hover your mouse over a breakpoint icon, it will show you the breakpoint attributes, such as the minimum size the screen has to be to trigger that breakpoint.

An example of using the breakpoint selector when designing your form would be to design a single-column style form at the mobile breakpoint. Then when you have finished making your form, click to the next breakpoint up and introduce some columns that would make viewing the form easier at that width. Progressively work your way up to desktop where you might have two, three, or four columns in various places.

Optimize

Sometimes you may inadvertently set the width or offset or a section of field to the same number of columns for two consecutive breakpoints.

For example:

  • Small – Width 6 columns
  • Medium – Width 6 columns
  • Large – Width 12 columns

Due to how breakpoints inherit a previous breakpoint’s width and offset, the above example only needs the small breakpoint to have a width of six. Therefore it could also, preferably, be set as:

  • Small – Width 6 columns
  • Medium – Width inherit
  • Large – Width 12 columns

If WS Form PRO detects such a situation like the example above, then the ‘Optimize’ button width becomes enabled. If you click the ‘Optimize’ button, WS FormPRO will run through all of your breakpoint sizes and offsets and remove any redundant settings, while retaining your intended form layout. This essentially optimizes the HTML code of your form, removes redundancy,  and speeds up form loading.

Reset

The reset button clears all of your widths and offsets and returns your form to a single-column format. If you reset your form in error, you can use the undo tool to revert your form back to its prior state.

Section and Field Settings

As well as using the breakpoint tool to select a breakpoint while editing, you can also set the breakpoint widths and offsets when editing a section or field using the sidebar menu. Click on the ‘Advanced’ tab and scroll to the bottom to find the breakpoint width and offset column editor. This provides you with a granular editor for the column width and offset for any section or field in your form.

Click the ‘Save’ button to save your changes, or click ‘Cancel’ to ignore your changes.