calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

WordPressプラグイン「MW WP Form」の使い方と住所自動入力

  • 作成：2018/12/25
  • 更新：2018/12/27
  • WordPress

問い合わせフォームの中に、前ページの情報をデフォルトで埋め込んでおきたい、郵便番号を入力したら住所を取得して自動で入力させたい、そんなときに便利なWordPressプラグイン「MW WP Form」の使い方。

PR
IT/WEB業界への転職なら
Sponsored Link

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を使います。

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カスタマイズに便利なテクニック一覧

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。