WordPress plugin

Webheadcoder Multi-Step Forms for Contact Form 7 Pro

Webheadcoder Multi-Step Forms for Contact Form 7 Pro links separate Contact Form 7 forms placed on WordPress pages or posts. Visitors submit one form before continuing to the next, and values from earlier steps can populate later forms. Pro uses Session Storage to handle about 5 MB of data in total, compared with about 4 KB in the free version, or roughly 1,000 times more.

Webheadcoder Multi-Step Forms for Contact Form 7 Pro

How form data moves between steps

Webheadcoder Multi-Step Forms for Contact Form 7 Pro links separate Contact Form 7 forms placed on WordPress pages or posts. Visitors submit one form before continuing to the next, and values from earlier steps can populate later forms. Pro uses Session Storage to handle about 5 MB of data in total, compared with about 4 KB in the free version, or roughly 1,000 times more.

Each step needs its own page or post. The extension does not load multiple forms on the same page. Keep the step URLs on the same domain and use the same protocol.

Configure the page sequence

  1. Create a WordPress page or post for each step and note its URL.
  2. Create a Contact Form 7 form for each page. On each form’s Form tab, place the cursor at the end and use the multistep button to add the tag.
  3. Select First Step for the starting form and Last Step for the final form. A form marked First Step can also display when no earlier step data has been submitted, allowing some users to start at that stage.
  4. Enter the next page URL for each step that continues the sequence. The final step can leave the URL blank.
  5. Save each form and place its shortcode on the corresponding page or post. Include a standard Contact Form 7 submit button on each step.

The multistep tag is hidden, so placing it at the end of the form helps prevent content after it from appearing hidden. Submitting the Last Step clears the stored data from the visitor’s browser.

Choose what each step sends or saves

Enable Send Email on the step that should send a Contact Form 7 email, then configure its Mail tab. To include a value from an earlier step in the email, use the standard Contact Form 7 mail-tag for that field. The [multiform] tag displays an earlier field on the Form tab; it does not insert values into the Mail tab.

If Flamingo or CFDB7 stores submissions, the Skip Save option prevents the tagged step from being saved. Pro also supports skipping steps with the Contact Form 7 - Conditional Fields add-on, so the configured form conditions can determine which stages visitors see.

The [previous] form-tag includes a button for returning to an earlier step. Set its button text in the tag.

Requirements and upload limit

Contact Form 7 5.2 or later, the WordPress REST API, and Contact Form 7 AJAX Submission are required. File uploads are not supported on every form; place any file-upload field on the last step.

WordPress Repository Grid/List View for WooCommerce Premium GridKit Portfolio Premium for Portfolio and Gallery Layouts Groovy Mega Menu PRO for WordPress Navigation Groundhogg premium plans GS Logo Slider Pro for Partner Logos (WordPress 5.8+) GS Team Members Pro: Choose How Visitors Browse Your Team GT3 Photo & Video Gallery Pro for Flexible WordPress Galleries GTM Kit Premium for WordPress with Staging Controls GTmetrix PRO Credits with GTmetrix for WordPress: Reports and Alerts Guest Author Name Premium for Contributor Profiles