嵌入GoHighLevel表单的Iframe高度被设为0px，仅弹窗加载后正常显示

可能的原因 #

• 表单脚本实例冲突：页面同时存在弹窗版和内嵌版的同款表单，GoHighLevel的form_embed.js初始化时可能将两者视为同一实例，默认只激活弹窗版，强制把内嵌版iframe高度设为0，直到弹窗触发后才重新识别并设置正确高度。
• WordPress主题/插件JS干扰：主题或第三方插件的JavaScript代码在页面加载阶段修改了iframe的样式属性，覆盖了你设置的高度值，而弹窗触发时表单脚本会重新强制设置高度，因此恢复正常。
• 表单脚本初始化逻辑缺陷：form_embed.js可能依赖弹窗触发的事件来完成内嵌表单的高度初始化，页面首次加载时未执行高度设置逻辑，反而将iframe高度重置为0。

解决办法 #

• 修改内嵌表单的唯一标识：将内嵌版iframe的id和data-layout-iframe-id改为与弹窗版不同的值，避免脚本混淆实例。示例代码：

  <iframe
    src="https://api.leadconnectorhq.com/widget/form/EY9AaBHFKfRSNmtWPw31"
    style="width:100%;height:558px;border:none;border-radius:3px"
    id="inline-unique-contact-form" 
    data-layout="{'id':'INLINE'}"
    data-trigger-type="alwaysShow"
    data-trigger-value=""
    data-activation-type="alwaysActivated"
    data-activation-value=""
    data-deactivation-type="neverDeactivate"
    data-deactivation-value=""
    data-form-name="Contact Form"
    data-height="558"
    data-layout-iframe-id="inline-unique-contact-form"
    data-form-id="EY9AaBHFKfRSNmtWPw31"
    title="Contact Form"
  >
  </iframe>
  

• 强制锁定iframe高度：把iframe的style里的height从100%改为固定值558px，并加上!important强制优先级，避免被其他脚本覆盖：

  style="width:100%;height:558px !important;border:none;border-radius:3px"
  

• 调整脚本加载时机：延迟加载表单脚本，避免与弹窗版脚本冲突，比如用DOM加载完成事件触发：

  <iframe
    <!-- 保持原iframe属性不变 -->
  >
  </iframe>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const script = document.createElement('script');
    script.src = 'https://link.msgsndr.com/js/form_embed.js';
    document.body.appendChild(script);
  });
  </script>
  

• 排查WordPress冲突：暂时禁用所有第三方插件，切换到WordPress默认主题（如Twenty Twenty-Four），测试表单是否正常显示。如果恢复，逐个重新启用插件/切换主题，定位到导致问题的组件。

内容的提问来源于stack exchange，提问作者unkn0wn.dev