代表的なMAツールのひとつである Pardot（現Account Engagement）のフォーム機能は、簡単にWebフォームを作成でき、様々なサイトから顧客情報を収集することが可能です。しかし、フォームの埋め込み方がわからない、埋め込んだのに正常にデータが取得されないなど、上手く活用できていないという方もいらっしゃるでしょう。

本記事では、Pardot で作成したフォームの埋め込み方や注意点、外部で作成したフォームを Pardot に連携する方法を解説します。フォームでの情報収集を強化したい方は、ぜひ本記事を参考にしてください。

Pardot（現Account Engagement）のフォームはiframeによる埋め込みが可能

Pardot のフォーム機能を利用すれば、アンケートや問い合わせフォームなど様々な用途に活用できるWebフォームを作成できます。作成したWebフォームは、もちろん Pardot で作成したLP（ランディングページ）に埋め込むことができますが、コーポレートサイトなど通常のWebページにも埋め込むことができます。埋め込み方法も非常に簡単で、Pardot 上で埋め込みたいフォームのiframeを取得し、埋め込み先のWebページのソースコード内にiframeを記述するだけです。

iframeとは、インラインフレームやアイフレームと呼ばれ、Webページ内に外部のコンテンツを埋め込んで表示することができるHTMLのタグです。Pardot では、埋め込むだけでWebページ上に表示できるiframeのタグが自動で生成されるため、ソースコード内に丸ごとコピー＆ペーストするだけで埋め込みができます。

同じセミナーの参加者募集のために、毎回フォームを作成していたのでは、すぐにフォームの上限数に達してしまいますし、管理やメンテナンスも困難になります。iframeを活用すれば、誰でも簡単に様々なWebページ上に同じフォームを設置でき、情報収集を行いやすくなるでしょう。

Pardot（現Account Engagement）のフォームの埋め込み手順

では、実際に Pardot で作成したフォームを外部のサイトに埋め込む方法を紹介します。

1. Pardot の画面を開き、マーケティングメニューからフォームを選択します。
   （Lightning Experience を利用している場合は[コンテンツ]-[フォーム]の順に選択）
2. 埋め込みたいフォームを選択します。
3. 画面内の、[フォームを編集][オンラインで表示][レポートを表示]の隣にある矢印マークをクリックし、[HTMLコードを表示]を選択します。
4. iframeのコードが生成されるため、コードをコピーして埋め込みたいWebページのソースコード内にiframeコードをペーストします。

iframeのコードは、ソースコード内のbodyタグ内にペーストしましょう。また、iframeタグ内のコードを変更する、もしくはCSSを活用することで、フォームを表示する位置やサイズをカスタマイズできます。HTMLやCSSに精通した方であれば、デフォルトの埋め込み機能だけでなく様々な要素を追加できます。ただし、専門的な知識が求められるため、求める機能が実現できるかどうかは、Pardot の導入実績が豊富な企業に相談してみるのがおすすめです。

Account Engagementの
お役立ち資料はこちら

運用が滞っている方へお勧めの
お役立ち資料

・運用を成功に導く4つのポイント
・メール以外の運用を加速させる4つの活用ヒント
・テクバンの支援実績から学ぶ活用事例

1分でダウンロード

Pardot（現Account Engagement）に外部フォームを連携させる方法

Pardot で作成したフォームを他のWebページに埋め込む方法を紹介しましたが、Pardot 以外で作成した既存のフォームがあり、そのフォームで取得した情報を Pardot に連携させたいという方もいらっしゃるでしょう。Pardot と外部フォームを連携させるには、フォームハンドラーという機能を利用します。フォームハンドラーで外部フォームを連携させる手順は以下です。

1. Pardot の画面を開き、マーケティングメニューからフォーム、フォームハンドラーの順に選択します。
   （Lightning Experienceを利用している場合は[コンテンツ]-[フォームハンドラー]の順に選択します。）
2. [+フォームハンドラーを追加] をクリックします。
3. フォームハンドラーに任意の名前、フォルダー、タグ、キャンペーンを設定します。
4. フォームで取得したデータを Pardot 以外の自社サーバなどへ転送する場合は、[成功した場所へのデータ転送を有効化]にチェックを入れます。
5. [成功した場所]に特定のURLもしくは参照元URLを設定します。
   特定のURLは Pardot 以外にデータを転送する場合の転送先、参照元URLはフォーム送信完了後に顧客をリダイレクトする場合のリダイレクト先になります。
6. [エラー発生場所]に特定のURLもしくは参照元URLを設定します。
   特定のURLは Pardot 以外にデータを転送する場合の転送先、参照元URLはフォーム送信エラー発生時に顧客をリダイレクトする場合のリダイレクト先になります。
7. フォーム送信完了時のアクションを設定します。
   送信した顧客を任意のリストに追加、自動応答メッセージの送信など様々なアクションを設定できます。
8. フォーム項目を設定し、外部フォームの項目と一致（マッピング）させます。
9. [フォームハンドラーを作成]をクリックします。
10. 作成したフォームハンドラーに移動し、[フォームハンドラーコードを表示]をクリックします。
11. 表示されたコードをコピーし、外部フォームを埋め込んでいるコード内の投稿URLをコピーしたコードに変更します。

以上の11ステップで設定が完了します。手順が多いように感じられるかもしれませんが、実際に設定する際はそれほど時間がかかりません。既存でフォームを作成している、外部で新しくフォームを作成したいという場合には、フォームハンドラーの機能を試してみましょう。

Pardot のフォームハンドラーについては、こちらの記事でも詳しく解説しています。
▼Pardotのフォームハンドラーとは？ 仕組み・新規フォーム作成との違い

Pardot（現Account Engagement）のフォームをiframeで埋め込む際の注意点

Pardot のフォームはiframeを利用して簡単に外部のWebページに埋め込むことができますが、注意点もあります。それは、Pardot のフォームをiframeで埋め込んでも、親ページのURLパラメータが自動では引き渡されない点です。URLパラメータの引き渡しができないことで、Google Analytics のレポートにデータの差異が発生する場合があります。結果として、Google Analytics で正常なデータが取得できなくなってしまいます。

この問題はJavascriptを利用して解決できますが、Salesforce のヘルプページにベースとなるソースコードが掲載されているものの、それ以上のトラブルシューティングはサポートの範囲外です。Javascriptの利用はカスタム扱いになり、自己責任で実施する必要がある点には注意しましょう。

Javascriptは適切に利用できれば良いですが、利用の仕方を誤ればフォームのデザインが崩れたり、動作不良を起こしたりと様々な問題が発生する可能性があります。自社内でJavaScriptを扱える人材がいない場合には、Pardot のカスタマイズに対応した専門企業に相談すると良いでしょう。

埋め込みを利用してフォームを有効活用

Pardot で作成したフォームはiframeを利用して簡単に外部のWebページに埋め込めます。また、フォームハンドラー機能を利用すれば、外部で作成したフォームを Pardot と連携させることも可能です。ただし、フォームの埋め込みや連携について、HTMLやCSS、Javascriptなどのコードを正しく理解していなければ、正常にデータを取得できない可能性があります。

フォームの埋め込みや連携で困りごとがあれば、Pardot の認定資格を取得した専門企業の支援サービスを活用すると良いでしょう。