Webheadcoder Multi-Step Forms for Contact Form 7 Pro connects Contact Form 7 forms placed on separate WordPress pages or posts. Each submission takes visitors to the next page, where values from earlier steps can be used. Every step needs its own page or post; the add-on does not display multiple steps on one page.

Configure each step

Create a page or post and a Contact Form 7 form for every step. On each form’s Form tab, place the cursor at the end and use the multistep button to add its tag. Select First Step for the starting form and Last Step for the final form. A First Step form can also display when no earlier step data has been submitted, which lets some visitors enter the journey at a later step.

Enter the next page URL for each step that continues the journey, and leave it blank on the last step. Use the same domain and protocol for all step URLs. Each form also needs a standard Contact Form 7 submit button.

Carry values and manage submissions

Use the [multiform "your-name"] form-tag on the Form tab to show a field collected in an earlier step. The [previous "Go Back"] tag adds a button visitors can use to return to an earlier step.

Pro uses Session Storage and can handle about 5 MB of data in total, compared with about 4 KB in the free version, or roughly 1,000 times more. Choose which step sends an email with the multistep tag’s Send Email option; this is typically the final step. In its Mail tab, use standard Contact Form 7 mail-tags for fields collected earlier. The Skip Save option prevents Flamingo or CFDB7 from saving that submission.

Conditional steps and requirements

With the Contact Form 7 Conditional Fields add-on, Pro can skip steps according to the conditions configured for the form. Pro requires the WordPress REST API and Contact Form 7 AJAX Submission to be enabled, and works with Contact Form 7 5.2 or above. File uploads are not supported on every form, so place any file-upload field on the last step.

Install and test the sequence

Install Contact Form 7 and create the pages or posts for the steps. Create a form for each stage, configure and insert its multistep tag, save the form, then place its shortcode on the matching page or post. Repeat for each step. Configure the Mail tab on the step that should send the email, confirm the REST API and AJAX Submission are enabled, and test the full journey.