multistep

Conditional Fields PRO supports multi-step forms out of the box.

Form

About you

About your family

Information about your children

About your car

Finish up

Thank you for filling out this silly multistep form. One last question.


Form Code

[step title "About you"]
  <p><label>Your name: [text* your-name]</label></p>
  <p><label>Your favorite color: [text* your-address]</label></p>

[step title "About your family"]
  <h4>Information about your children</h4>
  <label>[checkbox no-children "I don't have any children"]</label>
  [group has-children]
    [repeater children add "add child" remove "remove child"]
      <fieldset><p><label>Name of child: [text* name-of-child]</label></p>
      <p><label>Favorite color of child: [text* fav-color-of-child]</label></p></fieldset>
    [/repeater]
  [/group]

[step title "About your car"]
  <p><label>What color is your car? * [text* your-car-color]</label></p>

[step title "Finish up"]
  <p>Thank you for filling out this silly multistep form. One last question.</p>
  <p><label>Do you like filling out forms? * [select* you-like first_as_label "-- yes or no --" "yes" "no"]</label></p>
  <p>[submit "Submit form"]</p>

Email Body

<table>
<tr><td>Your name</td><td>[your-name]</td></tr>
<tr><td>Your address</td><td>[your-address]</td></tr>
<tr><td>No children</td><td>[no-children]</td></tr>
[has-children]
  [children]
    <tr><td>Name of child [children:index]</td><td>[name-of-child]</td></tr>
    <tr><td>Favorite color of child [children:index]</td><td>[fav-color-of-child]</td></tr>
  [/children]
[/has-children]
<tr><td>Your car color</td><td>[your-car-color]</td></tr>
<tr><td>Do you like filling out forms?</td><td>[you-like]</td></tr>
</table>

Conditional Fields (Text)

show [has-children] if [no-children] not equals "I don't have any children"

New since version 1.8.1: multistep form with summary field

Basic usage

[step]
  <!-- Content of first step -->
[step]
  <!-- Content of second step -->
  [submit "Submit your form"]

With custom step titles and buttons

[step title "Title of your first step" next "Next button text" 
previous "Previous button text"]
  <!-- Content of first step -->
[step title "Title of your second step"]
  <!-- Content of second step -->
  [submit "Submit your form"]

Notes

  • If you are using multistep, the first tag in your form should always be [step ... ]. All the form code that appears before the first [step] will be automatically stripped away.
  • You can nest groups and repeaters inside steps. But a step cannot be nested inside groups or repeaters.
  • Conditional Fields FREE is also partly compatible with Contact Form 7 Multi-Step Forms.
    However, for the best multistep experience we recommend upgrading to Conditional Fields Pro and completely disable all multistep plugins.