留言成功感谢页面的十秒返回代码

在制作网站时,我们通常采用留言表单作为用户转化的途径,然后在经过用户提交表单后,我们应该怎么给用户留下反馈,并追踪相应的转化操作呢。

我们可以制作一个感谢页面,在用户提交表单成功后,我们让用户跳转至感谢页面(thank-you.page),并于十秒后返回用户留言的页面与位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="countdown" style="font-size: 20px; text-align: center;">
  Your submission was successful! The page will return in <span id="timer" style="color:#0c78c0;font-weight:500">10</span> seconds
</div>

<script>
  var countdown = 10;
  var timerElement = document.getElementById("timer");

  function updateCountdown() {
    countdown--;
    timerElement.innerText = countdown;

    if (countdown <= 0) {
      // 当倒计时为零时,返回上一页
      window.history.back();
    }
  }

  // 每秒更新倒计时
  setInterval(updateCountdown, 1000);
</script>