How to add timer to the webform?

Let’s look at how you can make a countdown timer webform in InSend. It may look something like this:

To create such a timer, you need to add an HTML block to the webform:

In this block you need to insert the code depending on which timer you want. Most often our customers use one of two timers:

1. A single timer for all visitors for a few days when a certain action is running. Or "Until New Year ... X days left".

2. A personal timer for each visitor showing the period in which they can use their promotion code.

Below you will find the codes for both options

HTML code for a single timer for a specific date

This code specifies the date until which the countdown timer will be displayed. When the date is reached, the text "Action complete" is displayed. Copy and paste the timer code into the HTML block:

<div style="text-align: center; font-size: 20px;" data-time-end="2019-05-19 23:59:59" data-message="Promotion completed"></div> 
<script> var snv_timer = function() 
{ var b_timer = document.querySelectorAll('.cnv_timer'); var d_format = function(v) { return parseInt(v) <= 9 ? '0'+v : v; } var update = function() { for(i=0; i < b_timer.length; i++) { var b_el = b_timer[i]; var time_end = new Date(b_el.dataset.timeEnd.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1')); var time_real = (new Date()); if (time_end < time_real) { b_el.innerHTML = b_el.dataset.message; } else { var s = time_end.getTime() - time_real.getTime(); s = parseInt(s / 1000); var d = parseInt(s / 86400); s -= d * 86400; var h = parseInt(s / 3600); s -= h * 3600; var m = parseInt(s / 60); s -= m * 60; b_el.innerHTML = d + ' д. ' + d_format(h) + ':' + d_format(m) + ':' + d_format(s); } } setTimeout(function() { if (b_timer.length > 0) update(); }, 1000); } update(); } snv_timer(); 
</script>

HTML code for a unique timer for each visitor

This timer will start counting down from 100 seconds each time the page is opened. When 100 seconds have passed, the user will see "Action Complete". Copy and paste the timer code into the HTML block:

<div style="text-align: center; font-size: 20px;" data-seconds="100" data-message="Promotion completed"></div> 
<script> var snv_timer = function() { var b_timer = document.querySelectorAll('.cnv_timer'); var d_format = function(v) { return parseInt(v) <= 9 ? '0'+v : v; } var update = function() { for(i=0; i < b_timer.length; i++) { var b_el = b_timer[i]; if (!b_el.dataset.current_mseconds) b_el.dataset.current_mseconds = b_el.dataset.seconds * 1000; var time_end = b_el.dataset.current_mseconds; if (time_end < 0) { b_el.innerHTML = b_el.dataset.message; } else { var s = time_end; s = parseInt(s / 1000); var d = parseInt(s / 86400); s -= d * 86400; var h = parseInt(s / 3600); s -= h * 3600; var m = parseInt(s / 60); s -= m * 60; b_el.innerHTML = d_format(h) + ':' + d_format(m) + ':' + d_format(s); time_end = time_end - 1000; b_el.dataset.current_mseconds = time_end; } } setTimeout(function() { if (b_timer.length > 0) update(); }, 1000); } update(); } snv_timer(); 
</script>

Do not worry about seeing HTML code in the editor instead of the counter. Use the preview to see how the counter will look.

Timer settings

You can edit the date and time until which the web form will work, as well as customize the size, color and style of the text. For this you need basic knowledge of HTML and a steady hand. You can edit the text style, date and timer end time at the beginning of the HTML code: