Multistep example: Skip step based on field value

In the example below we show how you make a certain step unavailable, if the user previously indicated that they are not interested in completing it.

Form

    This is question 1

    1. Do you like answering questions?

    Hint: If you answer "no" you will skip to question 3

    This is question 2

    2. Why do you like answering questions?

    This is question 3

    3. Do you like singing songs?

    This is question 4

    4. Which songs do you like to sing?

    This is question 5

    Email the answers to yourself




    Form Code

    [step title "This is question 1" next "Next question" previous "Previous question"]
      <h2>1. Do you like answering questions?</h2>
      <p><strong>Hint: If you answer "no" you will skip to question 3</strong></p>
      [radio radio-q1 use_label_element "Yes" "No"]
    [step title "This is question 2"]
      <h2>2. Why do you like answering questions?</h2>
      [textarea textarea-q2]
    [step title "This is question 3"]
      <h2>3. Do you like singing songs?</h2>
      [radio radio-q3 use_label_element "Yes" "No"]
    [step title "This is question 4" ]
      <h2>4. Which songs do you like to sing?</h2>
      [textarea textarea-q4]
    [step title "This is question 5" ]
      <h2>Email the answers to yourself</h2>
      <label> Your name [text* your-name] </label>
      <label> Your email [email* your-email] </label>
      [submit "Submit"]
    <script language="javascript" type="text/javascript">
      jQuery(document).ready(function( $ ) {
        const $form = $('.wpcf7-form');
        $form.on('wpcf7cf_change_step', function(e, previousStep, currentStep) {
          if ( currentStep === 2 && $('[name="radio-q1"]:checked').val() === 'No' ) { // "No" is selected
            const nextStep = previousStep === 1 ? 3 : 1;
            wpcf7cf.multistepMoveToStep($form, nextStep);
          } //end if
        })
      })
    </script>

    Conditional Fields (Text)

    Edit this form in the form tester

    The relevant javascript code

    jQuery(document).ready(function( $ ) {
        const $form = $('.wpcf7-form');
        $form.on('wpcf7cf_change_step', function(e, previousStep, currentStep) {
          if ( currentStep === 2 && $('[name="radio-q1"]:checked').val() === 'No' ) { // "No" is selected
            const nextStep = previousStep === 1 ? 3 : 1;
            wpcf7cf.multistepMoveToStep($form, nextStep);
          } //end if
        })
      })