Sections

Adding Sections

To add a section to your form, simply click the add section icon at the bottom of your form.

Once you have added the section into the form, you can immediately start typing a label for it. To save the section label, you can either type Enter or click somewhere on the page away from the section.

The Anatomy of a Section

WS Form PRO - The Anatomy of a Section

Cloning Sections

To clone a section:

  1. Hover your mouse over a section
  2. Click the section settings icon
  3. Click the clone  icon

A cloned version of the section will then appear. It will inherit the width, offset, and settings of the section you cloned.

Deleting Sections

To delete a section:

  1. Hover your mouse over a section
  2. Click the section settings icon
  3. Click the delete  icon

The section will then be deleted. If you delete a section in error, you can always click the undo  icon or use the undo tool in the toolbox on the right-hand side of the page.

Moving Sections

You can move a section around the form by clicking and dragging the section to a new position within the same section or a different section. Click anywhere in the section that is blank.

You can also move sections between tabs. Click and drag the section over a tab. Then simply drag the section into a section of the tab you selected.

Resizing Sections

You can resize sections to be 1-12 columns wide by clicking and dragging the resize icon on the right side of a section.

For developers it is possible to adjust the number of columns used from the main ‘Settings’ page under the ‘Appearance’ menu. Click here to learn more. We recommend leaving this setting at 12.

Offsetting Sections

Offsetting a section will move it inward from the left side of the screen. This is useful if you want to right align or center a section in a form.

You can offset sections by 1-11 columns wide by clicking the offset  icon on the left side of a section.

Note that sections that are as wide as the form itself cannot be offset.

Changing Section Settings

To access the section settings, click the section settings icon. The section settings toolbar will then appear on the right of the page.

Section settings are split into Basic and Advanced. The basic tab allows you to change all of the key features you are likely to need on a simple form. The advanced tab provides greater control over the section.

Section settings are as follows:

Basic

Label

Use this setting to set the label for a section. The label is used if you wish to show a heading for a section. It is also used for referencing the section when building a form.

Render Label

When enabled the section label will be shown as a heading on the page.

For developers section labels are rendered as H4. You can change the wrapper used for section headings under the advanced section of form settings. Sections are rendered as a fieldset.

Advanced

Wrapper CSS Classes

The wrapper CSS class setting enables you to add a class (or classes) to a tab wrapper. To add multiple classes, add a space between the class names.

Disabled

You can disable a section (fieldset) using this setting.

Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

Renaming Section Labels

To rename the label of a section, you have two options:

  1. You can double click the label of the section, enter a new section, and then type Enter or click somewhere on the page away from the section.
  2. Click the section settings icon to open the section settings toolbar. Change the label at the top of the toolbar, and then click the ‘Save’ button at the bottom of the toolbar.