記事の詳細
MW WP FORMとzipaddr-jpを使って郵便番号を入力すると自動的に住所に変換されるメールフォームを実装する【2018年3月完全版】
毎回毎回迷うのでメモメモ。
今回のブログの見出しはコチラです！
MW WP FORMの基本的な設定の仕方
前に当社のT氏が記載してくれています基本的な設定の仕方と確認画面の作り方はこちら。
よくハマるのがトップページにメールフォームを実装し、サーバー移設の際にURLを書き変えるの忘れる、というアレです。
MW WP FORMを使っている場合でLPのように1枚ページの中にフォームを実装している際は、確認画面などのURLなどは要注意です。リダイレクトしまくります。
WordPressプラグイン「zipaddr-jp」を使って自動住所登録を作る
郵便番号を入れると自動的に住所を引っ張り出して、番地名くらいまでは参照してくれる機能があります。
良く利用されているのは
- JavaScriptライブラリ ajaxzip3
- jQueryプラグイン jquery.jpostal.js
の2本ですが、WordPressを利用する際はzipaddr-jpを利用することにしています。
特にjQueryはWordPressで利用しようとするといろいろ何かと面倒くさいことが多いので……。
zipaddr-jpの無料版を利用していきます。
zipaddr-jpの実装
1.プラグインからzipaddr-jpを検索してインストール→有効
2.zipaddr-jpの設定
初期設定からあまりいじる必要はありません。必要なのは「区切り文字（デフォルトはハイフン）」と「プレイスホルダー（もともとフォームの中にサンプルとしてある文字）」くらいです。変更箇所がある場合は「この内容で登録する」をクリックして保存します。
MW WP FORMとzipaddr-jpの連携
zipaddr-jpはid部分に、該当する文字列を挿入することで起動します。
| 項目 | ID |
| 郵便番号 頭3桁 | zip |
| 郵便番号 下４桁 | zip1 |
| 郵便番号 合わせて表示 | zip |
| 都道府県 | pref |
| 市区町村 | city |
| 地域 | area |
| その他 | addr |
項目それぞれにフォームを設けたい場合は、該当するフォームにid設定を行えばいいのですが、例えば「郵便番号は3-4に分けたくない」「住所は一括で出したい」などなど出てくると思います。
そういう時はこう。
郵便番号
3桁＋4桁
|
1 |
[mwform_text name="zip" id="zip" placeholder="123"]-[mwform_text name="zip1" id="zip1" placeholder="1234"] |
一括
|
1 |
[mwform_text name="zip" id="zip" placeholder="1234567"] |
住所
全部バラバラ
|
1 2 3 4 |
[mwform_text name="pref" id="pref"] [mwform_text name="city" id="city"] [mwform_text name="area" id="area"] [mwform_text name="addr" id="addr"] |
都道府県と市区町村＋番地名など
|
1 2 |
[mwform_text name="pref" id="pref"] [mwform_text name="addr" id="addr"] |
全部一括
|
1 |
[mwform_text name="addr" id="addr"] |
テンプレート
クラスタグはご自由に。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
お名前 [mwform_text name="c-name" id="c-name" class="c-name"] メールアドレス [mwform_text name="c-mail" id="c-mail" class="c-mail"] お電話番号 [mwform_text name="c-tel" id="c-tel" class="c-tel"] ご住所 郵便番号 [mwform_text name="zip" id="zip" class="zip" placeholder="1234567"] ご住所 [mwform_text name="addr" id="addr" class="addr"] 番地・建物名など [mwform_text name="c-address" id="c-address" class="c-address"] お問い合わせ内容 [mwform_radio name="c-content" id="c-content" class="c-content" children="お見積もり依頼,ご相談・ご質問,その他"] 詳細 [mwform_textarea name="c-detail" id="c-detail" class="c-detail" rows="5"] [mwform_submitButton name="c-send" class="c-send" confirm_value="確認画面へ" submit_value="送信する"] |
送信完了メール（リダイレクト時のthankページに使ってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
お問い合わせありがとうございました。 いただいたメールアドレスに自動返信メールをお送りしています。 内容に関しては、2、3日中に担当者よりご連絡いたしますので少々お待ちくださいませ。 また、2、3日中に連絡がない場合は お手数ですがもう一度メールをお送りいただくか 下記電話番号までお問い合わせください。 この度はお問い合わせありがとうございました。 株式会社●●● 電話：12-3456-7890 住所：サンプルテキスト |
いやちゃんと変えますよ。変えますけど デフォルトの文章がないとやっぱり面倒くさいっていうか……。
自動返信メール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
お問い合わせありがとうございました。 以下の内容でお問い合わせを承りました。 【お名前】 {c-name} 【メールアドレス】 {c-mail} 【お電話番号】 {c-tel} 【ご住所】 〒{zip} {addr} {c-address} 【お問い合わせ内容】 {c-content} 【お問い合わせ詳細】 {c-detail} 内容に関しては、2、3日中に担当者よりご連絡いたしますので少々お待ちくださいませ。 この度はお問い合わせありがとうございました。 +‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+ 株式会社●●● 電話：12-3456-7890 住所：サンプルテキスト +‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+ |
管理者宛メール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
WEBサイトより以下の内容でお問い合わせを承りました。 【お名前】 {c-name} 【メールアドレス】 {c-mail} 【お電話番号】 {c-tel} 【ご住所】 〒{zip} {addr} {c-address} 【お問い合わせ内容】 {c-content} 【お問い合わせ詳細】 {c-detail} +‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+ 株式会社●●● ホームページ 電話：12-3456-7890 住所：サンプルテキスト +‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+ |
ついでにメールの飾り帯集
+‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+*ﾟ ゜ﾟ *+:｡.｡:+*ﾟ ゜ﾟ *+:｡.｡.｡:+*+:｡.｡
｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。｡・ﾟ・｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。｡・ﾟ・。
оО〇・-・〇Оо・-・оО〇・-・〇Оо・-・оО〇・-・〇Оо
■□─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─□■
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。