如何在表单成功提交并页面重载后显示弹出式提示（使用formsubmit.co）-html教程-PHP中文网

如何在表单成功提交并页面重载后显示弹出式提示（使用formsubmit.co）

针对使用formsubmit.co等第三方服务导致页面重载的表单提交场景，本文将详细指导如何在不创建新页面的情况下，通过利用_next重定向参数和JavaScript检测，在表单成功提交后于同一页面上显示一个弹出式成功提示，从而提升用户体验。

引言：解决表单提交后的用户反馈难题

在Web开发中，表单提交是常见的交互行为。当使用formsubmit.co这类第三方服务处理表单数据时，通常会采用标准HTML表单提交方式（method="POST"），这会导致浏览器进行页面重载或重定向。开发者常遇到的一个挑战是：如何在表单成功提交后，在不跳转到新页面的情况下，向用户提供即时、友好的成功反馈（例如，一个弹出式模态框）。

直接在submit事件监听器中显示弹窗并不可行，因为submit事件在表单数据发送之前触发，弹窗会在页面重载或重定向发生时立即消失，用户体验不佳。本文将介绍一种巧妙的解决方案，通过利用formsubmit.co的重定向机制和客户端JavaScript，实现表单提交成功后的模态框提示。

核心策略：利用重定向参数检测提交成功

formsubmit.co提供了一个名为_next的隐藏字段，允许开发者指定表单提交成功后的重定向URL。这是我们实现目标的关键。我们的核心策略是：

将_next字段的值设置为当前页面的URL，并附加一个特定的查询参数，例如 ?status=success。
当表单提交成功后，formsubmit.co会将用户重定向回当前页面，此时URL中将包含我们设置的?status=success参数。
在页面加载时，使用JavaScript检测URL中是否存在这个参数。如果存在，则表明表单刚刚成功提交，此时即可触发模态框显示。

环境准备：引入SweetAlert库

为了提供美观且易于使用的弹出式提示，我们将采用流行的SweetAlert库。它提供了一个简洁的API来创建各种类型的警告、确认和信息提示框。

在您的HTML文件的<head>或<body>底部（推荐在</body>标签前）引入SweetAlert的CDN链接：

<!-- SweetAlert CSS (可选，但推荐用于自定义样式) -->
<link rel="stylesheet" href="https://unpkg.com/sweetalert/dist/sweetalert.css" />
<!-- SweetAlert JavaScript -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

登录后复制

步骤一：修改HTML表单

在您的HTML表单中，除了常规的输入字段外，需要添加一个_next隐藏字段。请将value属性替换为您的实际页面URL，并确保包含?status=success参数。

<form action="https://formsubmit.co/your@email.com" method="POST" class="contact-form">
    <input type="text" name="name" placeholder="您的姓名" required>
    <input type="email" name="email" placeholder="您的邮箱" required>
    <textarea name="message" placeholder="您的消息" required></textarea>

    <!-- 关键步骤：设置_next重定向URL，指向当前页面并带上成功参数 -->
    <!-- 请将 "https://yourdomain.com/your-form-page.html" 替换为您的实际页面URL -->
    <input type="hidden" name="_next" value="https://yourdomain.com/your-form-page.html?status=success">

    <!-- 可选：禁用reCAPTCHA -->
    <input type="hidden" name="_captcha" value="false">

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

登录后复制

重要提示： 请务必将https://yourdomain.com/your-form-page.html替换为您的表单所在页面的实际完整URL。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

步骤二：编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来检测URL中的status=success参数，并在检测到时显示SweetAlert模态框。

将以下JavaScript代码放置在您的HTML文件底部，</body>标签之前，确保在SweetAlert库加载之后执行：

document.addEventListener('DOMContentLoaded', function() {
    // 获取当前URL的查询参数
    const urlParams = new URLSearchParams(window.location.search);

    // 检查是否存在 'status=success' 参数
    if (urlParams.has('status') && urlParams.get('status') === 'success') {
        // 使用SweetAlert显示成功提示
        swal({
            title: "提交成功！",
            text: "您的信息已成功接收。",
            icon: "success", // 可以是 'success', 'error', 'warning', 'info'
            button: "确定",
        }).then(() => {
            // 可选：清理URL参数，防止用户刷新页面时再次显示模态框
            // 这将从URL中移除 '?status=success'，但不会重新加载页面
            history.replaceState({}, document.title, window.location.pathname);
        });

        // 可选：清空表单字段，提供更好的用户体验
        const form = document.querySelector('.contact-form');
        if (form) {
            form.reset();
        }
    }
});

登录后复制

完整示例代码

将以上HTML和JavaScript代码整合，形成一个完整的可运行示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单提交成功提示</title>
    <!-- SweetAlert CSS -->
    <link rel="stylesheet" href="https://unpkg.com/sweetalert/dist/sweetalert.css" />
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        .contact-form {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .contact-form button {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .contact-form button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <form action="https://formsubmit.co/your@email.com" method="POST" class="contact-form">
        <h2>联系我们</h2>
        <input type="text" name="name" placeholder="您的姓名" required>
        <input type="email" name="email" placeholder="您的邮箱" required>
        <textarea name="message" placeholder="您的消息" rows="5" required></textarea>

        <!-- 替换为您的实际页面URL -->
        <input type="hidden" name="_next" value="https://yourdomain.com/your-form-page.html?status=success">
        <input type="hidden" name="_captcha" value="false">

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

    <!-- SweetAlert JavaScript -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);

            if (urlParams.has('status') && urlParams.get('status') === 'success') {
                swal({
                    title: "提交成功！",
                    text: "您的信息已成功接收。",
                    icon: "success",
                    button: "确定",
                }).then(() => {
                    // 清理URL参数
                    history.replaceState({}, document.title, window.location.pathname);
                });

                // 清空表单字段
                const form = document.querySelector('.contact-form');
                if (form) {
                    form.reset();
                }
            }
        });
    </script>

</body>
</html>

登录后复制

再次强调： 在上述代码中，请务必将action属性中的邮箱地址和_next隐藏字段的value属性替换为您自己的实际信息。

注意事项与最佳实践

URL参数清理： history.replaceState({}, document.title, window.location.pathname); 这行代码非常重要。它会在模态框关闭后，从浏览器地址栏中移除?status=success参数，而不会导致页面再次刷新。这可以避免用户手动刷新页面时模态框再次弹出，提升用户体验。
表单字段清空： 在成功显示模态框后，使用form.reset()清空表单字段是一个良好的用户体验实践，让用户知道他们可以再次提交新信息。
错误处理： 本方案主要针对成功提交的情况。formsubmit.co默认情况下只会重定向成功提交的请求。如果需要更复杂的错误处理（例如，表单验证失败、服务器错误等），可能需要结合后端逻辑或采用更高级的AJAX提交方案。
用户体验反馈： 在表单提交过程中，页面会短暂加载。为了进一步提升用户体验，您可以在submit事件中暂时显示一个加载指示器（例如，一个旋转的加载图标），并在页面重载后，通过上述方法显示成功提示并隐藏加载指示器。
替代方案：AJAX提交： 如果您希望完全避免页面重载，并对提交过程有更精细的控制，可以考虑使用JavaScript的fetch API或XMLHttpRequest进行AJAX提交。然而，这通常需要formsubmit.co或其他后端服务支持CORS（跨域资源共享），并且客户端需要处理响应结果来决定是否显示成功模态框。对于formsubmit.co，它也支持AJAX提交，但需要不同的JavaScript实现方式，超出了本文通过重定向参数实现的目标。

总结

通过巧妙地利用formsubmit.co的_next重定向参数，并在页面加载时通过JavaScript检测URL参数，我们成功地在不创建额外页面的情况下，实现了表单成功提交后在同一页面上显示弹出式成功提示的功能。这种方法兼顾了易用性和用户体验，是处理类似场景的一种高效且实用的解决方案。

以上就是如何在表单成功提交并页面重载后显示弹出式提示（使用formsubmit.co）的详细内容，更多请关注php中文网其它相关文章！