实现点击按钮弹出Gravity表单并在提交后显示视频的功能咨询

看起来你已经搭好了这个功能的核心逻辑框架，我来帮你梳理下当前的实现和可以完善的地方：

现有实现的核心逻辑 #

你目前的思路是完全正确的：

• 页面上默认隐藏视频元素（通过display: none）
• 挂载在wp_footer的脚本监听Gravity Forms的gform_confirmation_loaded事件，当ID为1的表单提交成功后，将视频元素设为显示状态

可能需要补充的环节 #

1. 按钮触发表单弹窗的逻辑
   你的现有脚本只处理了表单提交后的视频显示，但还需要确保点击按钮能弹出Gravity表单。这里分两种情况：

   • 如果用Gravity Forms内置的弹窗功能：确保在表单设置里开启了弹窗模式，然后给按钮绑定触发弹窗的事件，比如：

     // 假设按钮ID是open-video-form
     document.getElementById('open-video-form').addEventListener('click', function() {
         // 调用Gravity Forms内置的弹窗方法，参数是表单ID
         gform.showPopup(1);
     });
     

   • 如果是自定义弹窗容器：需要先把表单嵌入到一个隐藏的弹窗容器里，然后点击按钮时显示这个容器：

     document.getElementById('open-video-form').addEventListener('click', function() {
         document.getElementById('custom-form-popup').style.display = 'flex';
     });
     

2. 脚本的稳定性优化

   • 确保jQuery依赖没问题：你的脚本用了jQuery(document).on，WordPress默认会加载jQuery，但如果主题做了去耦处理，最好在输出脚本前确认jQuery已加载，或者把代码改成原生JS写法（事件监听部分可以改成原生：document.addEventListener('gform_confirmation_loaded', function(event) {...})）
   • 验证表单ID：确认Gravity Forms后台里你的联系表单ID确实是1，别搞混了其他表单的ID
   • 检查视频元素ID：确保页面上的iframe元素ID和脚本里的wb-video完全一致，大小写要匹配

测试小技巧 #

• 可以在事件监听里加个控制台日志，方便排查问题：

  jQuery(document).on('gform_confirmation_loaded', function(event, formId){
      console.log('表单提交触发，ID：', formId);
      if (formId == 1) {
          document.getElementById('wb-video').style.display = 'block';
      }
  });
  

  打开浏览器开发者工具的控制台，提交表单后看看有没有输出日志，以此判断事件是否正常触发。
• 如果视频还是不显示，检查元素的CSS样式，看看有没有其他样式规则覆盖了display: block，可以在开发者工具里查看元素的计算样式。

备注：内容来源于stack exchange，提问作者fateme zre