長いコンテンツの下にフォームを配置しているページで、フォームを送信して同じような別ページに遷移したあと、ユーザーがフォームまでスクロールしないと次の操作に気づけない——地味ですが、機会損失につながりかねないUXの問題です。

結論から言うと、<form>のactionの末尾に#アンカー名を付けるだけで、送信後に遷移した先のページで、最初からフォームの位置を表示できます。この記事では、問題の背景とその対策を解説します。

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

フォームだけのシンプルなページなら問題ありませんが、ページ構成やデザインの都合で、長いコンテンツの下にフォームを置く場合があります。

フォームを送信してページが遷移すると、当然ながら遷移先のページの先頭が表示されます。その遷移先にもまた長いコンテンツがあり、下の方にフォームが配置されていると、入力内容の確認などのために、ユーザーはフォームの位置まで自分でスクロールしなければなりません。

操作に慣れていないユーザーだと、そのまま「送信が完了した」と思い込んでページを閉じてしまうことがあります。実際にはまだ送信されていない、というケースも起こり得ます。

対策：遷移先で最初からフォーム位置に飛ばす

遷移した先のページで、最初からフォームの位置を表示してあげれば、ユーザーを迷わせることなく、次のアクション（入力内容の確認など）を促せます。

方法は簡単で、<form>のactionの末尾に#でアンカーリンクを指定します。こうすると、送信してページ遷移したあと、指定した位置が表示されます。

<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の位置（id="form"を付けた要素）まで飛んでくれます。遷移先のフォームを囲む要素などに、対応するid="form"を付けておきましょう。

この方法は、検索フォームのようにGETで送信するフォームだけでなく、actionで指定したページへ遷移する形のフォーム全般で使えます。遷移先のURLの末尾にハッシュ（#form）が付くことで、ブラウザがその位置まで自動でスクロールしてくれる、という仕組みです。特別なスクリプトを書かなくても、HTMLの指定だけで実現できる手軽さが魅力です。

補足：JSで位置を微調整する場合

今回のケースは、アンカーリンクを指定するだけで解決しました。ただ、固定ヘッダーがある場合など、アンカーの位置がヘッダーに隠れてしまうことがあります。

そうしたときは、CSSのscroll-margin-topで飛び先の上に余白を確保したり、JavaScript（jQuery）で遷移後のスクロール位置を調整したり、といった工夫が必要になることもあります。まずはアンカーリンクで試し、表示位置がずれる場合に微調整を加えるとよいでしょう。

まとめ

• 長いページの下部にフォームがあると、送信後にフォーム位置まで戻れず離脱の原因になる
• actionの末尾に#アンカー名を付けると、遷移後にその位置が表示される
• 飛び先の要素に対応するidを付けておく
• 固定ヘッダーで隠れる場合はscroll-margin-topやJSで微調整する

フォームの位置に自動で飛ばすだけで、ユーザーの迷いを減らし、送信完了までスムーズに導けます。ちょっとした工夫ですが、フォームのあるページでは効果的なテクニックです。