Splitting a Form into Tabs

The simplest way to structure a form using tabs is top use Form Reform. Form Reform works with blocks, 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.

If you are using Form Reform, read no further. See our example Tabbed Forms.

If you are using another forms system, read on here.

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

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

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

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.

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.

Additional Pages