お問い合わせ入力フォームの入力サポート機能を最大限に活用しよう

お問い合わせフォームはブラウザの自動入力機能を利用するとユーザーの入力短縮になり、ストレス軽減につながります。

自動入力機能はinputのname値を参照しているので、オリジナルのname値ではなくなるべく世界共通のname名称をつけるべきです。

スマホデバイスではinputmodeを使って、入力する情報の種類に応じて最適な入力設定を用意しましょう。

お問い合わせ入力フォームをもう一度見直そう

WEBページのお問い合わせフォームを自作する際、あなたは今どのように作っていますか？

過去に作ったフォームタグを、formから/formまでそのままコピペしてきませんか？

フォームの一番の目的は、お問い合わせ率（コンバージョン）を上昇させる事ですよね。

ユーザーがストレスを感じない作り

そのために大切なのは、「ユーザーがストレスを感じない入力体験・フォームづくり」です。

毎回一度作った問い合わせフォームをコピーして来るだけでは、いつまで経ってもそのレベルは上がりません。

お問い合わせフォームにも、デザインやコーディング面での「トレンド」があります。

本記事では、お問い合わせフォームをいかに入力しやすくできるか、そのポイントついて紹介します。

ブラウザの自動入力機能を最大限活用する

今は、ブラウザ自体がフォームに対しての大きなサポート役を果たしています。

Google ChromeやSafari・新Edgeでは、過去に入力した情報をフォーム上に自動表示・代入する機能があります。

入力をし始めた時点で候補が表示され、それを選択すれば過去に入れた情報が自動で代入されるのです。

例えば名前を入力したら住所や連絡先までセットで候補表示されるので、ほとんど手入力する必要がなくなります。

過去に入れた情報がブラウザに記録

ブラウザには過去に入れた各フィールドの情報が記録されています。

フォーカスしているname値を参照して、過去に同じ値に入っていたデータ候補を表示してくれる訳です。

その候補から選択する事で名前や住所などが代入される仕組みですね。

入力軽減はストレス軽減

自分の入力する情報は毎回大体同じですから、一度入れた情報を再利用できるのは大きなメリットですよね。

少しでも楽に入力できる様、自動入力機能は利用するようにしましょう。

autocomplete属性について

以前まで、このブラウザに記録された情報を利用するのはフォーム側の仕事でした。

inputタグにautocomplete属性を追加する事で、フィールドへの自動入力が実行されます。

autocompleteの機能により、ブラウザに登録している既存情報が活用できていた訳です。

autocompleteの記述例

今現在name属性とautocomplete属性は、同じ名称を入れるのがセオリーです。

<input type="text" name="name" autocomplete="name">

ブラウザは現在、autocomplete機能を無視している

実は現在、ほとんどのブラウザではこのautocomplete機能の影響を受けません。

autocompleteを「OFF」にしていても無視され、常に自動入力が有効な状態になっているのですね。

無駄かも知れませんが、name値とautocomplete値をセットで設定しておくべきだと思います。

autocomplete属性設定上の注意点

autocomplete属性で全ての自動入力が補助できる訳ではありません。

実際に都道府県は、選択ボックス式のところが多いはずです。

できれば都道府県欄もinputの入力式にしていると、自動入力機能がサポートしやすいと言えるでしょう。

管理者によってバラバラなname属性値

現在各ブラウザは、autocompleteのあるなしに関わらずフィールド上の「name値名称」を参照して自動入力する情報を判断しています。

ですので特に「name属性の名称指定」には十分注意しましょう。

name値を場当たり設定しない

実は各サイトのお問い合わせフォームを確認すると、このname値の命名の仕方が各々違います。

姓の命名例

郵便番号の命名例

それ以外に、他人ではわからない個人的につけたオリジナル名称などもあります。

サイトごとに違うname値

Aサイトの郵便番号 <input type="text" name="postal-code" autocomplete="postal-code"> Bサイトの郵便番号 <input type="text" name="zip" autocomplete="zip">

このように同じ情報を入力する欄でも、管理者によって様々なname値の設定がされている訳です。

できるだけ共通仕様にそろえる

name値は誰もが利用する共通の名称にするべきです。

これらの名称には、世界的な共通仕様基準が存在します。

代表的なname値の名称

詳細は「WHATWG Standard」のAutoFillの仕様をご覧ください。

名称をできるだけ統一できれば、極論どのサイトでも統一の自動入力情報が活用できる事になります。

なぜ名称仕様を揃えた方が良いのか

name値から同じ情報を引き出せる

先程も説明した通り、ブラウザの自動入力機能はフィールドのname値を参照しています。

つまり以前入力時のフィールドname値と、別のサイト上のフィールドname値が同じだったら、同じ情報を引き出せるわけです。

逆にname値が違ったら、情報を参照できないので候補が表示されません。

自動入力（Autofill）の記録

複数項目を一括代入可能

以下のAサイトとBサイトのname値名称は、「住所」のみ違います。

AサイトのAutofill項目

BサイトのAutofill項目

Aサイトの入力情報を記録したブラウザは、Bサイトのお名前フィールド（name="name"）に来た時点で、Aサイトでの入力情報を表示する事ができます。

この時、emailやtelの候補もセットで表示・一括代入する事が可能です。

住所だけ候補から外れる

しかし住所だけはAとBのname値が違うので代入候補に挙がらず、他の候補が代入された後に手入力が必要になるという訳です。

場合によっては、本来の位置とは違うフィールドに自動入力されてしまう場合もあります。

これらの現象は逆にユーザーにストレスを与える結果になりますよね。

ユーザーの手入力の手間をいかに省けるか

ここでもしAとBのサイトのname値が全て一緒だったら、ユーザーは自分の個人情報に関しては手入力する部分がゼロになりますよね。

逆に仕様から逸脱したname値を使っているサイトだと、全く自動入力の候補が使えず手入力が必要になるのです。

できるだけ共通仕様に設定すべきというのはこれが理由であり、目指すところなのです。

昔ながらのフォームの癖

今でもたまに、以下の様な古い傾向のフォームが存在します。

昔の名残で入力しにくいフォームになっていないか、自分の作成したものを確認してみて下さい。

全角入力・全角フリガナの強制

フォームによっては住所入力の際、「全角入力を強制」しているものがありました。

半角数字で番地を入力すると「全角で入力してください」と弾かれてしまう訳です。

或いはフリガナ入力欄にカタカナ入力を強制したものなどもそうですね。

ユーザーにわざわざ全角数字で入力し直させるのは、今のご時世ナンセンスだと言えるでしょう。

電話番号や郵便番号のフォームを複数に分割している

例えば電話番号の場合、3つのボックスをわざわざ用意していることがありますよね。

この状態だと自動入力も利きづらく、特にスマホ版では入力が大変です。

例えば自動入力候補にTELを丸ごとを記録したものがあっても、それが市外局番を入れる1個目のボックスに全て代入され、結果自分で削る必要があったりします。

こういった事を避けるため、基本的に電話番号フィールドは1つにまとめてしまいましょう。

住所の数字部分の全角入力必須を外す

ユーザーによっては全角半角の区別がつかない事もあります、ですのでどちらでもOKにしましょう。

変換するべき内容があればサーバーサイドで変換対応する事にするべきです。

デバイスごとに最適な入力設定をする

今一番WEBサイトを見ている端末デバイスはスマホです。

となればスマホでのお問い合わせ入力フォームには最新の注意を払うべきでしょう。

スマホデバイスに適切な入力設定がされていないと、ユーザーがストレスを受けコンバージョン率の低下につながります。

しかしPCと違ってスマホ版は、インターフェースの操作が複雑である事も事実です。

フィールドごとに最適な入力形式をサポート

そんな時フォームの入力設定次第で、ある程度サポートする事ができます。

入力設定をサポートするには、以下の2種類の方法があります。

type属性による指定

メールアドレスの場合

<input type="email" name="email" autocomplete="email">

iOSで「type="email"」指定すると、USキーボードが起動し、Spaceの横に@や.ボタンが表示されます。

入力欄にカーソルが入った段階で自動で変わってくれるので便利ですよね。

電話番号の場合

<input type="tel" name="tel" autocomplete="tel">

「type="tel"」と指定すると、テンキーが起動します。

これもメールアドレスと同様に、入力欄にカーソルが入った段階で自動で変わってくれます。

inputmode属性による指定

inputmode属性の場合、もっと細かくキーボードの入力設定を指定できます。

<input type="text" name="" autocomplete="" inputmode="ここに入る">

inputmode="text"（規定値）

デフォルトの状態ですね。大きな変化はありません。

inputmode="email"

英語（ABC）ボタンをタップするとtype="email"と同じボードが出てきますが、実はABCを押さない限りひらがな入力のままです。

inputmode="tel"

type="tel"と同じテンキーの状態になります。

inputmode="search"

通常の検索ボックスにカーソルが入った時と同様に、ひらがな入力＋「開く」ボタンが表示されます。

inputmode="url"

強制的にアルファベット入力画面になります。emailもこうなると良いのですが。

inputmode="decimal"

type="tel"と同じテンキーの様な状態になりますが、左下に「.」のマークが表示されます。

inputmode="numeric"

上のdecimalと同じですが、左下の「.」マークは消えます。

英字の自動サポート機能を無効にする

iOSでは、以下の様な英字入力時のサポート機能があります。

文章を入力する際はこれらの補助機能は便利です。

頭文字が強制的に大文字になる

しかし例えば「ユーザー名」を入力するフィールドで、Auto Capitalize機能が有効になっているとしましょう。

そうすると頭文字は小文字なのに、強制的に大文字に変わってしまう場合があるのです。

ですのでユーザー名を入れるフィールドでは、これらの機能をOFFにしましょう。

具体的には、autocorrect="off"とautocapitalize="off"を設定します。

<input name="username" type="text" autocomplete="username" autocorrect="off" autocapitalize="off">

ページ離脱時にアラートを表示

よくありがちなのが、フォームの入力時に誤ってブラウザを閉じてしまうケースです。

根気よく入力し直ししてくれれば良いのですが、テンションが落ちてそのままあきらめる事もあり得ますよね。

そんな時、以下の様なJavaScriptを設置しておくと、間違ってブラウザを閉じる前に警告画面が出るので、離脱されずに済みます。

javascript記述

window.addEventListener("beforeunload", function(e) { var confirmationMessage = "画面を閉じようとしています。入力内容を破棄しても良いですか？"; e.returnValue = confirmationMessage; return confirmationMessage; });

まとめ

いかがでしたでしょうか。

お問い合わせフォームは、コンバージョンUPにつながるコーディング面の修正点がたくさんある事がお判り頂けたと思います。

本記事で紹介した方法はいずれもちょっとした修正・追記を行うだけで済むものばかりです。

これでユーザービリティーが大きく向上するのなら、やらない手はありませんよね。

これからお問い合わせフォームを設置する場合はコピーで済まさず、上記の部分を忘れずに検討・導入してくださいね。

一押し人気コーナー紹介