How to Add a Countdown Timer to Dubsado Forms

Dubsado Customizations
Written By Colin Tierney

Have you ever wanted to create some urgency when sending a Dubsado form to a lead and/or prospect? Good news! Now you can with a countdown timer. Dubsado already allows you to add an expiration date to your forms, but now you can accentuate that urgency with a visual that’s proven to convert leads into customers and clients.

 

Interested in a timer that reflects your form’s relative or fixed Expiration Date? Don’t want to worry about manually updating the code each time? Want even more style customizations? Check out our code-free Countdown Timer plugin!

 

Setting up your Countdown Timer

The Code

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<div class="countdown">
   <h2 id="days"></h2>
   <h2 id="hours">></h2>
   <h2 id="mins">></h2>
   <h2 id="secs">></h2>
   <h2 id="end">></h2>
</div>

<script type="application/javascript">
// The data/time we want to countdown to
var countDownDate = new Date("Jul 25, 2024 16:37:52").getTime();
// Run myfunc every second
var myfunc = setInterval(function() {
var now = new Date().getTime();
var timeleft = countDownDate - now;
// Calculating the days, hours, minutes and seconds left
var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
// Result is output to the specific element
document.getElementById("days").innerHTML = days + "d "
document.getElementById("hours").innerHTML = hours + "h "
document.getElementById("mins").innerHTML = minutes + "m "
document.getElementById("secs").innerHTML = seconds + "s "
// Display the message when countdown is over
if (timeleft < 0) {
clearInterval(myfunc);
document.getElementById("days").innerHTML = ""
document.getElementById("hours").innerHTML = ""
document.getElementById("mins").innerHTML = ""
document.getElementById("secs").innerHTML = ""
document.getElementById("end").innerHTML = "TIMES UP!";
}
}, 1000);
}</script>

  1. Update the expiration date where you see Jul 25, 2024 16:37:52

  2. Update the message when the countdown is over where you see TIMES UP!

  3. Make sure you do NOT delete the straight double quotes wrapping the values (the updated date and message).

Styling your Countdown Timer

The Code

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE COUNTDOWN TIMER */
.countdown {
    background: #3b3b3b; /* Update background color */
    text-align: center;
    padding: 20px; /* Update space around text */
}
.countdown h2 {
    display: inline;
    color: white; /* Update font color */
    font-family: Cormorant; /* Update font */
    font-weight: 300; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    font-size: 60px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
}

Things to note

  • Make sure you set your form’s expiration date to be in line with the countdown timer’s date.

  • If you’re using this code on a contract—and since Dubsado doesn’t offer a Code Block on contract/sub agreement forms—you’ll have to use this workaround.

  • Of course you can style this further if you want (using CSS), but this should get you started.

TABLE OF CONTENTS
Interested in a timer that reflects your form’s relative or fixed Expiration Date? Don’t want to worry about manually updating the code each time? Want even more style customizations? Check out our code-free Countdown Timer plugin!
Colin Tierney http://www.tierneystudio.com