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

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

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

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

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

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

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

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>

最後に

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

コメントを残す

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