利用CSS和jQuery制作底部悬浮跟随表单，提高网站转化率

1年前 (2023-07-26)插件特效179

在进行网站优化和提高客户转化的过程中，一个重要的环节就是收集用户信息。为了实现这一目标，我们可以使用CSS和jQuery制作一个底部悬浮跟随表单，让用户方便地填写信息。

然而，我们也需要注意一些问题，比如防止恶意提交表单和验证用户输入的信息是否正确。为了解决这些问题，我们可以在表单中添加一些验证机制。

首先，让我们来考虑一下称呼的输入。根据要求，用户只能输入一个到最大四个汉字个数的称呼。如果用户输入的汉字个数超过了最大限制，我们需要及时提示错误信息，告诉用户需要重新输入。

接下来，我们需要验证用户输入的联系方式。根据要求，联系方式只能是以数字1开头，并且长度最长为11位，符合国内手机号码的规范。如果用户输入的联系方式不符合要求，我们也需要及时提示错误信息，以便用户进行修改。

通过以上的验证机制，我们可以有效地防止恶意提交表单和确保用户输入信息的正确性。这样一来，我们就能更好地收集用户信息，从而提高网站的转化率。

通过使用CSS和jQuery制作一个底部悬浮跟随表单，并添加验证机制，我们可以实现网站优化和提高客户转化的目标。通过限制称呼和联系方式的输入规则，我们可以避免恶意提交和错误信息的问题。这样一来，我们就能更好地了解用户需求，提供更好的服务，从而提高网站的转化率。

html代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>悬浮表单</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="floating-form">
    <img src="logo.png" alt="Logo">
    <input type="text" id="name" placeholder="请输入您的称呼">
    <input type="tel" id="phone" placeholder="请输入您的电话号码">
    <button id="submit">立即提交</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS代码：

#floating-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 200px;
  height: 70px;
  border-radius: 5px;
}

input[type="text"],
input[type="tel"] {
  border-radius: 5px;
  padding: 10px;
  margin: 0 10px;
}

button {
  background-color: #1464ba;
  border: 1px solid white;
  color: white;
  width: 120px;
  height: 40px;
  border-radius: 5px;
}

button:hover {
  cursor: pointer;
}

JS代码：

$(document).ready(function() {
  // 提交按钮点击事件
  $("#submit").click(function() {
    var name = $("#name").val();
    var phone = $("#phone").val();
    
    // 判断称呼输入框和电话号码输入框是否有内容
    if (name === "") {
      alert("请输入您的称呼");
    } else if (phone === "") {
      alert("请输入您的手机号码");
    } else {
      // 判断称呼输入框只支持中文且只能输入四个汉字
      var chinesePattern = /^[\u4e00-\u9fa5]{1,4}$/;
      if (!chinesePattern.test(name)) {
        alert("请输入正确的称呼");
      } else {
        // 判断电话号码输入框只能输入数字
        var numberPattern = /^[0-9]+$/;
        if (!numberPattern.test(phone)) {
          alert("请输入正确的手机号码");
        } else {
          // 判断电话号码格式
          var phonePattern = /^1[3456789]\d{9}$/;
          if (!phonePattern.test(phone)) {
            alert("请输入正确的手机号码");
          } else {
            // 执行提交操作
            alert("提交成功");
          }
        }
      }
    }
  });

  // 页面滚动时悬浮框跟随效果
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    $("#floating-form").css("top", scrollTop);
  });
});