WordPressで問い合わせ設定というと、Contact Form 7 が有名です。
ここでは、設定や便利なTipについて記載しようと思います。
設定方法
いろんなサイトにて詳しく説明しているので、そちらのリンクをご紹介
画像付きで詳しく記載されているので、初心者の方でもわかりやすく設定できるかと思います。
確認画面
私的には確認画面はなくてもよいかなっと思いますが、拡張プラグインの記事を見つけたので一応ご紹介。
もし必要になった際には、「Contact Form 7 add confirm」というプラグインを利用するとよいかと思います。
使い方はこちらの記事をご確認ください。
カスタマイズ
郵便番号
郵便番号を入力して、自動で住所を入力できる機能を追加したい場合、YubinBango というライブラリがあります。
導入方法も簡単です。
直接footer.phpに scriptタグを呼び込む
</body>直前あたりに以下のコードを張り付ける
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>functions.phpで呼び込む
以下は Contact Form 7 設置固定ページに張り付ける場合。適時ご自身のWordpressに合わせてください。
if (is_page('設定する固定ページのスラッグやID等')) {
wp_enqueue_script(
'好きなID',
'//yubinbango.github.io/yubinbango/yubinbango.js',
array(),
null,
true
);
}設定方法
上記スクリプトタグを設置したら、Contact Form 7 設定画面内で以下の設定を行います。
国名の指定
以下のコードを郵便番号設定する上部に記載してください。
<span class="p-country-name" style="display: none;">Japan</span>郵便番号入力項目設定
郵便番号を入力するフォームに「p-postal-code」というクラス名をつける。
パーツ入力でクラス名に付与してもよいですし、以下のコードをご自身用に変更して利用していただいても構いません。
[text zipcode(ここは好きな名前を付けてください） class:p-postal-code maxlength:8 size:8 placeholder "例） 123-4567"]住所入力項目設定
「p-region」（都道府県）、「p-locality」（市区町村）、「p-street-address」（町域）、「p-extended-address」（それ以降の住所）の4つのクラスを設定する。
ご自身のフォームの設定によって、入力欄を分けてもよいですし、1つにしてもよいです。
1つにする場合は、上記クラスを4つとも記載します。
[text address(ここは好きな名前を付けてください） class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "都道府県 市区町村 番地"]別々にする場合は以下のように記載できます。
[text region(ここは好きな名前を付けてください） class:p-region]
[text locality(ここは好きな名前を付けてください） class:p-locality]
[text street(ここは好きな名前を付けてください） class:p-street-address]
[text extended(ここは好きな名前を付けてください） class:p-extended-address]ショートコードにクラスを追加
上記入力画面の設定が終わったら、Contact Form 7 を表示したいページに
以下のショートコードを入力します。
その際に「h-adr」というクラスを付与します。
[ contact-form-7 id="作成したフォームのID番号" title="お好きな名前" html_class="h-adr"]上記4つの設定で郵便番号の自動入力が完了です。
上記以外にも ajaxzip3 というライブラリもあります。
（こちらのサイトに Contact Form 7 の設定まとめ記載されており、使い方も記載されています）
ふりがなの自動入力
必要であれば、jquery.autoKana.js というプラグインを導入すれば可能です。
使い方にについては以下のサイトに詳しく記載されているのでご確認ください。
こちらはふりがなにもフリガナにも対応できます。導入もそこまで難しくはありません。
- フォームで名前の入力をカナにも自動入力してくれるjquery.autoKana.jsの使い方
- ふりがなをフォームに自動入力してくれるjavascriptプラグインjquery.autoKana.jsの設置方法
以上で、Contact Form 7 の設置が完了です。
コメント