「iframeでフォームを設置したら確認画面が消えてしまう」問題を解決するには？

フォームメーラーには、「外部設置」機能があるのをご存じですか？
自分で管理しているウェブサイトを持っているのであれば、サイト内に設置したページにHTMLコードを記載することで自サイトにフォームを設置することが可能になる機能です。

外部設置の中でも、管理画面から取得可能なiframeタグを貼り付けるだけでフォームを設置できる機能はさらにお手軽に利用可能ですので、ご好評いただいております。

ですが、このiframeの機能について、よく「確認画面が見えなくなった！」というお問い合わせをいただきます。

確認画面が見えなくなった、とは・・・？

実際に試してみます

下記のようなサイトがあったとします。黄色の部分は埋め込み元のサイトの部品で、下のフォーム部分がiframeで埋め込んだ箇所です。
右側のスクロールバーにご注目。
フォームは縦に長く、スクロースしないと全て見えないようです。

フォームの入力を進めて下まできました。
いざ「確認画面へ」ボタンをクリックすると・・・
あ、確認画面が出てきた！

縦長のフォームを入力するうちに画面を下にスクロールしたのですが、これは「埋め込み元のページのスクロールバー」なんですね。

Iframe内の画面が遷移しても、埋め込み元のページのスクロールバーは動きません。確認画面は入力フォームより記述されている内容の縦幅が小さいので、確認画面の下部分が表示されてしまい、真っ白になっているように見えてしまったというわけです。

これは確かに分かりにくい。

実は・・・フォームメーラーでは、この問題をバシッ！と解決できる機能を提供できておりません。フォームではなく、埋め込み元のサイトのスクロールバーを制御する機能はなかなか提供が難しいんです。（現在はFreePlusのみ対応できていない状況です。）

スクロールを自動で動かしてみる

ただ、お困りのみなさんにどうにかフォームを便利に使ってほしい！
そう考えて「もしかしたらこれでうまくいくかも」という情報をお伝えしたいと思います

その方法とは、JavaScriptで
１．iframe内の画面が遷移したら
２．スクロールを最初に戻す という処理をしてみることです。

内容についてはどの環境でも同じように動作することを保証するものではなく、あくまで参考情報として参照してください。 ※埋め込み元のページに実装する内容ですので、フォームメーラーのお問い合わせではこの記事の内容についてサポートできません

では早速JavaScriptの処理を実装してみましょう。今回はjQueryを使って実装します。

といっても、以下の3つのコードを埋め込み元のページに実装するだけです。

①埋め込み元のページのheadタグ内でjQueryのライブラリを呼び出し

<script language="JavaScript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>

※ページ内の他の箇所ですでにjQueryのライブラリを読み込んでいないか注意してください。

②Iframeを囲むブロック要素にIDやクラス名をつけてjQueryから参照できるように

<div style="height:2500px;" class="frame_div">
<iframe id="iframe" frameborder="0" scrolling="auto"
src="https://business.form-mailer.jp/fms XXXXXXXXXXXXX " title="HTML
Form" width="100%" height="100%">
<a href="https://business.form-mailer.jp/fms/XXXXXXXXXXXXX"
title="Contact">この部分はインラインフレームを使用しています
</a>
</iframe>
</div>

③Iframe内がロードされたらスクロールを一番上にするjQueryの処理をページ内に記載。

<script>
(function($){
  $(function(){
    $('.frame_div > iframe').on('load',function(){
      $(window).scrollTop(0);
    });
  });
})(jQuery);

</script>

さて、以上の処理を実装したページで実際にどう動くか確かめてみましょう。

下までスクロールした状態で「確認画面へ」ボタンを・・・押す！
確認画面がすぐに表示されました！！

まとめ

というわけで、今回はフォームメーラーの機能ではなく、JavaScriptを使って解決する方法を紹介しました。
もしjQueryのことなら少し分かる・・・ということであれば、お試しください。
（しつこいようですが、この件でお問い合わせいただいてもサポートできません！）

もしjQueryがよく分からない、iframeの埋め込みがうまくいかない・・そういった方は、サイトにフォームを埋め込むのではなく、フォームメーラー上のフォームのドメインを変えることをご検討ください。
フォームメーラーでは、フォームのＵＲＬに独自ドメインを使用できる「独自ドメイン設定機能」を提供しています。
独自ドメイン設定機能をご利用いただける「フォームメーラーBusiness版タイプB」は14日間無料でご利用いただけますので、ぜひ実際にお試しください。

【Business版14日無料トライアル】

今すぐ無料ではじめる