如何阻止FormSubmit.co跳转至感谢页并在当前页显示提交反馈

你的代码逻辑已经实现了阻止跳转+页面内显示反馈的核心需求，不过有几个细节可以完善：

• 可以移除_next隐藏字段：因为你已经通过event.preventDefault()完全阻止了表单的默认提交行为，FormSubmit.co不会触发跳转，这个字段留着没用，删掉更干净。
• 适配FormSubmit的JSON响应格式：FormSubmit.co成功时会返回带message字段的JSON，失败时也会返回错误信息，你可以直接用接口返回的文本替换硬编码内容，更贴合官方反馈：

  // 在原有response.ok判断里添加解析逻辑
  const result = await response.json();
  if (response.ok) {
    messageBox.textContent = result.message || "Thank you! We'll get back to you soon!";
    messageBox.className = "success";
    form.reset();
  } else {
    messageBox.textContent = result.message || "Something went wrong. Please try again.";
    messageBox.className = "error";
  }
  

• 增加加载状态与防重复提交：提交过程中给用户明确反馈，同时禁用提交按钮防止重复发送：

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    // 获取并禁用提交按钮
    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    // 显示加载提示
    messageBox.textContent = "正在发送消息...";
    messageBox.className = "loading";
  
    const data = new FormData(form);
  
    try {
      // 原有fetch请求逻辑
      const response = await fetch(form.action, {
        method: form.method,
        body: data,
        headers: { 'Accept': 'application/json' }
      });
      const result = await response.json();
      if (response.ok) {
        messageBox.textContent = result.message || "Thank you! We'll get back to you soon!";
        messageBox.className = "success";
        form.reset();
      } else {
        messageBox.textContent = result.message || "Something went wrong. Please try again.";
        messageBox.className = "error";
      }
    } catch (error) {
      messageBox.textContent = "Network error. Please try again later.";
      messageBox.className = "error";
    } finally {
      // 无论成功失败，恢复按钮状态
      submitBtn.disabled = false;
    }
  });
  

• 添加基础样式优化显示：初始状态隐藏消息框，成功/失败/加载时分别显示对应样式：

  #form-message {
    display: none;
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 4px;
  }
  #form-message.success {
    display: block;
    background: #d4edda;
    color: #155724;
  }
  #form-message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
  }
  #form-message.loading {
    display: block;
    background: #d1ecf1;
    color: #0c5460;
  }
  

这些细节能让表单交互更流畅，也更符合用户预期。

内容的提问来源于stack exchange，提问作者user1373287