ホームページ制作フィールビー|FEELBEE

  • SERVICE
  • WORKS
  • NEWS & TOPICS
  • ABOUT
  • RECRUIT
  • CONTACT
  • Facebook
  • Instagram

  • HOME
  • SERVICE
    • ホームページ制作Website Design
    • スマートフォンサイト制作Smartphone site Design
    • ランディングページ制作Landing page Design
    • ポータルサイト制作Portal site Design
    • 下北沢ジャック広告Shimokita Jack
  • WORKS
  • NEWS & TOPICS
  • ABOUT US
  • RECRUIT
  • CONATCT
    • 採用情報Careers
    • パートナー募集Partner
  • facebook
  • Instagram

NEWS & TOPICS

  • NEWS TOP
  • お知らせ
  • ウェブブランディング
  • ウェブマーケティング
  • LIFE
  • WEB

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

16 01 2018

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

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

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

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

 

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

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

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

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

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

 

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

半角の入力箇所に全角を入力した場合、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( /[A-Za-z0-9-!”#$%&’()=<>,.?_[]{}@^~¥]/g, function(s) {
							return String.fromCharCode(s.charCodeAt(0) - 65248);
					});
					$(this).val(str);
			}).change();
	});
</script>
								

 

DEMO

デモページ

 

最後に

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

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

 

 

最後に

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

ニューストップに戻るニューストップに戻る

SERVICE

ホームページ・スマートフォンサイト・ランディングページ・ポータルサイト・ECサイトなどの
制作を通じてクライアント様のウェブ上での目標を実現化いたします。

Small ideas make a Big innovation

「小さなアイデアが大きなイノベーションを起こす!」
をコンセプトに、クライアントとユーザーの双方がイノベーションを起こすご提案をいたします。

クライアント様も気が付かない小さなアイデアを積み重ねて、大きなインパクトのあるソリューションを創造いたします。

  • Website Designホームページ制作
  • Smartphone site Designスマートフォンサイト制作
  • Landing page Designランディングページ制作
  • Portal site Designポータルサイト制作
  • Shimokita Jack下北沢ジャック広告

ABOUT
FEELBEEについて

ABOUT
FEELBEEについて

受付 平日10:00-18:00

03-6416-3903

お問合せフォーム

ホームページリニューアル制作サービス ブラボーウェブ

 

rindo

  • HOMEホームページ制作 トップ
  • ABOUT会社案内
  • 採用情報
  • パートナー募集
  • WORKS制作実績
  • NEWS & TOPICSお知らせ・最新情報
  • CONTACTお問合せ
  • SERVICEサービス紹介
  • ホームページ制作
  • スマートフォンサイト制作
  • ランディングページ制作
  • ポータルサイト制作
  • facebook
  • twitter

ホームページ制作フィールビー|FEELBEE

© Copyright FEELBEE. All Rights Reserved.