iframe埋め込みする方法
■目次
iframe埋め込みとはiframe埋め込みにてフォームを外部サイトに設置する方法①フォームの埋め込み先URLを指定②埋め込み方法の選択注意事項よくある質問フォームを設置してもエラーが出る/フォームが表示されないのですが、どうすればいいですか？iframeで設置したフォームにて、送信ボタンをクリックしても「送信中」となり、回答が送信されない。「フォーム設置URL」を複数指定したいのですが、指定できるURLの数に上限はありますか？iframe埋め込みが完了しているフォームを編集した場合、埋め込み先のフォームは自動で更新されますか？iframe埋め込みをしましたが、プレビュー画面が表示されません。Ameba Owned のページにフォームを埋め込んでもフォームが表示されないです。iframeで設置したフォームの幅や高さを変更したいです。
iframe埋め込みとは
フォーム編集画面で作成したフォームは、iframeを用いてスクリプトをコピー＆ペーストすることで、外部ページに埋め込むことができます。
iframe埋め込みにてフォームを外部サイトに設置する方法
- フォーム編集画面でフォームを作成する
- 該当フォームの設定画面「フォームの設置>フォームの埋め込み（iframe）」をクリックする。
①フォームの埋め込み先URLを指定
・フォーム設置URL
フォームを設置するサイトのドメインまたはURLを入力する。
※開発環境やステージング環境など、フォームが動作する可能性がある全てのドメインもしくはURLを記入する。
②埋め込み方法の選択
埋め込みを行うページに合わせて選択し、コピーしてご利用ください。
・スクリプトの設置
・フォームURLの記入
iframe埋め込みを用いて以下のCMSツールにて作成したホームページにフォームを埋め込む方法の詳細は、以下の記事をご確認ください。
注意事項
- Ameba Ownedで作成されたホームページにフォームを埋め込むとSafariの環境ではフォームが正常に表示されないことがあります。
フォームが表示されない時の対処法として、別途お問い合わせできるようにフォームURLを記載しておくことを推奨しています。
- 必須項目が未入力の場合、フォームの長さが変動します。
フォームの埋め込み後はテスト入力・送信を行い、正常に設置され動作しているかをお確かめいただくことを推奨します。
例）必須項目が未入力時に、送信ボタンが一部見えなくなっている
よくある質問
フォームを設置してもエラーが出る/フォームが表示されないのですが、どうすればいいですか？
正常にフォームを送信するためには、サイトに接続する際の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の仕様に起因するものでございます。
iframeで設置したフォームの幅や高さを変更したいです。
以下の例のように、スクリプトの<div>タグの中に （800の部分には任意の数値を入れる）を追加すると、フォームの幅や高さが変化します。
こちらの方法で幅や高さが変わらない場合はサイト内の別のスタイル指定などが影響している可能性がございます。そのためお手元のソースコードをご確認ください。
また のように 「!important」 を追加することで変更が反映される場合がありますが、サイト内の他の箇所に影響が及ぶ可能性があるため、ご確認の上ご使用ください。