WordPress(Elementor)环境下按访客语言集成Hubspot多语种表单咨询

可行实现方案（零基础可操作，无需修改主题源码） #

前置准备 #

• 从Hubspot后台分别导出2份表单嵌入代码：适配IE<=8的英文表单代码、法文表单代码，完整复制后单独保存备用
• 确认你用的WordPress多语言插件（如Polylang/WPML）会自动给站点页面的body标签添加语言标识类，比如lang-en（英文站）、lang-fr（法文站），可右键页面点击「查看网页源代码」搜索<body确认类名

操作步骤 #

1. 打开Elementor编辑器，在需要放置联系表单的位置拖拽添加「自定义HTML」组件
2. 将以下代码完整粘贴到自定义HTML的输入框中，按注释提示替换为你自己的Hubspot表单代码即可：

<script>
// 识别当前页面语言，可根据你实际的body语言类修改下方类名
const currentLang = document.body.classList.contains('lang-en') ? 'en' : 
                   document.body.classList.contains('lang-fr') ? 'fr' : 'en';

// 识别是否为IE8及以下版本浏览器
function checkIsLTEIE8() {
  const ua = window.navigator.userAgent;
  const ieMarkPos = ua.indexOf('MSIE ');
  if (ieMarkPos > 0) {
    return parseInt(ua.substring(ieMarkPos + 5, ua.indexOf('.', ieMarkPos)), 10) <= 8;
  }
  return false;
}

// 按条件加载对应表单
if (currentLang === 'en' && checkIsLTEIE8()) {
  // 替换引号内内容为你的IE兼容版英文Hubspot表单代码
  document.write(`替换为你的英文IE兼容版表单完整嵌入代码`);
} else if (currentLang === 'fr') {
  // 替换引号内内容为你的法文Hubspot表单代码
  document.write(`替换为你的法文表单完整嵌入代码`);
} else {
  // 其他场景默认加载普通版英文表单，不需要可删除此段
  document.write(`替换为你的普通版英文表单完整嵌入代码`);
}
</script>

3. 保存页面后清空缓存测试即可

全局适配方案 #

如果需要全站所有联系表单都按此规则加载，无需每个页面单独添加代码：

• 打开Elementor后台的「站点设置」-「自定义代码」
• 新建自定义代码，将上述代码粘贴进去，加载位置选择<body>结束标签前，生效范围选全局即可

验证方法 #

• 英文站测试：用浏览器开发者工具的IE8模拟模式访问英文站，确认加载的是对应英文表单
• 法文站测试：切换站点语言到法文，确认加载的是法文表单
• 若识别语言错误，修改代码中判断的body语言类为你站点实际使用的类名即可

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