Tabs

Tabs are a convenient way of splitting a form into separate pages. Each form can have one or many tabs. When you create a new form, it will only have one tab.

Tip: Forms with one tab are considered to be a single page form, and therefore the tab will not show on your website. If you create an additional tab, WS Form will show the tabs at the top of your form on your website. As a rule of thumb, smaller forms, such as a contact us form, are ideally suited to a single tab. Longer forms, such as an application form, might be better suited to a form with multiple tabs.

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.

Changing Tab Settings

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

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:

Basic

Label

Use this setting to set the label for a tab. Forms with a single tab will not show any tabs at the top of the form. Only forms that have two or more tabs will have tabs that show.

The label is used for the tab label and also a heading for that tab when it is selected.

Render Label

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

For developers tab labels are rendered as <code>H3</code>. You can change the wrapper used for tab headings under the advanced section of form settings.

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.

Renaming Tab Labels

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.