使用Postmail提交表单时实现页面内弹窗提示与表单重置方案

修改后的HTML代码 #

先移除不需要的success_url和error_url隐藏输入框，因为我们不再依赖页面跳转反馈结果：

<form action="https://postmail.invotes.com/send" method="post" id="contact_form">
    <input id="subject" type="hidden" name="subject" value="New Request" />
    <textarea id="message" name="text" placeholder="Message"></textarea>
    <input id="submit_form" type="submit" value="Send" />
</form>

修改后的JS代码 #

通过异步提交表单阻止页面跳转，处理响应并显示对应提示：

const submitButton = document.getElementById("submit_form");
const form = document.getElementById("contact_form");

form.addEventListener("submit", async function (event) {
    // 阻止表单默认提交跳转行为
    event.preventDefault();

    // 更新按钮状态，防止重复提交
    submitButton.value = "Sending...";
    submitButton.disabled = true;

    try {
        // 收集表单内的所有数据
        const formData = new FormData(form);
        // 异步发送POST请求到Postmail接口
        const response = await fetch(form.action, {
            method: form.method,
            body: formData
        });

        if (response.ok) {
            alert("邮件发送成功");
            form.reset(); // 重置表单内容
        } else {
            alert("表单提交失败");
        }
    } catch (error) {
        // 捕获网络异常等错误情况
        alert("表单提交失败");
    } finally {
        // 请求完成后恢复按钮状态
        submitButton.value = "Send";
        submitButton.disabled = false;
    }
});

核心改动说明 #

• 阻止默认跳转：用event.preventDefault()取消表单自带的提交跳转逻辑，确保页面留在当前页。
• 异步提交：使用fetch API发送表单数据，全程无页面刷新。
• 状态管理：提交时禁用按钮并显示加载状态，请求结束后恢复按钮可用状态，避免重复提交。
• 结果反馈：根据接口响应状态判断成功/失败，弹出对应提示；成功时自动重置表单内容。
• 异常处理：用try/catch捕获网络错误等意外情况，保证失败提示能正常触发。

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