TL;DR
問い合わせフォームの中に、前ページの情報をデフォルトで埋め込んでおきたい、郵便番号を入力したら住所を取得して自動で入力させたい、そんなときに便利な WordPress プラグイン「MW WP Form」の使い方。
MW WP Form
WordPress の問い合わせフォームといえば「Contact Form 7」を使う人が多いかと思いますが、WordPress プラグインである「MW WP Form」を使うと、前のページの情報を引き継いで、フォーム内に埋め込んでおくことが簡単にできます。 例えば、カスタムポストに識別番号をカスタムフィールドで設定しておき、そのページから問い合わせフォームに遷移すると、問い合わせフォーム内に遷移前ページの識別番号を付与し、送信後もメールにその情報を送ることができます。 MW WP Form 他に以下のように、入力画面と確認画面の URL を別にするなどの便利な機能があります。
- バリデーション
- ハイフン区切りの電話番号・郵便番号
- 確認画面・完了画面（サンクスページ測定）・エラー画面 URL の設定
- ページ遷移前の情報を引き継げる
- 問い合わせデータを保存・ダウンロードできる
- 郵便番号入力ライブラリと組み合わせ可能である
取得できる情報
パラメータ（?post_id=投稿 ID）をつけておけば、以下のように$post - 投稿情報の戻り値をショートコードで取得できます。カスタムフィールドの値は{カスタムフィールド名}のようにそのまま記述します。
作成者:{post_author}
投稿日時:{post_date}
カテゴリー:{post_category}
スラッグ:{post_name}
投稿タイプ:{post_type}
カスタムフィールドの値:{カスタムフィールド名}
編集画面で「URL 引数を有効にする」にチェックを入れると、?post_id=投稿 ID 付きで表示したさいに、投稿のタイトルやカスタムフィールドの値を取得できます。 フォームへ遷移する前の投稿ページのループ外に、問い合わせフォームへのパラメータを付与しましょう。「xxxx」の箇所はフォームを設置したパラメータを入れる。例えば、お問い合わせページの URL が contact だったら、「xxxx」は contact にする。
<a href="<?php echo esc_url(home_url('/')); ?>xxxx?post_id=<?php echo $post->ID ?>">お問い合わせ</a>
郵便番号で住所を自動入力する機能
MW WP Form に郵便番号で住所を自動入力する機能をつけたいので、郵便番号入力ライブラリである、yubinbangoを使います。 ※ 2021/12/21 追記： 最新バージョンの WordPress で、郵便番号の自動入力が動かない場合は、WordPress の デフォルト jQuery を削除し、jQuery のバージョンを上げると動く場合がある。
functions.php
デフォルト jQuery を削除
function delete_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
}
}
add_action('init', 'delete_jquery');
header.php jquery-1.12.4 を wp_head() の上に記述。
<!-- 郵便番号自動入力対応 jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
functions.php で追加します。
// MW WP Form
function register_jquery() {
wp_enqueue_script(
'yubin-js',
'https://yubinbango.github.io/yubinbango/yubinbango.js',
array(),
null,
true
);
wp_enqueue_script('yubin-js');
}
add_action('wp_enqueue_scripts', 'register_jquery');
管理画面の中で form にクラス名を付与しても、自動で削除されてしまうので、form タグにクラス名（h-adr）を付与するために、functions.php でクラス名を変更します。これで form にクラス名が付与され、正常に動作するようになります。
// MW WP Form の form 部分の class を設定できるようにショートコードの引数を追加
function mwform_form_class() {
?>
<script>
jQuery(function($) {
$( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
});
</script>
<?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );
`MW WP Form で出力される内にクラスを指定したい | WordPress.org
フォーム埋め込み
「MW WP Form」をインストール後、新規作成でフォーム編集画面に移動し、以下のように記述します。取得番号の箇所に書いてある{mw-wp-form}は、カスタムフィールドで設定したものを記述すればよいです。
<span class="p-country-name" style="display:none;">Japan</span>
<table class="contact-table">
<tbody>
<tr>
<th>お名前</th>
<td>[mwform_text name="name" size="60"]</td>
</tr>
<tr>
<th>取得番号</th>
<td>[mwform_text name="mw-wp-form" size="60" value="{mw-wp-form}"]</td>
</tr>
<tr>
<th>取得タイトル</th>
<td>[mwform_text name="title" size="60" value="{post_title}"]</td>
</tr>
<tr>
<th>郵便番号</th>
<td>[mwform_text name="yubin-number" class="p-postal-code" size="60"]</td>
</tr>
<tr>
<th>都道府県</th>
<td>[mwform_text name="todoufuken" class="p-region p-locality p-street-address p-extended-address" size="60"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[mwform_text name="email" size="60"]</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>[mwform_textarea name="message" cols="60"]</td>
</tr>
<tr>
<th></th>
<td>[mwform_submitButton name="mwform_submitButton-772" class="btn" confirm_value="確認画面へ" submit_value="送信する"]</td>
</tr>
</tbody>
</table>
これで、郵便番号を入力するだけで住所が自動表示されます。 ショートコード一覧
自動返信メール
編集画面で、自動返信メール設定と管理者宛てメールに以下を追加。
お名前：{name}
取得番号：{mw-wp-form}
取得タイトル：{title}
郵便番号：{yubin-number}
住所：{your-address}
メールアドレス：{email}
お問い合わせ内容：{message}
お客様へ送る、自動返信メールのところには、この場合「email」と入力してください。以上、WordPress プラグイン「MW WP Form」の使い方と住所自動入力の設定方法でした。`