CF7 Skins Update Coming Soon

This article includes information on a new/changed CF7 Skins feature, which will be released shortly.

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. Starting from the initial template

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

Visual Editor with Initial template

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.

2. Creating the form page/tab

Next, 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.

3. 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

4. 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

5. 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.

6. 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.

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

%d bloggers like this: