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:
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.
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.
B. Adding a tab between two existing tabs
Click on the + icon of the tab before where you want the new tab to be.
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.
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
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.
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.
This action brings the changes made in the Visual Editor to the CF7 Form Tab as well.
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.
.
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).