WordPressプラグイン「MW WP Form」の使い方と住所自動入力(郵便番号で動かない場合)
問い合わせフォームの中に、前ページの情報をデフォルトで埋め込んでおきたい、郵便番号を入力したら住所を取得して自動で入力させたい、そんなときに便利なWordPressプラグイン「MW WP Form」の使い方。
エンジニア速報は Twitter の@commteで配信しています。
MW WP Form
WordPressの問い合わせフォームといえば「Contact Form 7」を使う人が多いかと思いますが、WordPressプラグインである「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」の使い方と住所自動入力の設定方法でした。
WordPressカスタマイズに便利なテクニック一覧
- [開発環境] WordPressをコマンドでインストールする
- [開発環境] Vagrant+Virturlbox+VCCWの使い方
- [雛形] WordPressのif文(条件分岐)
- [雛形] 便利なテンプレートタグ
- [構築] functions.phpに書いておくべきこと
- [構築] パンくずリストを出す方法
- [構築] コメントを設置する簡単な方法
- [管理画面] プラグインの自動更新通知メールを停止させる
- [管理画面] 管理画面のユーザーページに項目を追加する
- [管理画面] カスタムポストを追加する
- [翻訳] 多言語サイトを作るプラグイン「bogo」の使い方
- [フォーム] 「MW WP Form」の使い方と住所自動入力
- [関連記事] プラグインを使わずにWordPressで関連記事を出す方法
- [SEO] タイトルのカスタマイズ
- [pre_get_posts] カテゴリページや検索結果の表示を調整
スポンサード リンク
関連記事
- WordPressプラグインの自動更新通知メールを停止させる
- WordPress:pre_get_postsを用いてカテゴリページや検索結果の表示を調整する
- WordPress:タイトルを自在にカスタマイズする方法
- プラグインを使わずにWordPressで関連記事を出す方法
- WordPressでカスタムポストを追加するシンプルな方法
- WordPress管理画面のユーザーページに項目を追加する
- よく使うWordPressのif文(条件分岐)まとめ
- WordPressでパンくずリストを出す方法
- WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ
- WordPressのfunctions.phpに書いておくと捗ること
Leave a Comment