WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Contact Form 7 Multi-Step Forms

Enables the Contact Form 7 plugin to create multi-page, multi-step forms.

Note: If you have a caching plugin or on a host with aggressive caching (i.e. WPEngine), this plugin may not work for you. See FAQs for more details.

I needed a contact form that spanned across multiple pages and in the end would send an email with all the info collected. This plugin does just that. This plugin requires the Contact Form 7 WordPress plugin.

Sample of this working is at http://webheadcoder.com/contact-form-7-multi-step-form/

Usage

I write horrible instructions, but luckily Michael at RoseAppleMedia understood it and created a great tutorial!

Instructions:

  1. Create a contact form 7 form as you normally would.

  2. Add a hidden tag named "step" with the value being -. For example, if you have a 5-step form and you are creating the first step, the form would need: [hidden step "1-5"]. The last form in this example would need: [hidden step "5-5"]

  3. In the "Additional Settings" textarea at the bottom of the form editing page, add in the location of the next form. If the next form is located on my-second-page on example.com you would add the following all on one line to "Additional Settings": on_sent_ok: "location.replace('http://example.com/my-second-page/');"

  4. Repeat steps 1 - 3. On the form that will actually send a email, do not do step 3 unless you want the form to redirect the user to another page.

In a contact form, to retrieve fields from previous forms you can use something like [form your-email] where "your-email" is the name of the field from the previous form. This would be useful on the last step where it is confirming all the info from previous forms.

In a contact form you users may want to go back to a previous step to change some info they entered. To allow the user to go back, add the [back "Previous Step"] button to the form.

Additional Info The hidden field is taken directly from the "Contact Form 7 Modules". If you have that installed, the Multi-Step plugin will use that.

This plugin does not support File Uploads. If you need to use file uploads make sure to place it on the last step.

This plugin only works when the forms are on separate pages. Many have asked to make it load via ajax so all forms can reside on one page. This plugin does not support that. You can try it on your own, but it is harder than it seems.

Requires: 3.4.1 or higher
Compatible up to: 3.9.2
Last Updated: 2014-8-19
Downloads: 8,800

Ratings

4 stars
4.6 out of 5 stars

Support

4 of 10 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1
100,2,2
0,1,0
100,1,1
100,1,1
100,1,1