WordPressプラグイン『All Post Contact Form』に住所の自動入力機能を付けよう！
※本内容は、2026年10月24日まで https://jp.rainbow-link.com/marketing_article77.htm にて表示していた記事『WordPressプラグイン『All Post Contact Form』に住所の自動入力機能を付けよう！』を、FAQ内に移設したものです。
設定手順
（１）住所の自動入力補助には、次の外部のプログラムを利用します。
https://github.com/yubinbango/yubinbango
（２）ダウンロードしてできた『yubinbango-gh-pages.zip』を解凍します。解凍ファイルのなかの「yubinbango.js」を、お使いのテーマの中にアップロードします。そして、お使いのテーマの header.php を開き、</head>の上に、次の内容をコピペします。
御社/あなたの「お問い合わせ受付ページ」 が、「投稿ページ」の場合
<script src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/yubinbango.js" charset="UTF-8"></script>
<?php } ?>
御社/あなたの「お問い合わせ受付ページ」 が、「固定ページ」の場合
<script src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/yubinbango.js" charset="UTF-8"></script>
<?php } ?>
（３）（２）でコピペした内容のうち、次の黄色に塗られている部分を、御社/あなたの「お問い合わせ受付ページ」のスラッグ（slug）に変更します：
（４）WordPressの管理画面で「お問い合わせフォーム」ページを開き、現在の住所欄を消し、次の内容をコピペします。
〒<input name="郵便番号" type="text" class="p-postal-code" size="8" maxlength="8"><br>
<input name="所在地" type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
このhtmlに、デザインを当ててみましょう。
▼html
<div class="apcf-container_inner">
<div class="apcf-container_content">
<div class="apcf-content-key">所在地</div>
<div class="apcf-content-value">
<span class="p-country-name" style="display:none;">Japan</span>
<div class="postalcode"><div class="postalcode1">〒</div><div class="postalcode2"><input name="郵便番号" type="text" class="p-postal-code"></div>
<input name="所在地" type="text" class="p-region p-locality p-street-address p-extended-address">
</div>
</div><!-- /apcf-container_content -->
</div><!-- /apcf-container_inner -->
</div><!-- /apcf-container -->
▼css
width: 100%;
}
.postalcode1 {
float: left;
max-width:1.5em;
}
.postalcode2 {
float: left;
max-width:15em;
}
.main_contact #do_yubinbango input[type="text"]{
margin-bottom: 1.8em;
width: 100%;
line-height: 2.6;
}
（５）投稿ページまたは固定ページの「お問い合わせ」ページを開き、<formタグに次の黄色の部分を書き足しましょう。
以上です！
実物デモ
このページの記載内容の実物デモは、こちらです。
( 2026/11/02, 22:22:50, JST )
