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
Cloning Sections
To clone a section:
- Hover your mouse over a section
- Click the section settings icon
- 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:
- Hover your mouse over a section
- Click the section settings icon
- 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 Build 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 Advanced 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.
Show Label
When enabled the section label will be shown as a heading on the page.
For developers section labels are rendered in a legend wrapper. You can change the wrapper used for section headings under the advanced section of form settings. Sections are rendered as a fieldset.
Hidden
If checked the section will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.
Repeatable
Enabled
Checking this setting will turn the sections repeatable functionality on.
Learn more about repeatable sections.
Repeat Label
If enable, the section label will be shown for each row added to the repeatable section.
More repeatable sections options are shown in the Advanced tab.
Advanced
Classes
Field Wrapper
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.
Restrictions
Disabled
You can disable a section (fieldset) using this setting.
User Status
Choose from one of the options to filter which user status can see this field:
- Any
- Is Logged In
- Is Logged Out
- Has User Role or Capability
If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.
Repeatable
Minimum Row Count
This sets the minimum number of rows a repeatable section can have.
Maximum Row Count
This sets the minimum number of rows a repeatable section can have.
Row Delimiter
When WS Form exports a submission containing repeatable data in a CSV file or passes data to an action, a fallback string is created. For example, in a CSV file due to the multi-dimensional nature of repeatable sections each rows of data will be delimited using the row delimiter for each field. The default row delimiter is a comma character.
You can change the delimiter used for each row by changing this setting.
Note that if you change the delimiter, old submissions will retain the original delimiter to maintain backward compatibility.
Item Delimiter
If a repeatable row contains a field that could potentially contain more than one response (e.g. checkboxes, files or a select pulldown), they will be delimited using the item delimiter. The default item delimiter is a semi-colon character.
You can change the delimiter used for each item by changing this setting.
Note that if you change the delimiter, old submissions will retain the original delimiter to maintain backward compatibility.
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:
- 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.
- 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.