1.iframe埋め込み（サイトへ埋め込む）
      ホームに戻る
      1. formrunFAQ
      2. サイトへ埋め込む
      3. 1.iframe埋め込み（サイトへ埋め込む）

      iframe埋め込みする方法

      フォームを外部サイトに埋め込む方法を説明します。

       iframe埋め込みとは

      フォーム編集画面で作成したフォームは、iframeを用いてスクリプトをコピー＆ペーストすることで、外部ページに埋め込むことができます。

      iframe埋め込みにてフォームを外部サイトに設置する方法

      1）フォーム編集画面でフォームを作成

      2）該当フォームの設定画面「フォームの設置>フォームの埋め込み（iframe）」をクリックする。

      【①フォームの埋め込み先URLを指定】

      ・フォーム設置URL

      フォームを設置するサイトのURLを入力する。

      ※開発環境やステージング環境など、フォームが動作する可能性がある全てのドメインもしくはURLを記入する。
      　　　　　　　　

      【②埋め込み方法の選択】

      埋め込みを行うページに合わせて選択し、コピーしてご利用ください。

      ・スクリプトの設置

      ・フォームURLの記入

      iframe埋め込みを用いて以下のCMSツールにて作成したホームページにフォームを埋め込む方法の詳細は、下記記事をご確認ください。

      【フォームをシェアしたい方必見！】iframe埋め込みを用いて、ホームページでフォームを共有しよう（STUDIO・Wix・ペライチ・Ameba Ownd・Jimdo・WordPress)

      【注意事項】

      （1）Ameba Ownedで作成されたホームページにフォームを埋め込むとSafariの環境ではフォームが正常に表示されないことがあります。

      フォームが表示されない時の対処法として、別途お問い合わせできるようにフォームURLを記載しておくことを推奨しています。

      （2）ステップレイアウトをご利用している場合、iframe埋め込みはご利用いただけません。

      （3）必須項目が未入力の場合、フォームの長さが変動します。

      フォームの埋め込み後はテスト入力・送信を行い、正常に設置され動作しているかをお確かめいただくことを推奨します。

      　例）必須項目が未入力時に、送信ボタンが一部見えなくなっている

       
       

      正常にフォームを送信するためには、
      サイトに接続する際のURL全てを formrun 側に登録する必要があります。

      そのため、設定画面「フォームの設置＞フォームの埋め込み（iframe）＞フォームの埋め込み先URL」にございます「フォーム設置URL」より
      フォーム埋め込み先のURLが正しく設定されているかご確認ください。

      ・URLにスペルミスなどがないか
      ・「https」や「www」が含まれている URLも追加されているか

      をご確認ください。

      【よくあるご質問】iframeで設置したフォームにて、送信ボタンをクリックしても「送信中」となり、回答が送信されない。

      埋め込み先のページにscriptタグを設定する際、
      iframe内に展開されるため、リダレイレクトが失敗することがあります。

      そのため、設定画面「フォームの設置>iframe埋め込みフォーム>①スクリプト設置」内の
      設定タグに指定している、【data-formrun-redirect=“true”】を削除してください。

      ただし、上記の設定タグは親フレーム(iframeの外)側のスクリプトでリダイレクトを制御する
      という指定のオプションのため、【data-formrun-redirect=“true”】を削除した場合、
      iframe内でサンクスページが表示されます。

      【よくあるご質問】「フォーム設置URL」を複数指定したいのですが、指定できるURLの数に上限はありますか？

      コード型フォーム・クリエイターフォームともに、FREEプラン含むすべてのプランにおいて、
      指定可能な「フォーム設置URL」の数に上限はございません。

      【よくあるご質問】iframe埋め込みが完了しているフォームを編集した場合、埋め込み先のフォームは自動で更新されますか？

      iframe埋め込みが完了したフォームを、formrunのフォーム編集画面にて再度編集し更新した場合、内容は自動で埋め込み先のフォームに反映されますのでご安心ください。

      【よくあるご質問】iframe埋め込みをしましたが、プレビュー画面が表示されません。

      iframe埋め込みを行ったページのプレビュー画面のURLを、設定画面「開発者向け>iframe埋め込みフォーム>フォームの埋め込み先URLを指定」の「フォーム設置URL」に登録を行わないと、プレビュー画面でiframe埋め込みが反映されません。

      また、以下も併せてご確認ください。

      ・URLにスペルミスなどがないか
      ・「https」や「www」が含まれている URLも追加されているか

      【よくあるご質問】Ameba Owned のページにフォームを埋め込んでもフォームが表示されないです。

      Ameba Owndで作成したホームページにフォームを埋め込み、フォームが表示されない場合、以下の可能性があります。

      A）Safariの環境にて表示している

      Safariの環境ではフォームが正常に表示されないことがございます。
      また、こちらはSafariの仕様となっており、formrun側では修正ができない仕様となっております。
      そのため、現状の対応策として、フォームご回答者さまが別途お問い合わせできるように
      該当埋め込み先ページにフォームURLを記載しておくことを推奨しております。


      B）埋め込み方法「フォームのスクリプトを埋め込む方法」にて表示している

      Ameba Owndにスプリクトにてフォームを埋め込みをされると、フォームが表示されないケースがあります。
      本事象はformrunではなく、Ameba Owndの仕様に起因するものでございます。
      「フォームのスクリプトを埋め込む方法」で表示されない場合、
      「フォームのURLを埋め込む方法」にて設定すると、表示が安定する場合がございます。