質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 714

chiiiiii

score 23

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で、最新バージョンなのか下記の画面になり
どのように実装すればいいのかがわかりません。
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

ショートコード作成しました。
イメージ説明

実際のサイト画面はこちらです。
イメージ説明
コンタクトフォームの方にショートコードを貼り付けたりするのでしょうか?

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m6u

    2019/05/30 19:28

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

    キャンセル

  • CHERRY

    2019/05/30 19:30

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

    キャンセル

  • CHERRY

    2019/05/30 19:42 編集

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

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

    キャンセル

  • chiiiiii

    2019/05/30 20:27

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

    キャンセル

回答 1

checkベストアンサー

0

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


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 を追加しない場合は、動作しませんでした。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 17:02 編集

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

    キャンセル

  • 2019/05/31 17:04

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

    <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>

    キャンセル

  • 2019/06/03 10:38

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

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