WordPressプラグイン『All Post Contact Form』に住所の自動入力機能を付けよう！

当社が開発して無料で配布しているWordPressプラグイン『All Post Contact Form』でも、「住所の入力補助」は可能です。「サイト訪問者の入力の手間を省き、大切なお声に耳を傾けたい」というサイト運営者様のご希望や、「ユーザーのお問い合わせフォーム離脱率を低くしたい」というウェブ担様のご希望をかなえます。

それでは、早速「住所の自動入力機能」の作り方をご紹介しましょう。

（１）住所の自動入力補助には、次の外部のプログラムを利用します。

https://github.com/ajaxzip3/ajaxzip3.github.io

（２）お使いのテーマの header.php を開き、</head>の上に、次の行を追加します。

（３）WordPressの管理画面で「お問い合わせフォーム」ページを開き、現在の住所欄を消し、次の内容をコピペします。

（４）（３）でコピペした内容のうち、次の黄色に塗られている部分を、御社独自の内容に変更します：

• <label for="zip01" class="control-label">郵便番号<input type="text" name="zip01" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','pref01','addr01');" class="御社のスタイル"></label>
  <label for="pref01" class="control-label">都道府県<input type="text" name="pref01" class="御社のスタイル"></label>
  <label for="addr01" class="control-label">都道府県以降<input type="text" name="addr01" class="御社のスタイル"></label>

黄色に塗られている部分のうち、「御社のスタイル」の部分は、必ずご変更ください。特にスタイルを当てておられない場合は、空欄にしてください。

黄色に塗られている部分のうち、「都道府県以降」につきましては、「変更する必要がない」とお思いになるかたは、「都道府県以降」のまま、変更する必要はありません。

（５）/wp-content/plugins/allpost-contactform/allpost-contactform-str_replace.php を開き、次の内容を、

• 一番下の行、
• ?> の上、

に、コピペしてください。

（６）（４）で「都道府県以降」を変更設定した場合は、（５）でコピペした内容のうち、次の黄色に塗られている「都道府県以降」を、（４）で変更設定したのと同じように変更設定します：

• $key = str_replace("zip01","郵便番号", $key);
  $key = str_replace("pref01","都道府県", $key);
  $key = str_replace("addr01","都道府県以降", $key);

以上です！

「スタイルを作ってほしい」というリクエストを受け、３つの項目をテーブルに入れるスタイルを作成してみました。（2023年2月17日追記）

html

css