怎么用HTML插入表单提交提示_HTML表单提交反馈设计

<form id="contactForm" action="/submit" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">提交</button>
</form>

<div id="successMessage" style="display: none; color: green;">
  提交成功！我们稍后会联系您。
</div>

document.getElementById("contactForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认提交

  // 这里可以添加数据验证逻辑
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;

  if (name && email) {
    // 隐藏表单，显示成功信息
    document.getElementById("contactForm").style.display = "none";
    document.getElementById("successMessage").style.display = "block";
  }
});

// 检查URL是否有成功参数
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("success")) {
  document.getElementById("successMessage").style.display = "block";
}

#successMessage {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  display: none;
}