如何向FormCraft嵌入式表单的隐藏字段写入变量值

问题根源 #

你原始代码失效的核心原因有3个：

• 选择器匹配错误：document.querySelector("[data-field='field23']")选中的是外层的<div>容器元素，而非实际存储值的隐藏<input>，给div设置value属性不会生效
• 框架逻辑未触发：FormCraft对表单字段绑定了内置的trigger-logic逻辑监听，直接修改input的value不会被框架识别，提交时会被框架重置为初始空值
• 加载时序问题：如果脚本执行早于表单渲染完成，会找不到目标元素，赋值操作直接失效

可行解决方案 #

根据你嵌入表单的方式选择对应代码即可：

情况1：表单直接渲染在当前页面

<script>
// 等待页面所有资源加载完成后执行，确保表单已渲染
window.addEventListener('load', function() {
  // 精准选中field23对应的隐藏input字段
  const utmCampaignField = document.querySelector("div[data-field='field23'] input[type='hidden'][name='field23']");
  if (utmCampaignField) {
    // 替换为你实际的cookie变量取值
    utmCampaignField.value = {{cookie-utm_campaign}};
    // 触发change和input事件，通知FormCraft字段值已更新
    utmCampaignField.dispatchEvent(new Event('change', { bubbles: true }));
    utmCampaignField.dispatchEvent(new Event('input', { bubbles: true }));
  }
});
</script>

情况2：表单通过iframe嵌入当前页面

如果你的FormCraft是用iframe标签嵌入的，需要先获取iframe的内部文档再操作：

<script>
// 替换为你页面上FormCraft iframe的实际选择器
const formIframe = document.querySelector('iframe[src*="formcrafts.com"]');
formIframe.addEventListener('load', function() {
  const iframeDoc = formIframe.contentDocument || formIframe.contentWindow.document;
  const utmCampaignField = iframeDoc.querySelector("div[data-field='field23'] input[type='hidden'][name='field23']");
  if (utmCampaignField) {
    utmCampaignField.value = {{cookie-utm_campaign}};
    utmCampaignField.dispatchEvent(new Event('change', { bubbles: true }));
    utmCampaignField.dispatchEvent(new Event('input', { bubbles: true }));
  }
});
</script>

验证方法 #

修改后可以打开浏览器控制台，执行document.querySelector("div[data-field='field23'] input[type='hidden']").value查看值是否正确写入，确认后再提交表单测试即可。

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