如何将Gravity Form提交按钮关联到Elementor创建的弹窗？

方法一：Gravity Forms钩子 + Elementor内置函数（推荐，稳定性高） #

• 获取Elementor弹窗模板ID
  打开Elementor模板库，找到你的弹窗模板并进入编辑页面，从URL里提取post=xxx中的xxx，这就是模板ID（比如URL是wp-admin/post.php?post=123&action=elementor，ID就是123）。
• 添加自定义PHP代码
  用代码片段插件（如Code Snippets）或者主题的functions.php文件，添加以下代码，替换GF_FORM_ID为你的Gravity Form表单ID（表单编辑页URL里的id=xxx），替换123为你的弹窗模板ID：

  add_action( 'gform_after_submission_GF_FORM_ID', 'trigger_elementor_popup_on_gf_submit', 10, 2 );
  function trigger_elementor_popup_on_gf_submit( $entry, $form ) {
      ?>
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              elementorProFrontend.modules.popup.showPopup( { id: 123 } );
          });
      </script>
      <?php
  }
  

  这个钩子会在指定表单提交完成后触发，自动调用Elementor的弹窗显示函数。

方法二：纯前端JS监听（适合不想修改PHP的新手） #

• 给Elementor弹窗设置CSS类
  编辑弹窗模板，在「高级」面板的「CSS类」中输入自定义类名，比如gf-submit-success-popup，发布模板。
• 给Gravity Form提交按钮加CSS类
  编辑目标Gravity Form，找到提交按钮，在「外观」选项的「CSS类」中输入gf-submit-btn。
• 添加自定义JS代码
  在Elementor后台的「自定义代码」中新建JS片段，位置选择「页脚」，粘贴以下代码：

  document.addEventListener('DOMContentLoaded', () => {
      const form = document.querySelector('.gf-submit-btn').closest('form');
      if (form) {
          form.addEventListener('submit', () => {
              // 延迟执行确保表单提交完成
              setTimeout(() => {
                  elementorProFrontend.modules.popup.showPopup( { selector: '.gf-submit-success-popup' } );
              }, 500);
          });
      }
  });
  

  注意：如果你的表单开启了AJAX提交，这个方法适配性更好；若为普通刷新提交，优先选方法一。

注意事项 #

• 确保已激活Elementor Pro，弹窗功能是Pro版专属。
• 测试时请在前端页面操作，不要在后台预览表单。
• 使用代码片段插件时，记得激活添加的代码片段。

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