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

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

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

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

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

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

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

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

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

半角の入力箇所に全角を入力した場合、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>
								

DEMO

デモページ

最後に

ホームページ制作ではついつい会社紹介の内容に目が行きがちですが、お問合せフォームは、お客様からお問合せをいただく窓口になります。そして操作はお客様に任せています。

お客様からのお問合せを確実に行って頂くためにも、分かりやすいこと、手間をかけさせないことがミスを防ぎ離脱率を下げる重要なポイントになりますので、ホームページ制作の参考にしてみてください。

最後に

お問合せの機会を逃さない為にも設定しておきたいですね。
今回のお問合せフォームを参考にしていただければ幸いです。