Contact Form 7 Multi-Step Forms

UPDATE:  This plugin still works as expected for most people, but it does not for some.  I have found a great alternative that I personally use now: Formidable Pro.  Formidable allows multi-page forms, ajax submissions, and more.  It does so much more than Contact Form 7 and Contact Form 7 Multi Step Forms.  There is a free and a paid version.  The paid version is very cheap for what you get.  In my opinion it is much better than the more expensive Gravity Forms.

My first official wordpress plugin is one that modifies the Contact Form 7 plugin.  And yes, you’ll need the Contact Form 7 plugin activated in WordPress.   I needed a contact form that spanned across multiple pages and in the end would send an email with all the info collected.  Here are the steps to use it once it’s installed.

  1.  Create a contact form 7 form as you normally would.
  2.  Add a hidden tag named “step” with the value being the current step dash (“-“) total steps. If you have a 5-step form and you are creating the first step, the hidden field would look like: [hidden step “1-5”]
    the last step, would look like: [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.
  4. If the next form is located on My2ndPage on example.com you would add the following to the “Additional Settings” textarea:  on_sent_ok: “location.replace(‘http://example.com/My2ndPage/’);”
  5.  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.

A working sample can be seen at:
http://webheadcoder.com/contact-form-7-multi-step-form/

Get the Contact Form 7 MultiStep Forms in the WordPress Repository.

 

 

Posted in Coding Tagged with: ,

Leave a Reply