質問: https://olein-design.com/blog/contact-form-7-with-yubinbango こちらのサイトを元に実装しました。 ですがウンともすんとも言いません。 外観のテーマエディターのなかのfunction.phpに下記を実装しました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7f9def1f87b26bf47548bb4b8946c02a.png) そしてお問い合わせのコンタクトフォームに ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/aad2323816e9101c2cedb64e3d3cc126.png) こちらを実装しました。 ``` Japan 郵便番号 [text your-zipcode class:p-postal-code minlength:8 size:8] 住所 [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address] ``` 固定ページへショートコード html_class="h-adr"追加ついて 現在使用しているワードプレスのバージョンが5.11で、最新バージョンなのか下記の画面になり どのように実装すればいいのかがわかりません。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e8519c59547fa2c82d1054d6462da33d.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c18c4131cfcff7b9f85e18dd61e32b07.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f71e7f8b5636f59929acdb662b18f822.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7b339a31e33b15c659b1c4171a4b5db6.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1bd7d864a3eb5f467c6dad882a62c1a4.png) ショートコード作成しました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/82538c68a7c333a59992ea473ab9e1d7.png) 実際のサイト画面はこちらです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7dc2f5fb6a1871dbbd71a41ea82368e4.png) コンタクトフォームの方にショートコードを貼り付けたりするのでしょうか? 他の参考サイトも実装したのですがうまくいきませんでした。。 コメントお待ちしております。
回答: 動作確認取れたので回答欄で... > > > > こちらのサイトを元に実装しました。 > > ですがウンともすんとも言いません。 > > > こちらのサイトを参考に実装しました。 問題なく動作しました。 functions.php に追加 ``` wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true ); ``` フォームの定義 !イメージ説明 固定ページにショートコード ( 旧エディタ ) !イメージ説明 固定ページにショートコード ( Gutenbergエディタ ) !イメージ説明 !イメージ説明 左上の + をクリックして、ウィジェットにある「ショートコード」を選択します。(1枚目) ショートコードの入力欄に Contact Form 7 のショートコードを記載します。 実行結果 !イメージ説明 (キャプチャーではわかりませんが、郵便番号の最後の1桁をいれると住所がでます。) 質問でショートコード周りが確認できなかったのですが、 の「formタグにh-adrクラスを設定する」部分に記載されている > > ここに、html_class="h-adr"という記述を加えて、 > > [contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"] > > としてあげることによって、formタグにclassを追加することができます。 > > > は、実施されているでしょうか? この class を追加しない場合は、動作しませんでした。