最近よく見かける「メインビジュアルの埋め込みフォーム」を実装する方法

埋め込みフォームとは、独立したフォームのページではなく、トップページやサービス紹介ページ内に直接埋め込まれているフォームのことです。
当社サービスサイト（https://wacul-ai.com/）でも採用しており、BtoBサイトでは特にWebサイトのフォーム入力率・通過数を増やす有効な施策です。

埋め込みフォームは、ファーストビュー（ページを開いて未スクロール時点で表示されている画面）で完結する導線設計を実行する際に、お問合せなどを獲得する率（コンバージョンレート）を高める効果を発揮します。

当社調べですが、AIアナリストに接続されている約4万以上のサイトからサンプリングして検証した結果、コンバージョンレートを約1.64倍も高める効果があり、埋め込みフォームはその一助を担っています。

本稿は、Account Engagement（旧Pardot）ツールを用いた場合の実装方法の紹介です。その他のツールで実装する方法も随時公開予定です。
（とはいえ、お客様への実装作業が優先ですので悪しからず・・・）

1.実装の手順

①ログイン

指定されたURLからログイン。
アカウント作成時のメールに記載されています。

②フォームエディタを開く

「左メニュー > マーケティング > フォーム」から各フォーム種別一覧へと推移します。

次に「フォームを追加」を押し、用意されたフォーム作成用エディタを開きます。

③フォームの作成

フォーム作成の流れに沿って作成します。

参考：Salesforce ヘルプ > ドキュメント > Account Engagement による顧客へのマーケティング > フォームの作成

1.フォームを一意の名称で作成・登録

2.フォームの項目を編集
CVR最大化・フォーム通過率最大化のためには、必須項目を厳選したうえで最少の項目数で作成しましょう。

もちろん、各社のマーケティング目標や必要としているリードの属性によっては、意図的にハードルを上げることも一案です。

しかし、一定の敷居を設けながらコンバージョン数を最大化する観点では、フォーム以外の紙面を使って「想定利用顧客」を限定する表現を行ってフォームでは最大限に入力負荷や「営業される感」を減らすことが重要です。

3.フォームのデザイン作成

エディターを使ってフォーム上部・下部のテキストやスタイル（Webサイト上での表現方法）を編集します。

4.フォーム入力完了時の挙動を設定

フォーム入力が完了した（送信ボタンをユーザーが押した）場合のWebサイト上での挙動を設定します。以下のような選択肢があります。

• 完了ページ（サンクスページ）を表示する

• フォームを表示したまま、送信完了したことの合図を表示する

フォーム入力完了時、サンクスページ上で別のフォーム（コンバージョン）へ誘導することで、ユーザーの「検討度合い」を推察するという手法もあります。

フォームの入力項目を最少化することに懸念がある場合は、この方法も用いることで社内説得を図る手もあるかと思います。

参考：「CV後のCV」で分かる、本当に熱いユーザーの見つけ方

5.編集内容を確認して完了

④フォームの埋め込み

作成したフォームのHTMLコードを取得して、iframeを用いてWebサイトに埋め込みます。

iframeを用いて埋め込むコードを発行し、Webサイトの所定の箇所に設置します。

2.フォームのレイアウトデザイン

埋め込みフォームをWebサイト上で表示する際の装飾やレイアウトを任意に編集する場合は、レイアウトテンプレートを作成する必要があります。

①レイアウトテンプレートの編集

css, javascriptのコードを、外部ファイル埋め込みではなく直記記述します。
外部ファイルの読み込みは、ブラウザの仕様やAccount Engagementの機能変更などに耐えられない可能性があるためです。

②HTMLコードの編集

フォームレイアウトテンプレートを反映するため、HTMLコードを編集します。

参考：Salesforce ヘルプ > ドキュメント > Account Engagement による顧客へのマーケティング > フォームのカスタマイズ

まとめ

フォームの埋め込みは、フォームを制作する方法によって異なります。今回は、Account Engagementを用いた方法を紹介しましたが、各ツールごとに「フォーム自体の生成方法」「Webサイト上へ反映するための方法」が異なります。

前者は、各ツールのヘルプやサポートデスクへの問合せなどを通じて作業を進めることができる可能性が高いです。一方で、後者は、フォームの作り方と整合するコードを作成してトライ＆エラーを通じて編み出す必要がある部分が多分にあります。

今後、他のケースも随時整理する予定ですので、是非確認してみてください。何かあれば、先んじてお問合せください。

| 執筆者プロフィール |

| AKIYAMA｜エンジニア |
| WACULの初期メンバー。AIアナリストのエンジニアを経て、現在はAIアナリストクリエイティブ（制作・構築サービス）グループで、フロント・バックエンド幅広くエンジニアとして担当。SEO対策のタグ・マークアップ、表示スピード改善などコーディングの妙技に詳しい博士的存在。社内MTGではよくちゃんちゃんこを着ている |
| お問い合わせ：info@wacul.co.jp |