Tabs

Tabs are a convenient way of making a multi-step form.

Each form can have one or many tabs. When you create a new form, it will only have one tab. Tabs will only show on your website if you have added two or more tabs in the layout editor.

To learn about styling tabs, click here.

Demo

Adding Tabs

If you want tabs to appear at the top of your form, you need to have more than one tab. To add a tab to the form, simply click the add tab plus icon to the right of the existing tabs. New tabs will be placed at the end of the existing tabs.

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

Cloning Tabs

To clone a tab:

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

A cloned version of the tab will then appear. It will inherit the settings of the tab you cloned.

Deleting Tabs

To delete a tab:

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

The tab will then be deleted. If you delete a tab 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.

Reordering Tabs

You can change the order of tabs by clicking and dragging the tab to a new position.

Renaming Tabs

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

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

Hiding Tab Navigation

You can hide the tabs at the top of the form whilst retaining the functionality of tabs, i.e. next and previous tab buttons will still allow you to step through the form.

To do this:

1. Click on the Form Settings settings icon at the top of the layout editor.
2. In the Basic tab, go to the Tabs section.
3. Check the Hide Tabs setting.
4. Click Save & Close.

Tab Validation

By default, form validation occurs when a Submit button is clicked. If a field is invalid within a tab, WS Form will move to that tab and then focus on the invalid field.

There are other validation options for tabs, including:

• Disable Next Tab buttons until all fields in the current tab are validated. The user cannot progress to the next tab until all fields in the current tab are validated.
• Show validation feedback on any invalid fields in the current tab if a Next Tab button is clicked.The user cannot progress to the next tab until all fields in the current tab are validated.

Learn how to do this: Form Validation

Tab Navigation

You can add previous and next tab buttons anywhere you wish on your form. You can add multiple instances of these buttons in a tab.

• Previous Tab
• Next Tab

Changing Tab Settings

To access the settings of an individual tab, click the tab settings icon. The tab settings toolbar will then appear on the right of the page. Many of these settings will only appear if more than one tab exists.

Tab 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 tab.

The settings are as follows: