如何在Magnific Popup弹窗内显示Gravity Forms提交后的感谢信息

我来帮你搞定这个问题！默认情况下，Gravity Forms提交后会触发页面跳转或刷新，直接导致Magnific Popup关闭。我们可以通过AJAX提交表单+替换弹窗内容的方式实现需求，具体步骤如下：

1. 调整弹窗HTML结构 #

给表单包裹一个容器ID，方便后续替换内容，同时给Gravity Forms短代码加上ajax=true开启AJAX提交：

<div id="test-popups" class="white-popup mfp-hide">
  <!-- 添加容器用于替换内容 -->
  <div id="gf-form-container">
    <?php echo do_shortcode('[gravityform id=4 title=false description=false ajax=true]'); ?>
  </div>
</div>
<a href="#test-popups" class="open-popup-link">Contact Us</a>

2. 修改JavaScript逻辑 #

我们需要监听Gravity Forms的AJAX提交成功事件，拦截默认行为，然后替换弹窗内容为感谢语：

jQuery(function ($) {
  // 初始化Magnific Popup
  $('.open-popup-link').magnificPopup({
    type: 'inline',
    closeOnBgClick: false,
    fixedContentPos: true,
    closeOnContentClick: false,
    callbacks: {
      // 弹窗打开后绑定表单成功提交事件
      open: function() {
        // 监听Gravity Forms AJAX提交成功的事件
        $(document).on('gform_confirmation_loaded', function(event, formId) {
          // 只处理ID为4的目标表单
          if(formId === 4) {
            // 阻止默认的确认行为（比如跳转/刷新）
            event.preventDefault();
            // 替换容器内的内容为感谢信息
            $('#gf-form-container').html('<p style="font-size:16px; line-height:1.5; margin:0;">Thanks for contacting us! We will get in touch with you shortly.</p>');
            // 可选：如果想隐藏弹窗关闭按钮，取消下面注释
            // $('.mfp-close').hide();
          }
        });
      },
      // 弹窗关闭时移除事件监听，避免重复绑定
      close: function() {
        $(document).off('gform_confirmation_loaded');
      }
    }
  });
});

3. 保留原有CSS（无需修改） #

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

关键说明： #

• gform_confirmation_loaded是Gravity Forms官方提供的AJAX提交成功事件，专门用于自定义确认行为。
• 通过event.preventDefault()阻止了默认的页面跳转/刷新，确保弹窗不会关闭。
• 弹窗关闭时移除事件监听，避免下次打开弹窗时重复绑定导致逻辑混乱。

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