This article is about using CF7 Skins Multi in the Contact Form 7 form editor. To learn about using CF7 Skins Multi in the CF7 Skins Visual Editor, see CF7 Skins Multi (with Visual Editor).
.
CF7 Skins Multi allows you to break your Contact Form 7 forms into multiple steps easily. 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 Contact Form 7’s form editor to build your own multi-page form.
Example
To begin with, let us take a look at a multi-page form example.
Instructions
1. Starting from the initial template
Start by selecting the Contact Template from the Template tab of the CF7 Skins section.
With the CF7 Skins Multi plugin activated, there is a section at the top of the CF7 form editor 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 refresh your memory on how to build a single-page form at Edit your CF7 Skins Form (Contact Form 7 Editor).
Tip: You can use the CF7 Skins Templates Tab on each section (tab) of the form as you normally would on regular CF7 Skins 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 you need.
B. Adding a tab between two existing tabs
Click on the +
icon of the tab before where you want the new tab to be.
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.
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
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.
Tip: Once you save the form, you cannot undo a delete action.
Using CF7 Skins Visual Editor
Besides, you can also use the CF7 Skins Visual Editor to create your multi-part form in a similar way as using the traditional CF7 Form Editor.
Demo Form
You can now complete the form below to see a CF7 Skins Multi form in action.