ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

カスタムフィールド(Toolset Types)の内容をメールフォーム(MW WP Form)に渡す@WordPress

カスタムフィールドに入力された値(内容)を申し込み等のメールフォームに引き渡したい場合があります。

例えば、前回作ったカスタムフィールド。

blog.showzine.co

これはセミナー開催情報の詳細です。

そのセミナーに申し込みたいと訪問者が思った時に「お申込み先」をメールフォームで用意。(前回の実装例では申し込みは直接メールアドレスにメールを送信する形でした)

カスタムフィールドに登録されている開催日時やマップ、講師名、会場等の情報がお申込みフォームに引き渡され、申し込みを送信するとその内容(カスタムフィールドの内容含む)が自動送信メールで送信されると、申し込んだ人があとでセミナー情報詳細の投稿を確認しにいかなくて済みます。

この実装方法のほうがより実際の現場ではスマートで利便性も高まるかと思います。

引き続きWordPressのプラグイン「Toolset Types」と、メールフォームのプラグイン「MW WP Form」を使用しての実装例です。複数の編集、設定画面、テンプレートを縦横無尽にめぐるので長いです。

MW WP Formの導入についてはこちらで紹介しています。

blog.showzine.co

実装における環境

WordPress:4.5.2
Toolset Types:2.1
MW WP Form:2.8.2

申し込みフォームを作る(MW WP Form)

まず申し込みフォームを作ります。申し込みにあたって必要な項目を網羅します。

今回は

  • お名前
  • よみがな
  • メールアドレス
  • メールアドレス(確認)
  • 住所
  • 電話番号
  • その他(質問等あれば)

で作成します。

既存のメールフォームを複製して利用する

新規にゼロからフォームを作成してもいいのですが、相応に時間と労力がかかります。ここでは以前の実装例で作成した汎用的な「お問合せ」を利用することにします。(今回必要な項目を網羅していることもあるので)

プラグイン「Duplicate Post」を利用します。

f:id:showjinx:20160704153345p:plain

このプラグインは既存の投稿、固定ページ、メールフォーム等を簡単に複製することが出来ます。

プラグインを「プラグイン>新規追加」から「Duplicate Post」で検索してインストールし有効化します。(このへんの手順=プラグインの検索、インストール、有効化、も「MW WP Form」の紹介のときに触れていますので、必要な場合は参照してください)

f:id:showjinx:20160704153530p:plain

プラグイン「Duplicate Post」を有効化してから「MW WP Form」でフォームの一覧を確認すると、既存のフォームに「複製」という項目が追加されています。(複製したいフォームのタイトルにマウスをホバーすると現れます)

f:id:showjinx:20160704153542p:plain

複製を実行するとこのように、それとわかるように表示され(ー 下書き)、複製されます。

f:id:showjinx:20160704153602p:plain

この複製された「お問合せ」を使って、セミナーへの申し込みのためのフォームを別に作ります。

この「お問合せー 下書き」の編集画面に進み、タイトルを「セミナー申し込み」とします。

あとは「お問合せ」で作成した項目や自動返信メールの設定、内容、完了画面メッセージ等を確認して、必要に応じて適宜変更します。

とくに自動返信メールの件名や本文は「セミナー申し込み用」に最適化するといいかと思います。

また、MW WP Formのフォーム識別子もここで控えておきます。(後から確認するのでも構いません)

f:id:showjinx:20160704153627p:plain

保存の前に、「設定」でオプションを指定します。

編集画面右側の下のほうにある「設定」にある「URL引数を有効にする」にチェックを入れます。これを利用することで、投稿(カスタム投稿タイプ「セミナー情報の投稿」から投稿された)の情報を取得出来るようになります。

f:id:showjinx:20160704153640p:plain

ここでは「問い合わせデータをデータベースに保存」も有効化しました。こうしておくと、あとで「あ、あの申込者さんの申し込み、どうだったっけ?」となったときに助かります。

投稿タイトルとカスタムフィールドの値を引き渡す

引き続きMW WP Formで作った「セミナー申し込み」フォームの編集画面での作業です。

申し込み時に申込者がセミナー名やセミナーの詳細情報を確認し、自動返信メールでその内容も受信出来るように、投稿タイトルとカスタムフィールドの内容をフォームに追加します。(下記のコードは投稿タイトル、カスタムフィールド部分だけです、それ以外の部分はここまでの関連投稿を参照ください)

<tr>
    <th>セミナー名</th>
    <td>[mwform_hidden name="セミナー名" value="{post_title}" echo="true"]</td>
</tr>
<tr>
    <th>受講費</th>
    <td>[mwform_hidden name="受講費" value="{wpcf-fee}" echo="true"]</td>
</tr>
<tr>
    <th>講師</th>
    <td>[mwform_hidden name="講師" value="{wpcf-lecturer}" echo="true"]</td>
</tr>
<tr>
    <th>開催日時</th>
    <td>[mwform_hidden name="開始日時" echo="true"]</td>
</tr>
<tr>
    <th>会場住所</th>
    <td>[mwform_hidden name="会場住所" value="{wpcf-prefecture}{wpcf-address}" echo="true"]</td>
</tr>
<tr>
    <th>会場名</th>
    <td>[mwform_hidden name="会場名" value="{wpcf-place}" echo="true"]</td>
</tr>
<tr>
    <th>備考</th>
    <td>[mwform_hidden name="備考" value="{wpcf-remarks}" echo="true"]</td>

自動返信メールにも、追加したカスタムフィールドに入力した値を出力するための記述を追加します。

【セミナー名】
{セミナー名}

【受講費】
{受講費}

【講師】
{講師}

【開催日時】
{開始日時}

【会場住所】
{会場住所}

【会場名】
{会場名}

【備考】
{備考}

フォームを保存します。

functions.php

また、申し込みフォームへ、投稿から開始日時を引き渡すために下記のコードを使用しているテーマのfunctions.phpに追加します。

関数「my_mwform_value_entry」を作成し、投稿がもつ「開始日時」を指定、開始日時のカスタムフィールドのスラッグを指定し、年月日と時間の出力形式を指定します。

最後にアクションフックでフォームの識別子を指定するのを忘れないように。

/* 投稿から申し込みフォームへの引き渡し
============================================= */
/**
 * my_mwform_value_entry // セミナーへのお申込み
 * @param string  $value valueの初期値
 * @param string  $name name属性値
 */
function my_mwform_value_entry( $value, $name ) {
    if ( !empty( $_GET['post_id'] ) && $name === '開始日時' ) {
        $start = get_post_meta( $_GET['post_id'], 'wpcf-start', true );
        if ( $start ) {
            return date( 'Y年m月d日H時i分', $start );
        }
    }
    return $value;
}
add_filter( 'mwform_value_mw-wp-form-23', 'my_mwform_value_entry', 10, 2 ); /* フォーム識別子を合わせること

セミナー申し込み用の固定ページを作る

フォームの内容は作りましたが、これを表示するものがまだありません。

お問合せフォームのときと同様に、固定ページで作ります。

「固定ページ>新規追加」から。(これもDuplicate Postを使って複製してもいいです)

f:id:showjinx:20160704154112p:plain

1で固定ページの名称を入力。

2でパーマリンクを変更。この場合は「entry」に設定。

3でフォーム(セミナー申し込み)のフォーム識別子をショートコードで入力。

4で使用するテンプレートを指定。(お問合せフォームを作った時の汎用的なテンプレートをここでも使ってます)

5で公開。

single.php(投稿)にフォームへのリンク先を追加する

single.php(この例ではカスタム投稿「セミナー情報の投稿」用に専用のsingle-seminar.phpを作成)に以下を記述します。

    <?php
        echo '<tr><th>お申込み</th><td><a href="' .  home_url('/') . 'entry/?post_id=' . $post->ID . '">こちらからお申込みください</a></td></tr>';
    ?>

「entry」の部分が、この「セミナーお申込み」用に作った固定ページのパーマリンクなので、ここは必要に応じて適宜合わせてください。これが間違ってるともちろん、連携(投稿>申し込みフォームへの)しません。

作業対象(single-seminar.php)についてはこちらの投稿における「フロント側に出力する」の部分が詳しいです。ここで説明している「お申込み」部分のソースが書き換わっています。

blog.showzine.co

これで一通り完成です。

投稿画面

前回の投稿(カスタムフィールドの)では直接のメールリンクだった「お申込み」部分が、今回追加した申し込みフォームへのリンク文字列(前述のコードに記述した)に変わっています。

リンク先は投稿IDを保持していて、それを引き継いで申し込みフォームへ引き渡されます。(/entry以下の部分がそれです)

f:id:showjinx:20160704154208p:plain

セミナー申し込み画面

投稿が持つカスタムフィールドの値を引き継いで、この申し込みフォーム画面に遷移したことが確認できます。セミナー名は投稿タイトル、それ以外の受講費から備考まではカスタムフィールドが持つ値です。

f:id:showjinx:20160704154248p:plain

自動返信メール

投稿から申し込みフォームへの遷移を確認したら実際に申し込んでみます。

送信し、指定した受信先と、申し込みの際に入力した申込者のメールアドレスへの自動返信メールを確認してみます。

f:id:showjinx:20160704154302p:plain

このようにお問合せフォーム(実装例で紹介した)に、セミナー詳細情報用に用意したカスタムフィールドの内容、投稿(セミナーの)のタイトルが引き渡されて自動返信メールでも送信されていることが確認できます。

サイト側への自動送信メールも同様です。

自走返信、送信メール内の記述を間違えないように注意してください。私がよくやるのは、name属性の値を間違えて記述することです。ここが合っていないと、当然データは渡されず空白になります。

最後に

けっこう長くなりましたが、以上でカスタム投稿タイプ、カスタムフィールドを使った投稿の内容を引き継いでメールフォーム(申し込み)へ繋げる実装例でした。

この例ではセミナーですが、例えば簡易的なネットショップにも応用できるかと思います。投稿を商品紹介ページとして、そこから商品情報を引き渡して購入メールというふうに。

本格的な規模感、機能が必要なネットショップであればEC-CUBEや、WordPressならWelcartのようなプラグインで作るのがいいかと思いますが、そこまでの規模ではない、まずは小さくはじめてみたいというような場合には十分使えるかと思います。