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").

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.

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

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.

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…
Read more...
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…
Read more...
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…
Read more...
Accordions
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.
Read more...
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…
Read more...
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.
Read more...
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…
Read more...
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,…
Read more...
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Read more...
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
Read more...
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
Read more...
No Tabs
Magic tabs without the tabs!
Read more...
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.
Read more...
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.
Read more...
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Read more...
Version History
Version history for Magic Tabs.
Read more...