• Hello,

    I was looking for a solution to add a quiz to my website and came across your plugin – beautiful plugin – functions exactly as intended!

    One of my requirements was adding a timer to the quiz questions, and when the timer reaches 0, it would submit the answers and move to the next step. I’ve managed to get this partly working.

    Using some Javascript, once the timer reaches 0, it performs the following function:
    document.getElementsByClassName(“wpcf7-form”)[0].submit();

    This executes partly as I had intended when the timer reaches 0, however, rather than redirecting to the next step, it refreshes the page and says “Thank you for your message. It has been sent.”

    Is there something specific that it needs to be changed to in order to have it move to the next step instead?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author webheadcoder

    (@webheadllc)

    Does it go to the next step when you click on the submit button manually? Maybe post your cf7 form code here. You may be missing the multistep form-tag.

    Thread Starter Andrew Wightman

    (@wightman81)

    Yes, when I manually click the button, it moves to the next step – multistep form tag is implemented, and functions perfectly – it moves through each step gracefully which is exactly what I was hoping for

    Below is my code for the timer itself, inside the wordpress loop. The output of the timer itself functions, it counts down as intended – that aspect works flawlessly. Once the timer reaches 0, I need it to save the values entered and proceed to the next step. Currently, when the timer reaches 0, it says ““Thank you for your message. It has been sent.” and stays on the same page/step, but if the button is clicked manually, it will proceed to the next step.

    <?php $mins = get_post_custom_values(‘_time_limit_mins’); ?>
    <?php $secs = get_post_custom_values(‘_time_limit’); ?>
    <script>
    window.onload = function(){
    var min = <?php echo $mins[0]; ?>;
    var sec = <?php echo $secs[0]; ?>;
    setInterval(function(){
    document.getElementById(“timer”).innerHTML = min +” : ” + sec ;
    sec–;
    if(sec == 00 && min >= 1)
    {
    min–;
    sec = 60;
    }
    if (min <= 0 && sec <= 0){
    document.getElementsByClassName(“wpcf7-form”)[0].submit();
    }

    },1000);
    }
    </script>

    <div id=”status”>
    <h2><span id=”timer”><?php echo $mins[0]; ?> : <?php echo $secs[0]; ?></span></h2>

    Plugin Author webheadcoder

    (@webheadllc)

    maybe you can try clicking the submit button instead?

    instead of
    document.getElementsByClassName(“wpcf7-form”)[0].submit();

    click the button:
    document.getElementsByClassName(“wpcf7-submit”)[0].click();

    Thread Starter Andrew Wightman

    (@wightman81)

    Thanks! That worked perfectly!

    I have another question (different topic so not sure whether to post it here or open a new thread).

    My form has 12 steps in it, and it works beautifully. I tested it and it worked fine, but im noticing sometimes it is missing responses that are inputted near the middle of the steps (Ex. It will display answers for steps 1-4 and step 12 but is missing 5-11, and just shows the shortcode for that field instead in the email. The shortcodes for the fields are all correct, I’ve double checked those. Any ideas?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Move to Next Step when timer reaches 0’ is closed to new replies.