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.

Form Reform

With From Reform you don't need any of this. Because From Reform builds forms out of blocks, you can simply insert Magic Tabs blocks into forms to split a form into tabs, just as you would for tabs with any other blocks.

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.

With From Reform you don't need any of this. Because From Reform builds forms out of blocks, you can simply insert Magic Tabs blocks into forms to split a form into tabs, just as you would for tabs with any other blocks.