Splitting a Form into Tabs

Starting with Magic Tabs v7.2, the Form to Magic Tabs block can be used to break forms and page lists into a series of tabs. It works with forms blocks from ExpressLegacy FormFormidableFormify (Advanced Forms) and the core Page List (as shown in the right sidebar for "Magic Tabs documentation").

Break a form into tabs

If all you want to do is break a form into tabs, the simplest structure of blocks on the page is:

  1. Magic Tabs block 
  2. Form to Magic Tabs block
  3. The actual Form block, such as an Express Form block or Legacy Form block
  4. Magic Tabs End

Include form tabs within other tabs

Getting a little more complicated, you can inlude a form split into tabs within a larger set of tabs. For example: 

  1. Magic Tabs block 'Tab A'
  2. Content for tab A.
  3. Magic Tabs block 'Tab B'
  4. Content for tab B.
  5. Magic Tabs block 
  6. Form to Magic Tabs block
  7. The actual Form block, such as an Express Form block or Legacy Form block
  8. Magic Tabs block 'Tab C'
  9. Content for tab C.
  10. Magic Tabs End

Nested form tabs within other tabs

You could modify the previous structure to nest a tabbed form within another set of tabs.

  1. Magic Tabs block 'Tab A'
  2. Content for tab A.
  3. Magic Tabs block 'Tab B'
  4. Content for tab B.
  5. Magic Tabs block, nested level 1
  6. Form to Magic Tabs block
  7. The actual Form block, such as an Express Form block or Legacy Form block
  8. Magic Tabs End block, nested level 1
  9. Magic Tabs block 'Tab C'
  10. Content for tab C.
  11. Magic Tabs End

As with any set of tabs, the nesting can be up to 3 levels deep. A nested version of the standard Contact form is shown in the next tab.

Example - Contact Form

Here we have the default contact form split into tabs and nested within a set of tabs with a Bootstrap vertical left template. It has also been placed in a 'well' using block design to provide some additional visual separation.

Required
Required
Don't worry – we won't add you to any email list. This is just so we can contact you in case you have questions.
Required
Captcha Code

The Form Response

Whilst the form response could go to the same page as a form and will be displayed within the appropriate tab, this can be a little confusing for vistors, especially if a form is part of a larger set of tabs.

It is recommended to direct form responses to a different page with a specific form response message.

Submitting the "Example - Contact Form" here will go to the Form to Magic Tabs block Details page.

Magic Tabs documentation

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…
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…
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 can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
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.
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…
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,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
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.
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.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…