Webフォーム作成の記事
ARTICLEプログラミング初心者でも分かる！Webフォームの自動入力機能とは
Webフォームに入力する際、名前や住所など変わらない文字列を毎回入力する手間を面倒だと思ったことはないでしょうか。この記事ではサイト管理者側の視点として、Webフォームへの入力を様々な方法で自動化する方法をご紹介します。
目次
Webフォームの「自動入力」とはどんな機能？
自動入力という言葉には「自動補完機能」と「入力支援機能」の2つがあります。まずはこの2つの違いについて説明します。
自動補完機能
Googleなどの検索エンジンや各種サービスへのログイン画面で、一度入力した内容を記憶して予測表示してくれる機能として、オートコンプリート機能があります。
WebサイトのURLアドレスなど長い文字列を全て入力する必要がないという便利さがある反面、個人情報の漏えいに繋がる可能性もあります。
入力支援機能
入力支援機能は、郵便番号を入力すると住所が表示されたり、名前の漢字を入力するとカナが表示される機能です。入力補助機能とも呼ばれ、フォームの入力回数を減らしユーザーの負担を減らすことができます。
自動入力機能によって期待できる効果
Webフォームへの入力は煩わしいものと思われがちです。自動入力機能があることによってユーザーの手間を省くことができ、フォーム離脱率の改善が期待できます。
Webフォームを自動入力機能に対応させる方法
前述した通り、Google Chrome、Safariには、フォームに自動的に連絡先などの情報を入力する自動補完機能があり、この機能を使うためにはユーザー側で設定が必要です。
この機能を有効にしているユーザーのために、サイト管理者はフォームを自動入力機能に対応させておくと親切です。
input要素にautocomplete属性を設定する
フォームを自動入力機能に対応させるためには、input要素にautocomplete属性を設定します。ユーザーはブラウザに登録している情報を自動入力することができ、入力の手間を軽減することができます。
姓名（name）にautocomplete属性を設定する場合、以下のコードを書きます。
<input type="text" name="name" autocomplete="name" />
その他、代表的な項目は以下の通りです。
- family-name : 姓
- given-name : 名
- email : メールアドレス
- postal-code : 郵便番号
- address-level1 : 都道府県
- address-level2 : 市区町村
- address-line1 : 番地・マンション名（1行目）
- address-line2 : 番地・マンション名（2行目）
- organization : 会社名
- off : 自動入力を無効にする
他にも性別や生年月日、クレジットカード情報などの項目もありますが、Google Chromeでは生年月日の自動入力は対応していません。
Webフォームを自動入力機能に対応させる場合の注意点
Webフォームを自動入力機能に対応させる方法を解説しましたが、注意しなければならない点もあります。
name属性の値を適当に設定しない
input要素のname属性は適当なものではなく、適切な値を設定しておきましょう。サイトによってname値の命名規則が異なりますが、自動入力を機能させるためにはautocomplete属性で定義されている値を使用するのがおすすめです。
適当な値を設定してしまうと、自動入力が機能しなかったり、正しい項目の場所に入力されなかったりする場合があります。ユーザーの負担を軽減するための自動入力機能が、反対に手間を増やしてしまっては本末転倒ですので注意しましょう。
申請や応募受付の電子化・システム化ならWebフォーム作成システム「SPIRAL®」
当社のご提供する 「Webフォーム作成システムSPIRAL®」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。 申請や応募の受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。
受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScriptを利用してカスタマイズも可能です。
申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。
書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付など様々な業界・用途・シーンで延べ11,000社以上のご利用実績がございます。
サービスの詳細については「Webフォーム作成システムSPIRAL®」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。
まとめ
Webフォームの自動入力は、効率性向上のために導入することが多いです。自動入力には自動補完機能と入力支援機能の大きく2種類があります。
Google Chrome、Safariにはフォームに自動で情報を入力する機能があり、フォームを自動入力機能に対応させることによってユーザーの負担軽減につながります。また、フォーム離脱率の改善効果も期待できるでしょう。
細かく設定したい場合は、プログラミングの知識がないと自力で構築するのが難しいため、コストはかかりますが開発会社に外注することを検討してもよいでしょう。
