Multi-Step Forms and Column Layouts

Q: How do I split a form into steps?

Wrap each part of the form in a [cf7m-step] tag. Put the submit button in the last step. CF7 Mate adds Previous and Next buttons and a progress indicator. The step button above the form editor writes the tag for you.

Q: Which progress styles can I use?

Set style on the first step only. A step without a title is called Step 1, Step 2 and so on.

Split a long Contact Form 7 form into steps with a progress indicator, and place fields side by side in columns that stack on phones.

Long forms feel shorter when you split them up. CF7 Mate can break a form into steps and put fields side by side. You add a few tags in the Contact Form 7 editor. They work in every builder and in a plain shortcode.

First turn on Multi-step forms, Multi-column layout or Grid layout under CF7Mate → Settings.

How do I split a form into steps?

Wrap each part of the form in a [cf7m-step] tag. Put the submit button in the last step.

[cf7m-step title:"Your details" style:progress-bar]
<label>Your name [text* your-name]</label>
<label>Your email [email* your-email]</label>
[/cf7m-step]

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

CF7 Mate adds Previous and Next buttons and a progress indicator. The step button above the form editor writes the tag for you.

What happens when someone clicks Next?

CF7 Mate checks the current step first. An empty required field or an invalid email keeps the visitor on that step and shows the error. When the form is sent, Contact Form 7 still checks the whole form on the server.

Which progress styles can I use?

Value	What it shows
`circles`	Numbered circles. This is the default.
`progress-bar`	A bar that fills as the visitor moves through the form.
`connected`	Circles joined by a line, with each step’s title.

Set style on the first step only. A step without a title is called Step 1, Step 2 and so on.

How do I put fields side by side?

Use a row with columns, and give each column a width as a percentage:

[cf7m-row gap:20]
[cf7m-col width:50]<label>First name [text* first-name]</label>[/cf7m-col]
[cf7m-col width:50]<label>Last name [text* last-name]</label>[/cf7m-col]
[/cf7m-row]

Columns stack on phones. The row and column buttons above the form editor write these tags. You can add these options:

Tag	Option	What it does
`cf7m-row`	`gap:20`	Space between columns, in pixels.
`cf7m-row`	`align:start`, `center`, `end` or `stretch`	How the columns line up with each other.
`cf7m-col`	`width:50`	Column width as a percentage.
`cf7m-col`	`valign:start`, `center`, `end` or `between`	Where the content sits inside the column.

What is the grid layout?

The grid uses fixed column sizes instead of percentages. It is the older layout, and forms that use it keep working.

[dipe_row]
[dipe_one_half]<label>Phone [tel your-phone]</label>[/dipe_one_half]
[dipe_one_half]<label>Company [text company]</label>[/dipe_one_half]
[/dipe_row]

The column tags are dipe_one (full width), dipe_one_half, dipe_one_third, dipe_one_fourth, dipe_two_third and dipe_three_fourth. Each has a button above the form editor, such as 1/2-col. Forms saved with the old [dcs_row] tags from before version 3.0 are converted for you when they display.

FAQ

Can I use steps with other CF7 Mate features?

Yes. A form can use steps, a style preset and conditional logic together. Wrap the whole form in the preset tag, then add steps inside it.

Do steps need a page builder?

No. Steps and columns work in a plain Contact Form 7 shortcode too.

Why does my step not move on?

A field in that step is required or invalid. The error shows next to the field. Fix it and click Next again.

What should I do next?

Show some fields only when they are needed, with conditional logic. Long forms also suit save and continue.