リファラ（リンク元）によるチェックボックス選択

2020.11.20　Posted by Coding_team

Webプログラミング

tecmemo2011 こんにちは、クリエイターズメモです。

自サイトにお問い合わせフォームなどを設置している方々、少しでもコンバージョン数を増やしたいと思っていますよね。

今回はそんな方々の助けになれるように、ユーザーの入力の手間を減らしてあげるテクニックを紹介したいと思います。

少し限られた場面になってしまいますが、チェックボックスの自動選択機能をjavascriptで作ってみます。

ここで選択されるチェックボックスは採用サイトのエントリーフォームの職種選択みたいなものを想定しています。

早速ですが、まずは作成したDEMOページをご覧ください。

チェックボックスの選択が変わったのが分かるように2ページのリンク元を用意しています。ボタンを押してチェックボックスの選択ページへ飛んでみてください。

→DEMOページ01

→DEMOページ02

リンク元によって選択されるチェックボックスが変わったのを確認できたでしょうか？

では解説していきます。

■チェックボックスの選択ページHTML

<ul>
<li><label><input type="checkbox" name="check" value="総合職" id="c01">総合職</label></li>
<li><label><input type="checkbox" name="check" value="専門職" id="c02">専門職</label></li>
</ul>

<ul>

</ul>

特になんて事のないHTMLですね。今回は分かりやすくするために各inputタグにIDを付与しています。

■チェックボックスの選択ページjavascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
	var ref = document.referrer; //リファラ（リンク元）を取得
	if (ref.match(/page01/)) { //正規表現でpage01とマッチするもの
		$("#c01").prop('checked',true); //#c01をチェック
	}
	if (ref.match(/page02/)) { //正規表現でpage02とマッチするもの
		$("#c02").prop('checked',true); //#c02をチェック
	}
});
</script>