最新情報 & コラム

気の利いたUI「お問合せフォーム」編

Web制作 2018-01-16

お問合せフォームは、お客様からお問合せをいただく窓口になる大切なページです。
ですが、せっかくのお問合せも入力ミスがあるとお客様と連絡が取れない事態になりかねません。

お問合せを確実にしていただくには、分かりやすいこと、手間をかけさせないことが入力ミスを減らし離脱率を下げる重要なポイントになります。

今回はお問合せフォームの「全角」と「半角」の入力箇所について説明致します。

お問合せフォームから確実に送信してもらうために

お問合せフォームには文章を「全角」で入力する箇所とメールアドレスなど「半角」で入力する箇所があります。

例えば、名前は全角で入力して、メールアドレスは半角で入力して、お問合せ内容は全角で入力する。
この流れを考えたときにユーザーにとってキーボードで「全角」、「半角」を切替るのは面倒で入力ミスが出る可能性も高くなります。

メールアドレスを全角入力してしまうと、自動返信メールを送ることが出来なくなり必要な情報をユーザーに届けることが出来なくなってしまいます。
ユーザーが「全角」、「半角」切替をキーボード操作するのではなく、自動で全角から半角に変換を行うことでスムーズに操作でき入力ミスも減らすことが可能になります。

パソコン操作になれている方もいれば苦手な方もいらっしゃいます。そのためユーザーに全ての操作を任せていることを考えなくてはいけません。

半角入力箇所を「全角」から自動で「半角」変換

半角の入力箇所に全角を入力した場合、jQueryを使うことにより自動で半角に変換することができます。
<input>のid「Tell」と「Mail」をjQueryに設定します。

●フォーム側

<input type="text" id="Tell">
<input type="text" id="Mail">

●jQuery

<script>
	$(function(){
			$("#Tell , #Mail").change(function(){
					var str = $(this).val();
					str = str.replace( /[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function(s) {
							return String.fromCharCode(s.charCodeAt(0) - 65248);
					});
					$(this).val(str);
			}).change();
	});
</script>