In this article we are going to present how to create a Tabbed Form with RSForm! Pro. After you have added all your fields to the form the following steps will have to be taken in order to add tabs to your form:
- Place the content of the following files in the corresponding sections from RSForm! Pro:
- The content of example.css will have to be placed in the CSS section from the "CSS and Javascript" tab of your form.
- The content of tabber.js will have to be placed in the Javascript section from the "CSS and Javascript" tab of your form.
- The content of tabber-minimized.js will also have to be placed in the Javascript section from the "CSS and Javascript" tab of your form, after the content of the tabber.js file.
- Now you will be able to add tabs to your form by using div tags in the Form Layout section. The div tags will contain the form sections that you wish to add in a tab. In order to create a tab form you will have to place the whole form(all the layout with the field placeholders) inside a div tag with the class "tabber":
<div class="tabber">
...layout code here...
</div>
And then use div tags with the class "tabbertab" in order to separate the tabs in your form:
<div class="tabbertab">
<h2>Tab 1</h2>
...layout code here for the first tab...
</div>
