The form builder allows you to make tabs in many ways. Tabs can be made in javascript, css, or a combination of them using the customHtml field. Obviously, QuickForm would not be quick if it did not offer a ready-made widget for the usual interface. In fact, there are two ways to implement tabs in the component, and these ways will lead to two different functional results.
Below you can see two examples that do not differ from each other. However, there is a significant difference between them.
The first example is made using radio buttons and their associated dependent fields. In this case, the form includes only the visible part, hidden tabs do not participate in it in any way. Accordingly, they will not be sent to the mail, calculated by a calculator, required fields will not be checked in them, and so on. They are not even present in the page code.
The second example is made using the qftabs widget. In this case, hidden tabs are present on the page and are part of the form. For example, if there is an empty required field in a hidden tab, the form will not be sent. When sending, the component will switch to the problem tab and highlight the empty field.
Depending on the desired result, you can use either the first or the second method. The technical implementation of tabs in the component should not cause any questions. In the first case, radio buttons are used. Dependent groups of fields are linked to them. Then the appearance is fine-tuned in the css file. In the second case, everything is the same, only instead of radio buttons, the tab widget is turned on.
Below I will give the distinctive moments of the component that are missing in other tab scripts.
1. Unlimited nesting of tabs into each other.
2. Support for all widgets of the component, including dependent fields and the calculator.
3. Unlimited design that can be customized using only css.
4. Checking required fields in invisible tabs with switching to the problematic one.
5.The ability to use form elements. In this case, tabs can be both part of the form and its general container.
6. Fast and convenient filling and output to the site. Compact implementation by code.
Go back to the QuickForm page