NextJS 头部中的 HubSpot 表单脚本

Posted 2023-05-09

技术标签:

【中文标题】NextJS 头部中的 HubSpot 表单脚本【英文标题】：HubSpot form script in NextJS head 【发布时间】：2021-07-22 10:59:34 【问题描述】：

我正在尝试将以下脚本添加到我的 NextJS Head：

<script>
  hbspt.forms.create(
    region: "na1",
    portalId: "XXXXXX",
    formId: "XXXXXX"
);
</script>

然后它给了我两个错误：

错误 1：意外的令牌。您的意思是'' 还是&rbrace;?ts(1381)（用于右括号）

错误 2：语法错误：意外的标记，应为“”（对于“区域：”行“na1”）

这是整个 indes.jsx 文件：

import Head from "next/head";
import styled from "styled-components";
import HeroSection from "../components/sections/HeroSection";
import OverviewSection from "../components/sections/OverviewSection";

const Wrapper = styled.div`
  margin-top: 10rem;
`;

export default function HomePage() 
  return (
    <Wrapper>
      <Head>
        <title>Code Shape - Home</title>
        <link rel="icon" href="/favicon.ico" />
        <script
          type="text/javascript"
          id="hs-script-loader"
          async
          defer
          src="//js.hs-scripts.com/8205013.js"
        ></script>
        <script
          charset="utf-8"
          type="text/javascript"
          src="//js.hsforms.net/forms/shell.js"
        ></script>
        <script>
          hbspt.forms.create(
          
            region: "na1",
            portalId: "XXXXXX",
            formId: "XXXXXX",
          
          );
        </script>
      </Head>
      <HeroSection />
    </Wrapper>
  );

生成表单时脚本来自 HubSpot，所以我认为脚本代码是正确的。

【问题讨论】：

【参考方案1】：

代码被转义了，尝试将其包装到 dangerouslySetInnerhtml 属性中：

  <Head>
    <script dangerouslySetInnerHTML= __html: `
       hbspt.forms.create(
           region: "na1",
           portalId: "XXXXXX",
           formId: "XXXXXX"
       );
     ` />
  </Head>

【讨论】：

以上是关于NextJS 头部中的 HubSpot 表单脚本的主要内容，如果未能解决你的问题，请参考以下文章

非 hubspot 表单弹出窗口未创建联系人

Hubspot 表单 ID 是不是需要安全

无法将元素或表单链接到 hubspot

204 错误 - Hubspot 表单错误

css Hubspot：表单CSS选择器和示例HTML标记http://designers.hubspot.com/docs/cos/hubspot-form-markup