Learn More About Responsive Forms – WS Form

Responsive FormsPRO

The word ‘Responsive’ means that the web page dynamically adjusts it layout to suit the device it is being displayed on. So for example on a mobile device, full width fields make them larger and easier to interact with, whereas on a desktop computer with a larger screen, you might want to split your fields across 2 or more columns.

WS Form PRO allows you to quickly build fully responsive forms using the drag and drop layout editor interface!

Breakpoints

In a responsive form, a breakpoint is the point (screen width) at which the form will adapt in a certain way in order to provide the best possible user experience. These are approximately the width of a screen you would find on different devices such as a phone, tablet, laptop or desktop computer.

WS Form PRO - Responsive Forms

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

How To Choose a Breakpoint

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.

The width and offset of sections and fields can be changed per breakpoint. Tabs, sections and field are ordered the same regardless of the breakpoint you select. The settings of sections and fields also remain the same for every breakpoint too. For example, this means if you change the label of a field when at the smallest breakpoint, it will have exactly the label at the largest breakpoint.

Widths

Each field and section on your form can be a different width. The width of a field or section is measure in columns. There are 12 columns. So, for example, to make a field half width, you would set it to 6 columns.

WS Form PRO - Responsive Form Column Sizes

If space allows, fields will stack next to each other in a given row. For example, if you had two fields that were 6 columns each, they would sit next to each other in a the same row.

If you need a field to start at the beginning or a row, consider adding a new section.

Offsets

In addition to width, you can also offset fields and sections. The amount of offset is again measured in columns.

WS Form PRO - Responsive Form Column Offsets

You can only offset fields that are less than 12 columns in width.

How to Change Field Sizes & Offsets

To change the size of a field, click and drag the resizer icon. To change the offset of a field, click and drag the offset bar.

 

WS Form PRO - The Anatomy of a Field

How to Change Section Sizes & Offsets

To change the size of a section, click and drag the resizer icon. To change the offset of a section, click and drag the offset bar.

 

WS Form PRO - The Anatomy of a Section

To change the offset of a field or section, click and drag the thicker edge.

Inheritance

When you change the size of a field, any breakpoints above that will inherit that same size unless you set a specific size for that field at a higher breakpoint. Likewise the same occurs with offsets. This applies to sections also.

In other words, 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.

Best Practice

Best practice when building a 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 of fields.

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 slider to select a breakpoint, 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.

For Developers

We also support different frameworks such as Bootstrap and Foundation for developers. These frameworks have different breakpoints and we show those in the layout editor. The default framework, WS Form, has 5 breakpoints. You can change the framework WS Form is using in global settings.

WS Form PRO automatically optimizes field and section framework classes.