CMS記事ごとに異なる外部フォームを設置する方法

この記事では、CMSプロパティを活用して、CMS記事（アイテム）ごとに異なる外部フォームを設置する方法を解説します。

具体的にはCMSアイテムにテキストプロパティを追加し、フォーム固有のIDを設定します。そしてそのプロパティを動的ページの埋め込みコード側で参照することで、アイテムごとにフォームを表示できます。また、表示条件を用いればIDの設定がないアイテムではフォームを非表示にすることも可能です。

本記事ではHubSpotフォームを使用例としてご紹介します。

※CMSプロパティをコード内で使用すると、iframeタイプからsandboxタイプに変化します。この変化により、HubSpotで設定・利用できる機能が動作しなくなる場合があります。

設定手順

CMSアイテムへのテキストプロパティ追加
記事モデルのCMSアイテムにテキストプロパティを追加します。
テキストプロパティへフォームIDを追加
フォームサービスから取得した埋め込みコード内のIDをコピーし、プロパティに追加します。例えば、以下のコードではformIdをプロパティに追加します。
```
<script charset="utf-8" type="text/javascript" src="[//js.hsforms.net/forms/embed/v2.js](<https://js.hsforms.net/forms/embed/v2.js>)"></script> <script> hbspt.forms.create({ region: "na1", portalId: "23384602", formId: "this-is-a-sample-id" }); </script>
```
動的ページへのEmbedボックス配置
エディタへ移動し、動的ページにEmbedボックスを配置します。
埋め込みコードの入力
フォームサービスから取得した埋め込みコードをEmbedボックスの埋め込みコード欄に入力します。
コード内IDを削除とCMSプロパティの追加
追加したコードのformId を削除し、CMSプロパティの「フォームID」を追加します。これにより、ページごとにIDが自動的に切り替わり、表示されるフォームが変化します。
Embedボックスへの表示条件設定
※IDの設定がないボックスを非表示にする必要がない場合はこの手順はスキップしてください
CMSプロパティにIDが設定されていない場合、Embedボックスを非表示にするための表示条件を設定します。
Embedボックスを選択した状態で、右パネルを開き、表示条件で「フォームID」「 is set」を設定します。
表示のチェック
サイトのライブプレビューで表示と動作を確認し、問題なければ公開・更新します。