Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

[WordPress] Contact Form 7 プラグイン無し!郵便番号から住所入力する

Contact Form 7

使いやすいメールフォームの必須として、郵便番号の入力で住所が自動入力される仕組みがあります。今まではzipaddr-jpプラグインを使用していましたが、アップデートも面倒ですし、出来るだけプラグインは使用しない方が良いのかな~という事で、先送りしていたプラグイン無しの実装をやってみました。

初心者でも大変ではありません。3ステップで完成です。ぜひ時間がある時にやってみて!

INDEX

ライブラリをリンク

YubinBangoという無料のライブラリを使用します。2種類の方法をご紹介します。

フックを使う場合

子テーマのfunction.phpに追記して下さい。

フックを使って、ページのスラッグが「contact」の場合のみ、ライブラリが読み込まれる様にしています。つまり、メールフォームを設置している固定ページのスラッグをcontactに設定している必要があります。(ご自身のページのスラッグ名に修正して下さい)

//youbinbango
function zip_library() {
	if(is_page('contact')){
  	wp_enqueue_script( 'youbinbango-js','https://yubinbango.github.io/yubinbango/yubinbango.js', array(), 'null', true );
}
}
add_action( 'wp_enqueue_scripts', 'zip_library' );

直接書き込む場合

Contact Form 7 のフォームのコードの一番初めにスクリプトを書く

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
↑この様にフォームの上に書く
  <dl class="contact7">
    <dt>お名前<span class="form7-require">必須</span></dt>
    <dd>[text* your-name]</dd>
・
・
・

フォームの作成

Contact Form 7 郵便番号
完成イメージ

dl>dt>dd構成で作った場合の例です。郵便番号はハイフンの有無、半角、全角に関係なく使える様になっています。class:XXXを書き足すだけです。

    <dt>郵便番号<span class="form7-require">必須</span></dt>
    <dd>[text zip class:p-postal-code minlength:7 placeholder"住所自動入力"]</dd>
    <dt>都道府県</dt>
    <dd>[text pref class:p-region]</dd>
    <dt>市区</dt>
    <dd>[text city class:p-locality  class:p-street-address class:p-extended-address]</dd>
    <dt>番地とマンション名<span class="form7-require">必須</span></dt>
    <dd>[text* addr01 placeholder"例:1-2-3 マンション名"]</dd>

「日本」の郵便番号を指定する設定が必要です。display:noneで見えない様にしています。Contact Form 7 フォームの上か、下に書き足します。「以降の住所」というのが良く分からないのですが、一応付けました。多分、外国の住所の場合に機能するのではないかと思います。

<span class="p-country-name" style="display:none;">Japan</span>
住所class
都道府県p-region
市区町村p-locality
町域p-street-address
以降の住所p-extended-address

フォーム内でYubinBangoを使用する設定

どう呼べば良いのか分かりませんが、「formタグのclass指定の中に h-adr が含まれていること」使用出来る様にするには必要な事です。2種類の方法がありますので、お好みでどうぞ。

フォームに設定

単にフォーム内にclass=h-adrを足す。

<form class="h-adr">
とか、
<dl class="h-adr"> など

ショートコードで設定

上記では都合が悪い場合もあると思います。その場合は、ショートコードに書く事も出来ます。

フォームを設置する固定ページに記載するContact Form 7のショートコードに、html_class=”h-adr” を付け足します。

[contact-form-7 id="数字" title="お問い合わせ"  html_class="h-adr"]
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX