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
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
})
})