Jotforms嵌入落地页提交后跳转异常，需实现回顶或感谢弹窗

问题原因 #

你遇到的提交后跳转异常问题有两个核心诱因：

• 默认Jotform JS嵌入方式自带提交后跳转逻辑，你未配置自定义回调覆盖默认行为
• 你写的PHP提交成功输出逻辑放在<head>结束标签和<body>开始标签之间，属于无效HTML结构，渲染位置异常，看起来就像跳转进了错误提示页

修复方案 #

步骤1：修正PHP代码结构 #

把原本放在<head>和<body>之间的提交判断逻辑，移动到<body>内部你想要展示成功提示的位置，比如页面最顶部banner上方：

<body>
<?php
if (isset($_POST['submission_id'])) {
    // 原有MongoDB存储逻辑保留即可
    // 输出成功提示
    echo '<div id="submit-success" style="padding:15px;background:#d4edda;color:#155724;text-align:center;font-size:16px;">感谢您的提交，我们会尽快与您联系</div>';
}
?>
<!-- 原有页面其余代码保持不变 -->

步骤2：修改Jotform嵌入逻辑，阻止默认跳转 #

你可以二选一以下两种方案实现需求：

方案A：改用iframe嵌入（稳定性更高）

把#form-container中原有的Jotform script标签替换为以下代码：

<div id="form-container">
    <iframe id="jotform-iframe" src="https://form.jotform.com/211297864375264" width="100%" height="800px" frameborder="0" allowtransparency="true" allow="geolocation; microphone; camera"></iframe>
</div>
<script>
// 监听Jotform提交成功事件
window.addEventListener('message', function(e) {
    if(e.origin === 'https://submit.jotform.com' && e.data.action === 'submission-completed') {
        // 提交成功后平滑滚动到页面顶部
        window.scrollTo({top: 0, behavior: 'smooth'});
        // 如果需要弹出提示，替换上面的滚动代码即可：alert('感谢您的提交');
    }
});
</script>

方案B：保留原JS嵌入方式，添加提交回调

在原有的Jotform嵌入script标签上方添加以下配置代码即可：

<script>
window.JotForm = window.JotForm || {};
JotForm.submitCallbacks = JotForm.submitCallbacks || [];
JotForm.submitCallbacks.push(function() {
    // 提交成功后平滑滚动到页面顶部
    window.scrollTo({top: 0, behavior: 'smooth'});
    // 如果需要弹出提示，替换上面的滚动代码即可：alert('感谢您的提交');
    return false; // 阻止默认跳转行为
});
</script>
<script type="text/javascript" src="https://form.jotform.com/jsform/211297864375264"></script>

你原有CSS中已经配置了html {scroll-behavior: smooth;}，所以滚动到顶部的动效会自动生效，无需额外配置。

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