作成したフォームをGENIEE MA上のランディングページや既存のホームページに埋め込む方法と、フォームの送信結果を確認する方法をご紹介します。
埋め込み方法は「GENIEE MAのランディングページに埋め込む」「既存ホームページに埋め込む」の2種類があります。
■GENIEE MAのランディングページに埋め込む
1.ランディングページ画面に移動する
左メニューの[コンポーネント]>[ランディングページ]をクリックします。
ランディングページの一覧画面に遷移したのち、右上の[新規]で作成/もしくは既存のものに設置したい場合は該当フォーム横の[∨]>[編集]をクリックてください。
※新規のランディングページの設定に関してはこちらから
2.[ビルダー]をクリックし、編集ページへ移動する
右上にある[ビルダー]をクリックし、ランディングページの編集ページに遷移します。
3.フォームを設置する
フォームを設置したい箇所に「テキスト」の要素を挿入し、入力ボックスを開きます。(すでに設置しているテキストの前後に挿入したい場合はダブルクリックします。)
画像の箇所のインサートトークンボタンをクリックすると、インサート可能な対象が一覧に表示されますので、対象フォームの名前をクリックします。
クリックしたのち、{form=XX}というタグが挿入されていると、対象の位置にフォームが表示されます。
4.コードで編集したい場合
フォーム一覧で埋め込みたい対象フォームのIDを確認し、
その後、埋め込みたい箇所に{form=XX} ※XX箇所にIDを入力 を挿入してください。
5.保存する
設定を終えたら、ビルダーを閉じ、上部の[適用]もしくは[保存して閉じる]をクリックします。
※[適用]…保存後、同画面に滞留 / [保存して閉じる]…保存後、詳細画面に遷移します
再度、一覧画面からタイトルをクリックし詳細画面に遷移し(保存して閉じるの場合は遷移先)
ページURLからフォームが反映された状態の確認が可能です。
■既存ホームページに埋め込む
1.フォーム一覧画面に移動する
左メニューの[コンポーネント]>[フォーム]をクリックします。
フォームの一覧画面に遷移したのち、埋め込みたい対象のフォームの「名前」をクリックします。
※フォームを新規作成したい場合はこちらから
2.コードを取得する
右上のフォームHTMLから、既存ホームページに埋め込むためのフォームのソース取得が可能です。
設定方法は2種類ございます。
- ①自動
- ホームページの該当ページに[ショートコード]又は[カスタムHTML]として埋め込みます。
自動の場合はフォームの設定を修正しても埋め込むソースの修正は必要ありませんが、毎度サーバー読み込みが発生するので、画面表示が手動コピーとして比較して遅くなります。 - JavaScript経由とiFrame経由がございますが、iframeに関してはレスポンシブ対応がされていないため、JavaScript経由を推奨しております。
- ホームページの該当ページに[ショートコード]又は[カスタムHTML]として埋め込みます。
- ➁手動コピー
- ホームページの該当ページに[カスタムHTML]として埋め込みます。
フォームの修正毎にソース修正が必要となります。ただし、自動と比較して読み込みが早くなります。
- ホームページの該当ページに[カスタムHTML]として埋め込みます。
3.コピーしたソースをホームページに埋め込む
コピーしたソースを各ホームページに埋め込むことで、表示がなされます。
※各ホームページ側の埋め込み方は弊社側のサポート範囲外となりますので、自社のホームページ担当者もしくは制作会社などにお問い合わせをお願い申し上げます
■結果を確認する
フォームの送信結果の内容を確認する方法をご紹介します。
1.フォーム一覧画面に移動する
左メニューの[コンポーネント]>[フォーム]をクリックします。
フォームの一覧画面に遷移したのち、埋め込みたい対象のフォームの「結果」をクリックします。
2.結果を確認する
コンタクト情報と共に、フォームで指定したフィールドの記入内容が確認ができます。
また、CSV/Excel/HTMLでのエクスポート・表示も可能です。
※コンタクトの標準フィールド/カスタムフィールドの全情報をダウンロードしたい場合はセグメントをご利用ください
3.注意事項
- 名寄せ条件に合致した内容で二度入力があった際もフォームの結果では2回の送信記録が残ります
- 最新の送信結果がコンタクト情報に上書きされます
- フォームの内容において空白で送信された場合のコンタクト情報は空白で上書きにならず、入力された値が維持されます
関連ページ
🔗フォームを作る