How to skip a step in a multi-step form

  • Resolved cobberas63

    (@cobberas63)


    3 years, 7 months ago

    Hi there

    How can I skip a step in a multi-step form, depending on what the user enters in a previous step?

    e.g.
    If the answer in Step 1 is Yes –> skip to step 3.
    If the answer in Step 1 is No –> go to step 2, and then step 3.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    You need a bit of JavaScript logic to make this work.

    Here’s a basic example: https://conditional-fields-cf7.bdwm.be/multistep-example-move-to-specific-step-programatically/

    This is a rather simple example, so you probably need to add some logic to check the field values. Here’s a snippet that I coded a while ago for a PRO customer.

    <script>
const $form = jQuery('.wpcf7-form');
const $group2 = jQuery('[data-id="group-address2"]');
const $group3 = jQuery('[data-id="group-address3"]');
$form.on('wpcf7cf_change_step', function(e, previousStep, currentStep) {
  if (previousStep < currentStep) { // step forward
   if (!$group2.is(':visible') && currentStep === 6) {
     wpcf7cf.multistepMoveToStep($form,8)
   } else if (!$group3.is(':visible') && currentStep === 7) {
     wpcf7cf.multistepMoveToStep($form,8)
   }
  } else if (previousStep > currentStep) { // step back
   if (!$group2.is(':visible') && currentStep === 7) {
     wpcf7cf.multistepMoveToStep($form,5)
   } else if (!$group3.is(':visible') && currentStep === 7) {
     wpcf7cf.multistepMoveToStep($form,6)
   }
  }
});
</script>

    If you have a PRO license, feel free to email me directly and it will be my pleasure to help you out.

    Thread Starter cobberas63

    (@cobberas63)

    Excellent, thanks Jules ??

    Thread Starter cobberas63

    (@cobberas63)

    Hi Jules, I had a go at coding what I need but I’m getting some weird behaviour. Will email you.
    Cheers

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to skip a step in a multi-step form’ is closed to new replies.