WEB制作 シュマリ管理人 景品表示法に基づく表記：当サイトのコンテンツには商品プロモーションが含まれています。

【TransmitMail】エラーの時にページの一番上に戻らないようにする方法

TransmitMailを使って、LPの一番下にお問い合わせフォームを作成している際に、少し困ったことがありました。

エラーの際にページの一番上に戻ってしまう

必須項目が入力されていなかったりすると、エラーを返すのですが、その際にページを読み込み直すので、表示位置がページの一番上に戻ってしまいました。

色々と試していて、直すことが出来たので、備忘録としてここにまとめておきます。

エラーの時にページの一番上に戻らないようにする方法

２つのコードを追加することで、ページの上に戻らなくすることができます。

formのactionを修正し、idを付ける

<form method="post" action="index.php#form" id="form">

actionの末尾にidの「#form」を追加します。

idとして「id=”form”」を追加します。

フォームの位置までスクロールさせるjQueryを追加

{if:$global_errors}
          <script type="text/javascript">
          //jQuery使用
          //formのIDが#formの場合
            $(function() {
              var position = $('#contact').offset().top;
              $('html,body').scrollTop(position);
            });
          </script>
{/if:$global_errors}

{if:$global_errors}～{/if:$global_errors}の中に、↑のjQueryをコピペします。

{if:$global_errors}は一度しか使えないので注意が必要です。

jQueryを使っていない場合、以下をbodyを閉じる直前に追加してください。jQueryが動作するようになります。

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

最後に

以上を追加することで、エラーが出た際に、フォームの位置に移動した状態で表示することができました。

駿河屋スタッフ募集中

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業（イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲）をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。

NEW POSTこのライターの最新記事