メインコンテンツまでスキップ

外部サイトでの利用 (iframe / JavaScript 埋め込み)

Form Plant のフォームは、WordPress サイト内だけでなく iframe や JavaScript スニペットを使って外部サイトにも埋め込めます。LP (ランディングページ) や別ドメインのサイトに、フォームの設定を一元管理したまま配信したい場合に便利です。

どちらを使うか​

方式特徴おすすめ用途
iframe最も簡単。完全に独立したフォーム表示静的 HTML サイト、簡単に貼りたい
JavaScript親サイトのデザインに馴染ませやすいLP / Web アプリにシームレスに統合したい

1. 埋め込み許可の設定​

外部サイトでの利用は デフォルトで無効 になっています。利用するフォームごとに明示的に有効化が必要です。

  1. WordPress 管理画面の 「Form Plant」→ 対象のフォーム を開きます
  2. 「フォーム設定」→「サイト外での利用」 タブを開きます
  3. 「iframe での利用を許可する」 または 「JavaScript 埋め込みでの利用を許可する」 にチェックします
  4. 「許可するサイト URL」 に埋め込みを許可するドメインを入力します (改行区切りで複数可)
  5. 保存します

セキュリティのため、許可されていないドメインからの埋め込みはブロックされます。

2. iframe で埋め込む​

埋め込み先の HTML に以下のタグを貼り付けます ({form_id} は実際のフォーム ID、{your-site} は WordPress サイトのドメイン)。

<iframe
  src="https://{your-site}/wpfplant-embed/{form_id}/"
  width="100%"
  height="800"
  frameborder="0"
  style="border: none;"
></iframe>

iframe URL の形式​

https://{your-site}/wpfplant-embed/{form_id}/
  • {form_id} は WordPress 管理画面のフォーム一覧で確認できる ID
  • 末尾のスラッシュを忘れないでください

iframe の高さ調整​

フォームの内容によって必要な高さが変わります。送信フローで内容も変わるため、height を十分大きく取るか、JavaScript でリサイズイベントを受け取るかを検討してください。

3. JavaScript で埋め込む​

埋め込み先の HTML に以下を貼り付けます。

<div id="fplant-form-container"></div>
<script
  src="https://{your-site}/wp-content/plugins/form-plant/public/embed.js"
  data-form-id="{form_id}"
  data-target="#fplant-form-container"
></script>

JavaScript 埋め込みは親ページの CSS の影響を受けやすいので、必要に応じてフォーム側のカスタム CSS で打ち消してください。

動作確認方法​

ローカルでテストする場合は、リポジトリ内の external-site/ ディレクトリ (Docker Compose の external-site サービス) を活用できます。

外部サイトテスト前に WordPress 側で http://localhost:8083 を許可サイトに登録してください。

トラブルシューティング​

症状原因 / 対処
iframe が真っ白「サイト外での利用」が無効 / 許可サイト URL に登録されていない
JavaScript 埋め込みが反映されないスクリプトの data-form-id の値、data-target で指定した要素の存在を確認
CORS エラー許可サイト URL を正確に登録 (http:// / https:// の差にも注意)
デザインが崩れる親ページの CSS が干渉している。フォーム側カスタム CSS で !important 等で打ち消す