Question

Countdown timer on Forms

Forms

Updated October 11, 2020

asked on November 27, 2018

Hello,

One of our users wanted to have a countdown timer appear when submitting a form.Their forms process is kind of long and users usually stay for more than 60 minutes on the same page or even before saving it as a draft. They were wondering if it is possible to display a 60 minute timer on a form once it is launched? I was thinking of using a formula to capture exact time and add 1 hour but can't seem to figure out the formula.

What i had in mind was =SUM(time, 1:00:00) doesn't seem to work.

Thanks!

0 0

Answer

SELECTED ANSWER

replied on November 28, 2018 • Show version history

Hi Paul,

You can setup a simple timer.

Add a custom html field, formatted with <p id="cntDown"></p>

Add some javascript:

$(document).ready(function() {

    var xMinutes = 10;

    document.getElementById("cntDown").innerHTML = "Minutes until doom: " + xMinutes;

    var timer = setInterval(function() {
      
        xMinutes--;
      document.getElementById("cntDown").innerHTML = "Minutes until doom: " + xMinutes;

        if (xMinutes == 0) {
            clearInterval(timer);
            document.getElementById("cntDown").innerHTML = "BOOM!";
        }
      
    }, 60000);

});

~ Andrew

0 0

replied on November 28, 2018

Could you please send me a java script with Seconds added on it?

0 0

replied on November 28, 2018

Thanks!

0 0

Replies

replied on November 29, 2018

Not sure if it's helpful but this user has made an auto-save prompt that you can change to just appear after a set amount of time. Seems like it would have some use in your case.

https://answers.laserfiche.com/questions/88360/Feature-Request-Auto-Save-Forms

1 0

replied on November 28, 2018

This should work:

$(document).ready(function() {

    var xMinutes = 10; 
    var xSeconds = 59;

    document.getElementById("cntDown").innerHTML = "Minutes until doom: " + xMinutes + ":" + xSeconds;

    var timer = setInterval(function() {

        xSeconds--;
      
        if (xSeconds < 10) {
            document.getElementById("cntDown").innerHTML = "Minutes until doom: " + xMinutes + ":0" + xSeconds;
        } else {
            document.getElementById("cntDown").innerHTML = "Minutes until doom: " + xMinutes + ":" + xSeconds;
        }

        if (xMinutes == 0 && xSeconds == 0) {
            clearInterval(timer);
            document.getElementById("cntDown").innerHTML = "BOOM!";
        }

        if (xSeconds == 0) {
            xMinutes--;
            xSeconds = 59;
        }
      
    }, 1000);

});

0 0

replied on September 4, 2019

This is awesome! Thanks, very helpful. Can someone help me out with the code to take advantage of some CSS classes I've got on a form I'm building using this code? I've tried a few things and can't seem to get it to work. I know the CSS classes I have do work when applied to other elements of the form. I just need to be able to apply the CSS to the portion that says BOOM!. I'm using this as a save now countdown timer. Any help would be highly appreciated!

//Countdown Timer Test
    var xMinutes = 0; 
    var xSeconds = 10;

    document.getElementById("cntDown").innerHTML = "Remember to Save your draft in: " + xMinutes + ":" + xSeconds;

    var timer = setInterval(function() {

        xSeconds--;
      
        if (xSeconds < 10) {
            document.getElementById("cntDown").innerHTML = "Remember to Save your draft in: " + xMinutes + ":0" + xSeconds;
        } else {
            document.getElementById("cntDown").innerHTML = "Remember to Save your draft in: " + xMinutes + ":" + xSeconds;
        }

        if (xMinutes == 0 && xSeconds == 0) {
            clearInterval(timer);
            document.getElementById("cntDown").innerHTML = "SAVE NOW";
            document.getElementByClassName("cntDown").innerHTML = "doneClass";
            document.getElementByClassName("cntDown").innerHTML = "blinkerClass";
          
        }

        if (xSeconds == 0) {
            xMinutes--;
            xSeconds = 59;
        }
      
    }, 1000);

//End Countdown Timer Test

Here is my CSS

.done {color: tomato !important; font-weight: bold;}
.blink {
  animation: blinker 1.5s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

0 0

replied on October 11, 2020

Hi, I would like for my text to blink Red. Where exactly would I put the code? And why is there not a identifier like #q1

I tried html but it only worked for a few minutes and now it doesn't want to work. So next I'm thinking I should do it in CSS. But I'm not sure how to go about this.

0 0

You are not allowed to follow up in this post.

Question

Question

Countdown timer on Forms

Answer

Replies

Sign in to reply to this post.