排查外部嵌入的 HubSpot 表单问题

如果您嵌入到外部页面上的 HubSpot 表单无法正常工作或显示不正确，请了解最常见的表单嵌入问题以及相应的故障排除方法。

在按照以下步骤操作之前，请先在表单的独立页面上进行测试，以确认问题是出在表单本身还是嵌入设置上。

确认 HubSpot 跟踪代码

要在外部网站上使用 HubSpot 表单，您必须在放置表单的外部页面上安装HubSpot 跟踪代码。

若要确认 HubSpot 跟踪代码已安装且在页面上正常触发，请了解如何排查 HubSpot 跟踪代码的问题。

确认表单嵌入代码

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“编辑”。
3. 如果您使用的是更新后的表单编辑器：
   • 在右上角，点击“查看并更新”。
   • 在右侧面板底部，点击“更新”。

1. • 在对话框中，点击“获取嵌入代码”。
   • 点击“复制”。

4. 如果您使用的是旧版表单编辑器：
   • 在表单编辑器的右上角，点击“嵌入”。
   • 在对话框中，点击“复制”。
     

5. 在浏览器中，访问文本比较工具Diff Checker。
6. 在“原始文本”部分 ，粘贴表单嵌入代码。
7. 访问嵌入该表单的网站页面。然后，在页面任意位置右键单击，并选择“查看页面源代码”。
8. 在页面源代码中找到表单嵌入代码并复制。
9. 返回 Diff Checker。
10. 在“已更改文本 ”部分，粘贴外部嵌入的代码。
11. 点击“查找差异 ”以检查是否存在缺失或损坏的代码。如果嵌入代码完全一致， 将显示“两个文件完全相同” 的提示 。否则，任何差异都会以红色和绿色高亮显示。

如果外部嵌入的代码与 HubSpot 代码不匹配，请在 您的外部页面上重新嵌入正确的代码 。

如果外部嵌入的代码与 HubSpot 代码匹配，则可能是外部页面中的 HTML 或 JavaScript 内容干扰了表单的嵌入代码。您应与开发人员合作进行进一步排查。建议检查以下内容：

• JavaScript 错误或脚本冲突。

• CSS 或样式问题。

• SSL、CSP 或混合内容问题。

• 页面上表单 ID 重复。

• 提交前未填充隐藏字段。

• 网站构建工具动态渲染或重新渲染表单容器。

添加网站域名

请在 HubSpot 中将表单嵌入的外部页面的域名添加为额外的网站域名。来自未添加页面的表单提交将被标记为垃圾信息。

特定主机嵌入问题

如果您使用的是 WordPress、Squarespace 或 Wix，可以继续针对以下各网站托管平台中的相应问题进行故障排除。

WordPress

如果您的表单嵌入在 WordPress 页面中，您可能会遇到以下问题：

• WordPress 可能会将嵌入表单代码中的 '&' 转换为 '&'，这会导致代码功能失效。
• 采用 XHTML 格式的 WordPress 主题会在 JavaScript 代码周围添加 <![CDATA[ ]]> 标签，这虽然不会影响表单的渲染，但在检查表单嵌入代码时仍需注意。

如果 WordPress 修改了嵌入代码，建议使用第三方插件（例如Insert HTML Snippet），将表单作为短代码添加到页面或文章中，以保留脚本标签。

Squarespace

某些 Squarespace 模板仅在页面初次加载时渲染脚本，而在其他页面则不会。这可能会导致 HubSpot 表单在某些页面上无法正常工作，因为当访客浏览您的网站时，表单脚本不会被加载。

为避免出现这种情况，请尝试在 Squarespace 中禁用 Ajax 加载。如果此方法无效，您也可以尝试使用其他 Squarespace 模板。

特定于浏览器的故障

如果您安装了 Ghostery 等会阻塞资源的浏览器扩展程序，您的 HubSpot 表单可能会被阻止加载和显示。了解有关 HubSpot 表单被阻止时会发生什么的更多信息。