LeadGrid以外のサイト（外部サイト）にフォームを設置する方法を説明します。
設置方法には埋め込みスクリプトによる設置とハードコード実装の2種類があり、用途や要件に応じて使い分けることができます。
LeadGridで構築したサイトにフォームを設置する場合は、CMSのフォームブロックから配置するだけで完了するため、本ページ記載の作業は不要です。
設置方法 | 内容 | 向いているケース |
|---|---|---|
埋め込みスクリプト | LeadGridが発行するスクリプトを外部サイトに貼り付けて表示する方式 | 手軽に設置したい・コーディングを避けたい |
ハードコード実装 | 外部サイト側でフォームHTMLを独自に構築し、LeadGridにデータを送信する方式 | デザイン・スタイルを完全に独自実装したい |
埋め込みスクリプトの制限事項
埋め込みスクリプトはiframeで表示されます。そのため、色やシェイプなどのスタイルカスタマイズはできません。デザインを自由に調整したい場合はハードコード実装をご検討ください。
埋め込みスクリプトを使った設置は、reCAPTCHA設定と埋め込み先URL登録の2つの準備が必要です。
reCAPTCHAの設定
埋め込み先URLの登録
埋め込みスクリプトをサイトに設置
LeadGridでは、スパムやBOTからの不正送信を防ぐためにreCAPTCHAを導入しています。外部サイトにフォームを埋め込む場合は、ユーザーご自身でreCAPTCHAの設定が必要です。
reCAPTCHAについて
reCAPTCHAはGoogle LLCが提供するBOT対策サービスです。利用にあたってはGoogle LLCの利用規約およびプライバシーポリシーへの同意が必要です。
reCAPTCHA管理ページにアクセスし、新しいサイトを登録します。
reCAPTCHA管理画面で、以下の項目を入力します。
項目 | 内容 |
|---|---|
ラベル | 管理用のサイト名 |
reCAPTCHAタイプ | フォームの仕様に合わせて選択 |
ドメイン | フォームを設置するサイトのドメイン |
入力後、「送信」をクリックします。
設定完了後、サイトキーとシークレットキーが発行されます。両方をコピーしてください。
LeadGridのフォーム一覧画面で、対象フォームの「埋め込みスクリプト」列にある「設定する」をクリックします。表示されたモーダル内の「サイトキー」と「シークレットキー」にペーストします。
フォームを設置する外部サイトのURLを登録します。
同じモーダル内の「埋め込み先URL」欄に、フォームを設置するサイトのURLを入力します
複数のページに設置する場合は、URLを複数登録できます
登録されていないURLにスクリプトを設置しても、フォームは正常に動作しません。設置先のURLは必ず登録してください。
モーダル右下の「コピーする」から、フォーム埋め込み用のスクリプトをコピーします
外部サイトのHTMLで、フォームを表示させたい場所にスクリプトを貼り付けます
LeadGrid側で「保存」をクリックして完了です
reCAPTCHAキーや埋め込み先URLの登録が完了した時点で、「保存」を押しても問題ありません。
ハードコード実装では、外部サイト側でフォームHTMLを独自に構築し、フォーム送信時にLeadGridへデータを送信します。デザイン・バリデーション・送信フローを自由に設計できます。
ハードコード実装はエンジニアによる開発が必要です
HTML・JavaScriptの知識と、サイト側の実装環境が必要になります。デザイン要件が厳しい場合や、独自の入力フローを実装したい場合にご検討ください。
フォームHTMLを構築
送信処理（API連携）を実装
reCAPTCHAをクライアント側に組み込み
動作確認
ハードコード実装には、LeadGridから提供される以下の情報が必要です。
項目 | 内容 |
|---|---|
送信先APIエンドポイント | フォームデータの送信先URL |
フォームID | 対象フォームの識別ID |
プロパティとフォーム項目の対応情報 | 送信するJSONのキーとプロパティの紐付け |
実装方法の詳細はサポートまでお問い合わせください
ハードコード実装は個別対応となるため、要件に応じてサポートチームから具体的な実装手順・サンプルコードをご案内します。
項目 | 内容 |
|---|---|
reCAPTCHA | スパム対策のため、必ずクライアント側でreCAPTCHAの認証を組み込んでください |
バリデーション | 必須項目・メールアドレス形式などのバリデーションは独自実装が必要です |
プロパティ紐付け | フォーム送信データのキー名は、LeadGrid側のプロパティと一致させる必要があります |
サンクスメール | API連携経由で送信した場合も、フォームのメール設定に基づいてサンクスメールが自動送信されます |
Q. 埋め込みスクリプトでフォームのデザインを変更したい A. 埋め込みスクリプトはiframeで表示されるため、外部サイト側からの色やシェイプなどのスタイル変更はできません。デザインのカスタマイズが必要な場合は、ハードコード実装をご検討ください。
Q. スクリプトを設置したのにフォームが表示されない A. 以下をご確認ください。 ・reCAPTCHAのサイトキー・シークレットキーが正しく入力されているか ・フォームを設置するサイトのURLが「埋め込み先URL」に登録されているか ・スクリプトがHTMLに正しく貼り付けられているか ・フォームが公開状態になっているか
Q. ハードコード実装のサンプルコードが欲しい A. ハードコード実装は個別対応となります。サポートまでお問い合わせいただければ、要件に応じてサンプルコードや実装手順をご案内します。