Form to Magic Tabs block details

How you got here

There are two ways you cound have arrived at this page

  1. After sucessfully submitting the Example - Contact Form on Splitting a Form Into Tabs. This page is set as the form response page.
  2. By navigating to this page through the usual page navigation.

If you got here through page navigation and have not previously read Splitting a Form into Tabs, it is recommended you read that page before reading further.

Setup Forms to Magic Tabs

  1. 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.
  2. 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.
  3. 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.
  4. The Form to Magic Tabs block will be set in Developer Mode.
  5. 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.
  6. 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.
  7. Clear the Developer Mode checkbox, Save and Publish again and you will now see your form separated into tabs.
  8. 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 for Express forms, 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 AJAX 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.
  • If a form contains elements that are dynamically loaded or otherwise controlled by JavaScript, those elements may not be compatible with splitting the form into tabs.
  • 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.

Form Reform

For  a really flexible and convenient way to create tabbed forms with any combination of blocks, have a look at Form Reform.

Additional Pages

Magic Tabs documentation

Getting Started
To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
Advanced Settings
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
Tabs with Layouts and Containers
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global Settings
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Jump and Linking to Specific Tabs
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
Auto Play
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
Splitting a Form into Tabs
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Splitting a Page List to an Accordion
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
No Tabs
Magic tabs without the tabs!
Developing Tab Templates
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
Problem Solving
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Version History
Version history for Magic Tabs.