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

この記事の公開年月日:  |   お問い合わせフォームの郵便番号欄が入力されたときに住所の一部(具体的には、都道府県以下から番地の前まで)を自動で表示しよう。  | この記事のURL: https://jp.rainbow-link.com/marketing_article77.htm

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

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

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

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

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

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

(4)(3)でコピペした内容のうち、次の黄色に塗られている部分を、御社独自の内容に変更します:

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

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

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

(5)/wp-content/plugins/allpost-contactform/allpost-contactform-str_replace.php を開き、次の内容を、

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

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

(6)(4)で「都道府県以降」を変更設定した場合は、(5)でコピペした内容のうち、次の黄色に塗られている「都道府県以降」を、(4)で変更設定したのと同じように変更設定します:

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

以上です!

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

html

css

このページのURL: https://jp.Rainbow-Link.com/marketing_article77.htm


jp.Rainbow-Link.com

株式会社レインボーリンク