如何使用formsubmit.co提交HTML表单不触发页面跳转，显示页内成功提示

DevOps 小满

2026-10-4

你之前写的表单提交拦截逻辑没有正确获取表单DOM对象，所以没有生效，还是会触发默认跳转。要实现无刷新提交、提交后替换表单为成功提示，按下面的方案修改即可：

第一步：调整HTML结构

首先给表单添加唯一ID，同时新增默认隐藏的提交成功提示区块：

把原form标签修改为：

<form id="waitlistForm" action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">

在form的同级位置（<div class="form w-100 pb-2">内部、form标签后面）新增成功提示区块：

<!-- 提交成功提示区块，默认隐藏 -->
<div id="submitSuccess" class="d-none text-center py-5">
  <i class="fas fa-check-circle text-success fs-1 mb-3"></i>
  <h4 class="fw-bold">提交成功！</h4>
  <p class="text-muted">我们已收到你的测试申请，会尽快同步Beta准入通知。</p>
</div>

第二步：替换提交逻辑

删掉你原来写的那段无效的form.onSubmit代码，在页面</body>标签前新增如下JS代码：

// 获取对应DOM元素
const waitlistForm = document.getElementById('waitlistForm');
const submitSuccessBlock = document.getElementById('submitSuccess');

waitlistForm.addEventListener('submit', function (e) {
  // 阻止表单默认跳转提交行为
  e.preventDefault();

  // 收集表单填写的所有数据
  const formData = new FormData(waitlistForm);

  // 异步提交表单数据
  fetch(waitlistForm.action, {
    method: waitlistForm.method,
    body: formData,
    headers: {
      'Accept': 'application/json'
    }
  }).then(response => {
    if (response.ok) {
      // 提交成功：隐藏表单，展示成功提示
      waitlistForm.classList.add('d-none');
      submitSuccessBlock.classList.remove('d-none');
      waitlistForm.reset();
    } else {
      alert('提交失败，请稍后重试');
    }
  }).catch(error => {
    alert('提交出错，请检查网络连接后重试');
  });
});