閉じる
  1. Exec-PHP WPでPHPを使用する時
閉じる
閉じる
  1. Contact Form7
  2. ワードプレスの引っ越しで画像が表示されない時の対処法
  3. WordPressやプラグインのアップデート後に不具合が起きた時の対策…
  4. ワードプレスの記事引っ越し手順
  5. Cocoonのテーマにて日付表示を非表示にする方法
  6. サーチコンソールのカバレッジのエラーの対処法
  7. Invisible reCaptcha の設定
  8. for文 PHPでの繰り返し処理
  9. while文 PHPでの繰り返し処理
  10. foreach文 PHPでの繰り返し処理
閉じる

ワードプレスとスマホで稼ぐアフィリエイト戦略

Contact Form7

(必須)

メールアドレスの確認用入力と一致チェック機能をつける

問い合わせフォームで最も大事な入力項目はメールアドレスですね。
このメールアドレスの誤入力を未然に防ぐために、フォームにメールアドレス入力欄を2つ設けて、一致した場合にOKとするやり方があります。
これをContact Form 7でやってみるとこうなります。

テーマのfunctions.phpに以下を記述。

add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_confrim', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_confrim', 11, 2 );
function wpcf7_validate_email_filter_confrim( $result, $tag ) {
    $type = $tag['type'];
    $name = $tag['name'];
    if ( 'email' == $type || 'email*' == $type ) {
        if (preg_match('/(.*)_confirm$/', $name, $matches)){ //確認用メルアド入力フォーム名を ○○○_confirm としています。
            $target_name = $matches[1];
                $posted_value = trim( (string) $_POST[$name] ); //前後空白の削除
                $posted_target_value = trim( (string) $_POST[$target_name] ); //前後空白の削除
            if ($posted_value != $posted_target_value) {
                $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
            }
        }
    }
    return $result;
}

そして、管理画面のメニュー「問い合わせ」(Contact Form 7 の登録ページ)で

<tr>
<th>メールアドレス <span class="required">必須</span></th>
<td>[email* your-email]</td>
</tr>
<tr>
<th>メールアドレス確認 <span class="required">必須</span></th>
<td>[email* your-email_confirm placeholder "確認のためもう一度入力してください"]</td>
</tr>

メールアドレスの部分をこんな感じにして登録します。
「メールアドレス確認」の項目名は「メールアドレス」の項目名のうしろに ‘_confirm’ を付けたした名称にします。

 

Contact Form 7で郵便番号から住所を自動入力(zipaddr-jp)

zipaddr-jpプラグインのインストール

「プラグイン」‐「新規追加」メニューからzipaddr-jpプラグインをインストール、有効化します。

zipaddr-jpプラグインのインストール
zipaddr-jpプラグインのインストール

「設定」‐「zipaddr-jp」メニューで動作設定できますが、ひとまず初期設定のまま進めます。

zipaddr-jpプラグインの設定画面
zipaddr-jpプラグインの設定画面

設定内容は以下のページも参考にしてください。

zipaddr-jpプラグインのページ

Contact Form 7との連携

メールフォーム作成プラグイン「Contact Form 7」とzipaddr-jpプラグインを連携する方法を紹介します。すでにContact Form 7を使って簡単な問い合わせフォームを作ったことがある方を想定して説明します。

「問い合わせ」‐「コンタクトフォーム」メニューから、レイアウトを変更したいフォームの「編集」をクリックして編集画面を開きます。

メールフォームのレイアウトを変更
メールフォームのレイアウトを変更

「郵便番号」「都道府県」「市区町村」用のタグを作成

「フォーム」タブでメールフォームのレイアウト(タグ)を確認して、「郵便番号」「都道府県」「市区町村」を追加する場所をイメージしましょう。ここでは、「メールアドレス」と「メッセージ本文」の間に追加しますが、基本的には好きな場所で大丈夫です。

郵便番号などを追加する場所をイメージ
郵便番号などを追加する場所をイメージ

「郵便番号」「都道府県」「市区町村」を設定するためのテキストボックスを作成します。ポイントは各項目のidを次のように設定することです。

  • 郵便番号 — zip
  • 都道府県 — pref
  • 市区町村 — city
  • 町域 — addr

具体的なタグの例を以下に紹介します。

<p>郵便番号 (必須)<br />
    [text* zip id:zip] </p>

<p>都道府県 (必須)<br />
    [text* pref id:pref] </p>

<p>市区町村 (必須)<br />
    [text* city id:city] </p>

<p>それ以降の住所 (必須)<br />
    [text* addr id:addr] </p>

各項目のidが合っていれば、ピッタリ同じレイアウトにする必要はありません。

これらのタグは「フォーム」タブで作成することもできます。

このタグを「フォーム」タブの適当な場所(例:「メールアドレス」と「メッセージ本文」の間)に入力します。

郵便番号関係のタグを追加
郵便番号関係のタグを追加

このフォームの表示イメージは次のようになります。

郵便番号などを追加したフォーム
郵便番号などを追加したフォーム

市区町村以降の住所を1つにまとめる場合

「それ以降の住所」(addr)を省略して市区町村と1つにまとめることもできます。

<p>郵便番号 (必須)<br />
    [text* zip id:zip] </p>

<p>都道府県 (必須)<br />
    [text* pref id:pref] </p>

<p>市区町村以降の住所 (必須)<br />
    [text* city id:city] </p>

表示結果は次のようになります。

郵便番号・都道府県・市区町村~のイメージ
郵便番号・都道府県・市区町村の3パーツにまとめた例

送信メールのメッセージ本文の組み立て

上記の作業と一緒に「メール」タブの「メッセージ本文」の修正を忘れないようにしましょう。入力した住所をメール本文に反映するために必要です。

メールのメッセージ本文に住所を反映させる
メールのメッセージ本文に住所を反映させる

組み立てた住所のタグは次のようになります。

郵便番号:[zip]
住所:[pref][city]

1行にまとめることもできます。

住所:[zip] [pref][city]

市区町村と町域を分ける場合は次のようになります。

郵便番号:[zip]
住所:[pref][city][addr]

好きなフォーマットのタグを「メッセージ本文」に入力しておきましょう。これで、メールに郵便番号と住所が入ってくるはずです。たとえば、次のようになります。

メール本文に入ってくる住所のイメージ
メール本文に入ってくる住所のイメージ

作成したフォームの動作確認

レイアウトを変更した問い合わせフォームを表示して郵便番号を入力すると、連動して住所(都道府県と市町村)が自動で入力されるはずです。

郵便番号に連動して住所が自動入力される
郵便番号に連動して住所が自動入力される

自動入力された途中までの住所を入力してもらう手間が省けるのでスムーズな問い合わせや成約の増加に役立ちます。

メールを送信すると、次のように住所が入ってきます。

メール本文に含まれる住所
メール本文に含まれる住所

住所を1行にまとめた場合は「住所:113-0022 東京都文京区千駄木3-10-6」のようにフォーマットされます。

まとめ

このようにzipaddr-jpプラグインを使うと、入力した郵便番号と連動して住所が自動で入力されるフォームを作成することができます。住所の入力が必要な申し込みフォームや問い合わせフォームを作成している方はお試しください。

プラグインの使い方など詳しくは、こちらをご覧ください。

WordPressと住所自動入力のZipAddrを連携させるプラグインzipaddr-jp

関連記事

  1. Invisible reCaptcha の設定

  2. ワードプレスの便利なプラグイン(1)

  3. サーチコンソールのカバレッジのエラーの対処法

  4. WordPressやプラグインのアップデート後に不具合が起きた時…

  5. 絶対に入れておきたいプラグイン

  6. Exec-PHP WPでPHPを使用する時

おすすめ記事

  1. Exec-PHP WPでPHPを使用する時
ページ上部へ戻る