新宿のWEB制作・システム制作会社エンジョインスタイル

ブログBLOG

MW WP FORM_ふりがな_住所_自動入力

MW WP FORMで、ふりがなや住所を自動入力する方法!

2018.05.10

お問い合わせフォームで、「ふりがな」や「住所」の「自動入力機能」があると便利!

MW WP FORM_ふりがな_住所_自動入力2

MW WP FORMといえば、WordPressでお問い合わせフォームを作成する際に、便利なプラグインですが、このプラグインをさらに便利に使用する方法をご紹介します。



お問い合わせフォームで、ユーザビリティーを意識した制作として、自動入力機能が挙げられると思います。



・ユーザーが氏名を記載した際に、ふりがなが自動で入力される
・ユーザーが郵便番号を記載した際に、住所が自動で入力される



このような機能により、ユーザーの入力の手間を省き、お問い合わせしやすい環境を整えることができます。


氏名を入力して、「ふりがな」を自動入力させる方法

MW WP FORM_ふりがな_住所_自動入力3

それでは実際に、「氏名」を入力した際に、「ふりがな」が自動入力される方法についてですが、こちらは下記サイトが参考になります。



Contact Form 7でフリガナ自動入力に対応



上記の記事は、Contact Form 7についての記載となっていますが、MW WP FORMでも同様の手順で、「ふりがな」の自動入力機能が実装できます。



jqueryとjquery.autoKana.jsを読み込み、MW WP FORMの「氏名」と「ふりがな」のidを、「name」と「kana」と設定するだけです。本当に簡単に対応できますね。


郵便番号を入力して、「住所」を自動入力させる方法

MW WP FORM_ふりがな_住所_自動入力

こちらはプラグインを使用します。下記のサイトが参考になるかと思います。



MW WP Formに住所自動検索機能をつける方法



別途、「zipaddr-jp」というプラグインをインストールし、MW WP FORMの「郵便番号」と「住所」のidを、「zip」と「addr」と設定するだけです。こちらも本当に簡単に対応できます。


まとめ

このように自動入力機能を実装することで、お問い合わせフォームもレベルアップできますので、ぜひ試してみてはいかがでしょうか。