What are tabs?
Tabs are a graphical controls that allow multiple panels to be placed within a single container.They allow only one panel to be displayed at a time and users can easily switch between them. This interface style allows you to divide your form content so it is more organized and clutter free. This of course helps streamline the whole the form filling process, helping the user stay focused & oriented.
Tabs are a graphical controls that allow multiple panels to be placed within a single container.They allow only one panel to be displayed at a time and users can easily switch between them. This interface style allows you to divide your form content so it is more organized and clutter free. This of course helps streamline the whole the form filling process, helping the user stay focused & oriented.
How do I add them to my form?
Adding tabs to your online form is easy to do. in fact, you can even add a few tabbed areas in a single form.
The tabs are a part of the "Section" element and you cannot add them without it, since the section acts as their alternating panels container.
Following are steps to add Tabs:
Adding tabs to your online form is easy to do. in fact, you can even add a few tabbed areas in a single form.
The tabs are a part of the "Section" element and you cannot add them without it, since the section acts as their alternating panels container.
Following are steps to add Tabs:
| 1- | Enter your form in the fom builder. |
| 2- | Drag a Section element from "Elements panel" > "Basic" Category |
3- |
Resize the section to make it larger  |
| 4- | Once the Section is selected on canvas, go to its settings: "Properties" panel > "Element" tab > "Settings" option > "Basic" category |
5- |
Turn on the "Enable Tabs" checkbox and then add a tab by pressing on the "Add Item" button. a tab will be added above the section on canvas.  |
6- |
Follow our example and add 2 tabs: Information and Sign Up.  |
7- |
When the section is selected go to the properties panel and change the style of the tabs: - In this example we will give the selected tab the same back color as the section back color : "Properties" panel > "Element" tab > "Style" option > "Apply style to" : Active tabs > Background > enter color code or use color picker to change - and remove the tab border: "Properties" panel > "Element" tab > "Style" option > "Apply style to" : Active tabs > Border > Choose: None - After that we will also remove the Tabs border from the inactive tabs. "Properties" panel > "Element" tab > "Style" option > "Apply style to" : Tabs > Border > Choose: None   |
| 8- | Press on the "Information" tab on canvas and add content to the section - in this example we added a "Paragraph" element  |
9- |
Now press on the "Sign up" tab on canvas to move to the second tab container. Start dragging elements to the section area. In this example we dragged a "Textbox" (Name), a "Numeric" element (Age) and an "Email". We also moved the form Submit button inside this tab.  |
10- |
|
11- |
and Voila!  |
Special thanks to our friend Sergey Erlikh, Solution Architect from Cloud4good NL
who works exclusively with non-profits, for suggesting this feature.
Good on ya' man!
who works exclusively with non-profits, for suggesting this feature.
Good on ya' man!
Watch the video