Form to Magic Tabs block details
How you got here
There are two ways you cound have arrived at this page
- After sucessfully submitting the Example - Contact Form on Splitting a Form Into Tabs. This page is set as the form response page.
- By navigating to this page through the usual page navigation.
Setup Forms to Magic Tabs
- Add a Form bock and surround it with Magic Tabs and Magic Tabs End blocks. It doesn't matter what order you do this in.
- The Form block should be in a tab all of its own. At this stage, should you Publish the page you will have a set of tabs with a complete form within one tab.
- Edit the page and Add a Form to Magic Tabs block immediately before the Form block, so the tab now contains a Form to Magic Tabs block block and the Form block.
- The Form to Magic Tabs block will be set in Developer Mode.
- Save and Publish. The Form to Magic Tabs block will insert some labels into the form that provide an index into the form. Make a note of the indexes where you want to split a form into tabs.
- Edit again and now within the Form to Magic Tabs block add rows for each Form Section Index you want the tabs to appear at and associatedTab Labels.
Tab Labels are optional. As with regular Magic Tabs blocks, Form to Magic Tabs can find a suitable tab label for you from the field labels already in the form.
- Clear the Developer Mode checkbox, Save and Publish again and you will now see your form separated into tabs.
- If the tabs are in the wrong place, you can use Developer Mode again to work out what you need to change.
Form block compatibility
Forms to Magic Tabs works with the following form blocks
- Express - the default Form block provided with concrete5.
- The Legacy Form block provided with concrete5.
- Formify - a marketplace forms addon
- Formidable, a marketplace forms addon
- Page List - Form to Magic Tabs can also be used to split a page list into tabs! The documentation accordion on the right uses this.
Forms in Forms to Magic Tabs also work nicely with ajaxed express forms, as provided by @mnakalay's AJAX forms Xpress, Light and Pro editions. If you came here via the form submission on Splitting a Form into Tabs and left a required field empty or glitched the captcha you have already experienced this integration in action.
Tips and Limitations
Form to Magic Tabs can in theory split any form created with these form blocks into a set of tabs. However, it is usually best to design a form with tabs in mind.
- If a form already includes fields that are revealed in response to previous fields, consider how such revealing will interact with tabs.
- If a form contains layout and visual elements, such as vertical lines and explanatory text, you may find it better to remove or reposition some of these elements within the form.
- When splitting a Page List into tabs or an accordion, you probably don't want to enable pagination within the page list.
- If you want to split all elements of a form or all items in a page list into tabs, select the "Make all form sections into tabs" option.