CF7 Skins Multi allows you to break your Contact Form 7 forms into multiple steps easily. Using CF7 Skins Multi with Visual Editor, forms can be divided where required, quickly & easily, right within the Contact Form 7 plugin interface.

Multiple page forms are the modern way of handling long forms. Generally, users are much more comfortable in filling forms section by section, instead of going through long forms.

In this article, we show you how to use CF7 Skins Multi with Visual Editor to build your own multi-page form.

Example

To begin with, let us take a look at a multi-page form example:

Visual Editor with multi page form

Instructions

1. Create a new CF7 Skins form

In the Skins section of your Contact Form 7 form, go to the Form tab.

With the CF7 Skins Multi plugin installed in your system, there is a section added at the top of the CF7 Skins Form Tab for CF7 Skins Multi pages/tabs.

Visual Editor with Initial template

Like with building any other form in CF7 Skins, you can see that we already have an initial template ready for us to use.

Creating an extra specific page of your form is the same as you would for a single-page form. You can use the powerful CF7 Skins Visual Editor to create your form page to meet your needs.

You can refresh your memory on how to build a single-page form at Edit your CF7 Skins Form (CF7 Skins Visual Editor).

Tip: You can use the CF7 Skins Templates on each section (tab) of the form as you normally would on regular CF7 forms.

2. Adding pages/tabs to your form

A. Adding a tab after the current tab

Click on the + icon to add a tab. You can now edit the tab as needed.

CF7 Skins Visual Editor with two tabs

B. Adding a tab between two existing tabs

Click on the + icon of the tab before where you want the new tab to be.

CF7 Skins Visual Editor with new tab between other two tabs

3. Editing your page/tab titles

Double-click on each tab to rename it. A dialog box pops up where you can change the name of the tab.

Edit Tab titles in CF7 Skins Multi with Visual Editor

4. Using Multi Options

You can choose from the range of options available for your multi-part form.

The options available are:

  • Progress Bar – Indicates to users where they are
  • Navigation Buttons – Previous & Next on each Tab
  • Pagination – Current page / total number
  • Start & End Tab Text – Additional helpful text
  • Thank You Tab – Extra tab displayed only after the form is successfully submitted

Multi Options in CF7 Skins Multi with Visual Editor

Tip: Click on Multi Options to show/hide the options and pick the ones you want for your form.

5. Deleting your tabs

To remove a tab, simply click on the x icon.

Delete a CF7 Skins Multi Tab

Tip: Once you save the form, you cannot undo a delete action.

6. Save your form

Click the Save Visual button to save the changes made in the CF7 Skins Visual Editor.

Save the changes made in the Visual Editor to the CF7 Form Tab

This action brings the changes made in the Visual Editor to the CF7 Form Tab as well.

Changes made in the Visual Editor reflects on the CF7 Form Tab

Tip: You can further adjust each page/tab in your form within the CF7 Form Tab, but any changes do not reflect in the CF7 Skins Form Tab

Using the traditional CF7 Form Editor

In addition, you can also use the traditional CF7 Form Editor to build your multi-part form in a similar way as using the CF7 Skins Visual Editor.

Demo Form

Here, you can complete the form below to see a CF7 Skins Multi form in action.

    Multiple Page Forms for Contact Form 7

    CF7 Skins Multi allows you to easily break your Contact Form 7 forms into multiple steps. Forms can be divided where required, quickly & easily, right within the Contact Form 7 plugin interface. (In fact this is a CF7 Skins Multi Form you are using now.)

    Your Details

    You can help us improve CF7 Skins Multi by completing this form

    You can see a detailed example of how a CF7 Skins Multi form works and help us at the same time by simply completing this form. It will help us to understand better how you might use the CF7 Skins Multi Add-on.

    (This page was created by selecting the Contact Template and adjusting to our requirements.)

    Multi-part forms are the preferred way to handle long forms

    Multiple Page Forms is the modern way of handling extensive forms. Generally, users are much more comfortable in filling forms section by section instead of going through long forms.

    Please tell us how you use WordPress and your current level of experience.

    Your WordPress Experience
    1. Which of the following best describes you in relation to WordPress?
    2. How would you describe your WordPress skills? (please choose the one that fits best)

    This page was created by selecting the Event Template and adjusting to our requirements.

    With CF7 Skins Multi you can break up your forms into separate parts/tabs/sections as you want. We're interested to find out which of the many features included with CF7 Skins Multi are most important to you .

    Features
    1. Very ImportantImportantNot ImportantDon't know
    2. Very ImportantImportantNot ImportantDon't know
    3. Very ImportantImportantNot ImportantDon't know
    4. Very ImportantImportantNot ImportantDon't know
    5. Very ImportantImportantNot ImportantDon't know
    6. Very ImportantImportantNot ImportantDon't know
    7. Very ImportantImportantNot ImportantDon't know

    This page was created by selecting the Survey Template and adjusting to our requirements.

    Thank you for completing this form

    If you have any suggestions to improve our CF7 SKins Multi Add-on you can add them below.
    Suggestions

    This page was copied from the Contact Template and adjusted to our requirements.

    .

    This article is about using CF7 Skins Multi in the CF7 Skins Visual Editor. To learn about using CF7 Skins Multi in the Contact Form 7 form editor, see CF7 Skins Multi (with CF7 Form Editor).

    %d bloggers like this: