form で submit した時、ページ遷移後にページ内の特定の位置に移動

【原因】長いページの下の方にフォームがある

フォームだけのシンプルなページなら何も問題はないのですが、ページ数の関係やデザイン上、長いコンテンツの下にフォームを配置する場合があります。

フォームまでスクロールしないといけない

フォーム送信した後、ページ遷移後に当然ですが遷移した先のページの先頭が表示されます。

このページにもまた長いコンテンツがあり、その下にフォームが配置されていると入力項目確認などのために、フォーム位置までスクロールしなければいけません。

慣れていないユーザーだとそのまま送信完了だと思いこんでしまいパソコンを閉じてしまいます。

実際には送信されていないパターンも時々あります。

【対策】遷移した先のページで、最初からフォーム位置に飛ばす

遷移した先のページで、最初からフォーム位置を表示させてあげればユーザーを困惑させることなく、入力項目確認などの次のアクションを促すことができます。

<form>の action 部分の最後に “#” でアンカーリンクを指定してあげると、submit してページ遷移後に指定の位置を表示してくれます。

<form method="get" action="contact/#form">
    <input type="hidden" class="field" name="s">
    <select id="submit_select" name="term_select" onchange="submit(this.form)">
        <option value="0">すべてのエリア</option>
        <option value="1">名古屋</option>
        <option value="2">大阪</option>
        <option value="3">東京</option>
    </select>
</form>

上記の例でいくと、https://xxxxx.com/contact/#form の位置に飛んでくれます。

まとめ

今回の場合はページ内リンクを設定してあげるだけで解決しましたが、場合によっては submit した時の位置情報を取得し、Javascript（jQuery）で位置を調整したり工夫が必要のようです。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。