別画面で指定した「お問い合わせ種別」を引き継いでA-Formのデフォルト値を設定する【A-Form Advent Calendar 2019/12/3】

この記事は A-Form Advent Calendar 2019 参加記事です。

お問い合わせフォームで「問い合わせの種類」を選ぶ場合に、よくドロップダウンで選ばせるUIがありますね。A-Formでも可能ですが、このようなUIです。

上の画像を見ていただくと分かりますが、ドロップダウンの中では細かい補足などができません。

そこで１つ前の画面で「問い合わせの種類」を選んでいただいて、 それを引き継いでフォーム画面ではデフォルト値として設定する JavaScriptコードをご紹介します。

例

まず、どんな感じになるかをお見せします。

1.問い合わせの種類を選ぶ画面

４つのお問い合わせ種別から選べるようになっています。
リンクを選んだら下記ページに遷移します。

2.A-Formを組み込んだページ

クリックで拡大

「お問い合わせ種別」のデフォルトが前ページで選んだ項目になっています。
（何も指定しない場合は「選択してください」が入ります）

実装

1.問い合わせの種類を選ぶ画面

これは静的にマークアップしたもので リンク先だけ q=N (Nは1からの数字)というパラメータが入っています。


<li class="type type__icon01">
    <a href="inquiry-test.html?q=1" title="商品に関するお問い合わせ">
        <span class="type__title">商品に関するお問い合わせ</span><br/>
        <span class="type__detail">商品の在庫、詳細仕様、価格など</span>
    </a>
</li>

「inquiry-test.html?q=1」のようにリンクさせます。

2.A-Formを組み込んだページ

次に、[[aform001]]などフォームを組み込んだページのMT上の記事本文には下記のように JavaScriptを仕込んでおくだけでOKです。 なお、jQueryで記述していますがA-FormがjQueryを利用しているのでライブラリを追加で読み込む必要はありません。

[[aform001]]
<script>
// お問い合わせ項目の自動選択
jQuery(function($) {
location.search.match(/q=(\d)/);
var q = RegExp.$1;
$("select#type option[value="+ q +"]").attr('selected', 'selected');
});
</script>

「#type」は「ドロップダウンリスト」パーツのID値を「type」にしたので、このようにしています。

クリックで拡大

まとめ

同じようなことをするなら、A-Formを組み込んだページの「お問い合わせ種別」の下にラベルで説明を加える方法もあるかと思いますが、ページを分けて丁寧に説明したいケースもあるかと思います。このようなちょっとした配慮が、満足度向上に影響を与えるかもしれません。