1. formrunFAQ
  2. 2.サイトへ埋め込む
  3. 1.iframe埋め込み(サイトへ埋め込む)

iframe埋め込みの方法

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

 iframe埋め込みとは

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

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

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

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

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

フォーム設置URL

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

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

フォーム送信後リダイレクトURL

フォーム回答後に、フォーム回答者様が遷移するページを入力する。

        

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

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

・スクリプトの設置

・フォームURLの記入

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

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

【注意事項】

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

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

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

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

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

 
 

正常にフォームを送信するためには、
サイトに接続する際の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のフォーム編集画面にて再度編集し更新した場合、内容は自動で埋め込み先のフォームに反映されますのでご安心ください。