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 Express, Legacy Form, Formidable, Formify (Advanced Forms) and the core Page List (as shown in the right sidebar for "Magic Tabs documentation").

You don't need to do this with Form Reform. Form Reform works with block, so you can simply arrange form components within tabs just like you would any other block. Form Reform provides a special No-tabs template for Magic Tabs and a Jump to Tab handler that can optionally be used to navigate tabs in response to form submissions.

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.

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.

Form Reform

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