ワードプレス コンタクト7 郵便番号から住所を自動入力させる方法/Web ブラウザで表示される 郵便番号入力画面の form の HTML

Question

https://olein-design.com/blog/contact-form-7-with-yubinbango

こちらのサイトを元に実装しました。
ですがウンともすんとも言いません。

外観のテーマエディターのなかのfunction.phpに下記を実装しました。

そしてお問い合わせのコンタクトフォームに

こちらを実装しました。

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号<br />
    [text your-zipcode class:p-postal-code minlength:8 size:8]</p>

<p>住所<br />
    [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</p>

固定ページへショートコード html_class="h-adr"追加ついて
現在使用しているワードプレスのバージョンが5.11で、最新バージョンなのか下記の画面になり
どのように実装すればいいのかがわかりません。

ショートコード作成しました。

実際のサイト画面はこちらです。

コンタクトフォームの方にショートコードを貼り付けたりするのでしょうか？

他の参考サイトも実装したのですがうまくいきませんでした。。
コメントお待ちしております。

Comments

[退会済みユーザー]

質問タグにWordPressを足してください。

[CHERRY]

WordPress 固有の質問と思いますので、WordPress タグを質問を編集して追加していただけないでしょうか？

[CHERRY]

また、Web ブラウザで表示される 郵便番号入力画面の form の HTML を質問に追記していただけないでしょうか。

ショートコード周りの記載がないので、確認ですが、
https://olein-design.com/blog/contact-form-7-with-yubinbango の「formタグにh-adrクラスを設定する」の部分は対応されていますか？

[chiiiiii]

WordPressのタグがなく質問できなかったのでphpとさせていただきました。

Answer 1

動作確認取れたので回答欄で...

---

https://olein-design.com/blog/contact-form-7-with-yubinbango
こちらのサイトを元に実装しました。
ですがウンともすんとも言いません。

こちらのサイトを参考に実装しました。
問題なく動作しました。

functions.php に追加

wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

フォームの定義

固定ページにショートコード ( 旧エディタ )

固定ページにショートコード ( Gutenbergエディタ )


左上の + をクリックして、ウィジェットにある「ショートコード」を選択します。(1枚目)
ショートコードの入力欄に　Contact Form 7 のショートコードを記載します。

実行結果

(キャプチャーではわかりませんが、郵便番号の最後の1桁をいれると住所がでます。)

---

質問でショートコード周りが確認できなかったのですが、 https://olein-design.com/blog/contact-form-7-with-yubinbango の「formタグにh-adrクラスを設定する」部分に記載されている

ここに、html_class="h-adr"という記述を加えて、
[contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"]
としてあげることによって、formタグにclassを追加することができます。

は、実施されているでしょうか？

この class を追加しない場合は、動作しませんでした。

Comments

[chiiiiii]

そちらが追加できない状態です。
今フォームを実装しているのはお問い合わせのコンタクトフォームです。
固定ページを新規作成すると最新バージョンなのか、いただいたキャプチャと異なります。
どこに実装すればよろしいのかがわからないです。。。

[CHERRY]

あ、ブロックエディタを使用されているのですね。
帰ったら、キャプチャーを追加します。

[chiiiiii]

CHERRYさん
質問追加と固定ページについて編集いたしましたのでご確認のほどご教授お願いいたします。

[chiiiiii]

ご親切にありがとうございます。
よろしくお願いいたします。

[CHERRY]

Gutenberg エディタの入力画面を追加しました。

[chiiiiii]

追加したのですが、自動出力してくれないです。。
ショートコードを追加した場合公開ボタンを押したあとは
お問い合わせのコンタクトフォームのショートコードへ変更されるのでしょうか？

[chiiiiii]

CHERRYさん
実装画面とサイトの仕様の画像追加いたしました。
ご返信お待ちしております。。。

[CHERRY]

質問に記載されているフォームのコードと実際の画面と書かれているキャプチャーのフォームの内容が異なるようですが、画面キャプチャーのフォームにクラスは追加されていますか？

[chiiiiii]

初心者でよくわかってないのですが
実際のサイトの画像は、ワードプレス管理画面の左側の外観の上にあるお問い合わせのコンタクトフォーム1がそのままサイトに記載されているという状態です。
そしてお問い合わせのコンタクトフォーム1にはhtml_class="h-adr"をショートコードに入れ込めないです。

[chiiiiii]

そのコンタクトフォームに記載されているのは現在下記になります。

<span class="p-country-name" style="display:none;">Japan</span>
<tr>
<th align="left">ご住所</br>郵便番号</th>
<td>[text your-zipcode class:p-postal-code minlength:8 size:8]</td>
</tr>
<tr>
<th align="left">都道府県</th>
<td>[text your-address1 class:p-region class:p-locality class:p-street-address class:p-extended-address]</td>
</tr>
<tr>
<th align="left">市区町村</th>
<td>[text your-address2 class:p-locality] </td>
</tr>
<tr>
<th align="left">番地・建物名</th>
<td>[text your-address3 class:p-street-address class:p-extended-address] </td>
</tr>

[chiiiiii]

CERRYさんのおかげで無事郵便番号自動出力できました。
ありがとうございました。