Get Started

How to Create Multi-Step Forms in Contact Form 7

Break long forms into focused, step-by-step screens with automatic Next/Back navigation and a choice of progress indicator styles — no custom code required.

What It Does

Multi-Step Forms splits a single Contact Form 7 form into a wizard-style flow. Users complete one step at a time and move forward or back using generated navigation buttons. All data from every step is validated and submitted together as one entry at the end.

Best for: surveys, job applications, booking forms, onboarding flows, quote requests, or any form where showing all fields at once feels overwhelming.

Requirements

  • Contact Form 7 with a form created
  • CF7 Mate Pro with the Multi-Step Forms module enabled (CF7 Mate → Modules)

Basic Setup

Wrap each section of your CF7 form in [cf7m-step]...[/cf7m-step] tags. Each pair becomes one screen in the form.

[cf7m-step title:"Your info"]
<label>Your name</label>
[text* your-name]

<label>Email address</label>
[email* your-email]
[/cf7m-step]

[cf7m-step title:"Your message"]
<label>Message</label>
[textarea* your-message]

[submit "Send"]
[/cf7m-step]

Two rules to remember:

  • Place [submit] inside the last step only
  • The title attribute is optional but recommended — it labels the step in the progress indicator

Use the CF7 Mate tag generator in the CF7 editor toolbar (click the step button) to insert step tags without typing them manually.

Progress Indicator Styles

Set the style on the first step only using the style attribute. All other steps inherit it automatically.

Circles (Default)

Numbered circles — active step in blue, completed in green, upcoming in gray. No attribute needed

[cf7m-step title:"Your info"]

Progress Bar

A horizontal fill bar with a “Step X/N” label underneath. Updates automatically as the user moves forward.

[cf7m-step style:"progress-bar" title:"Your info"]

Connected — Circles with Labels

Numbered circles linked by horizontal lines, each showing its step title. Labels are hidden on mobile, leaving only circles and lines.

Customizing Colors

You can override the default colors with CSS in your theme or Divi custom CSS panel.

Circles:

css

.cf7m-progress-step.active    { background: #your-color; }
.cf7m-progress-step.completed { background: #your-color; }

Progress bar:

css

.cf7m-progress-bar-fill  { background: #your-color; }
.cf7m-progress-bar-track { background: #your-color; }

Navigation buttons:

css

.cf7m-prev-step, .cf7m-next-step { background: #your-color; }

When used inside a CF7 Mate Styler module, navigation buttons automatically inherit the submit button color you set in the module’s Design tab — no extra CSS needed.

Works With

Multi-Step Forms is fully compatible with other CF7 Mate features inside each step:

  • Grid Layout ([cf7m-row] / [cf7m-col]) — multi-column layouts within a step
  • Design Presets ([cf7m-presets]) — wrap outside all steps to apply a preset to the whole form
  • Calculator ([cf7m-calc]) — live price calculations per step
  • Conditional Logic ([cf7m-if]) — show or hide fields based on answers within a step
  • Star Rating, Phone Field, and all standard CF7 tags work inside steps normally

Tips

  • Keep each step focused on one topic — personal details on step 1, preferences on step 2, review on step 3.
  • Always place [submit] in the last step only — Previous/Next buttons are generated automatically everywhere else.
  • Use the Connected style when step titles add meaningful context for the user.
  • Use the Progress Bar style for longer forms (4+ steps) where a percentage feels more intuitive than circles.
Was this helpful?