重要 2024年1月4日以降のドロップインのご利用につきまして

確認画面付きお問い合わせフォーム「MW WP Form」プラグインを使って、どの回に参加するか等を1つのお問い合わせフォームで対応できるように、記事ページの投稿タイトルやカスタムフィールドの情報をメールフォームに引き継ぐ方法

こんにちは。コワーキングスペース7Fの星野邦敏です。

コワーキングスペース7Fで、月に1回の定期開催で、小学生・中学生向けのプログラミング教室を開催していまして、既に6カ月開催しているのですが、運営も淡々と行えるように体制も整ってきましたので、広く周知を目的としてWebサイトを作りました。
小学生・中学生向けプログラミング教室「CoderDojoさいたま」

小学生・中学生向けプログラミング教室「CoderDojoさいたま」

今まではFacebookイベントで参加者を募集していたのですが、これではそもそもFacebookをやっていないと知る手段が無いですし、子どもでも自分でインターネットで探して行動する積極的な子もいる中で、現状では意識の高い親が子どもを連れてくるケースが主となっている、など、半年運営して、そういった課題も感じました。

そこで、小学生・中学生向けプログラミング教室「CoderDojoさいたま」のWebサイト上でも、参加申込を出来るようにフォームを整えました。

今回はWordPressの確認画面付きお問い合わせフォーム「MW WP Form」プラグインを使って、お問い合わせフォームを作りました。

そこで、このWordPressの確認画面付きお問い合わせフォーム「MW WP Form」プラグインを使って、どの回に参加するか等を1つのお問い合わせフォームで対応できるように、記事ページの投稿タイトルやカスタムフィールドの情報をメールフォームの項目として引き継いで、URL引数を取得する方法をご紹介します。

もちろん毎回のイベント告知ページに都度お問い合わせフォームを付ける、ということも可能かと思いますが、それだと手間が掛かるかなということで、告知ページを作ったら自動的にフォームに飛ぶようにしました。

まずは、WordPressの確認画面付きお問い合わせフォーム「MW WP Form」プラグインをインストールして有効化します。

その後の設定ですが、管理画面のメニューに[MW WP Form]という項目ができますので、そこで[新規追加]でメールフォームを設定していきます。

まずは設定の全てを見てもらうために、小学生・中学生向けプログラミング教室「CoderDojoさいたま」での設定画面の全体のキャプチャを添付します。

小学生・中学生向けプログラミング教室「CoderDojoさいたま」

確認画面付きお問い合わせフォーム「MW WP Form」プラグインの使い方自体は、プラグイン作者の北島さんのWebサイトにマニュアルがあるのでそちらをご覧ください。
MW WP Form の使い方 | モンキーレンチ
MW WP Form – 柔軟なカスタマイズ性が魅力の WordPress 問い合わせフォームプラグイン。

ここでは、確認画面付きお問い合わせフォーム「MW WP Form」プラグインを使って、どの回に参加するか等を1つのお問い合わせフォームで対応できるように、記事ページの投稿タイトルやカスタムフィールドの情報をメールフォームの項目として引き継いで、URL引数を取得する方法について解説します。
コツは、以下の3点です。

(1)[MW WP Form]項目の右下にある「URL引数を有効にする」にチェックを入れる。
キャプチャ画像にもある通りで、
URL引数を有効にする
有効にした場合、MW WP FormはURL引数を取得します。また、URL引数 ”post_id” をもとに投稿を取得します。その投稿($post) のプロパティを使用できるようになります。
例:{ID}、{post_title}、{post_meta}など…
の部分にチェックを入れましょう。
これで、URL引数を取得することができます。
投稿記事タイトルだけでなく、カスタムフィールドに入れた項目なども引き継ぐことができるようです。

(2)メールフォームに遷移する前のページに以下のWordPressテンプレートタグを書く。
WordPressテーマのsingle.phpなど、メールフォームに遷移する前のページに、以下のようなテンプレートタグを書きましょう。
小学生・中学生向けプログラミング教室「CoderDojoさいたま」では、参加申込のページのみに、メールフォームへのリンクが見えるように、カスタム投稿タイプとしてのsingle-info.phpに書いていますが、例えば、カテゴリーの条件分岐としてin_category()などで条件分岐しても良いかなと思います。

<a href="<?php echo home_url( '/' ); ?>sanka/?post_id=<?php echo $post->ID ?>">参加申込をする人は、Facebookイベント、または、この参加申込フォームより申込ください。</a>

(3)メールフォームのvalueに{post_title}などと書く。
キャプチャ画像にある通りなのですが、
例えば、

<tr>
<td>CoderDojoさいたまに参加する回</td>
<td>[mwform_text name="CoderDojoさいたまに参加する回" value="{post_title}"]</td>
</tr>

などと書くと、その項目を前のページより引き継ぐことができます。

北島さんのマニュアルサイトを見ると、
hiddenフィールド(mwform_hidden)
が用意されていますので、どのページからの問い合わせなのか、表側に項目を出さずに送信することも可能です。
その場合には、以下のように書きます。

[mwform_hidden name="CoderDojoさいたまに参加する回hidden" value="{post_title}"]

以上です。

あとは、必須項目を作りたい等の場合は、それぞれの項目を[バリデーション設定を追加する]から追加したり等ができます。

この結果、例えば、
第7回CoderDojoさいたまは、2014年9月6日(土)15時から開催いたします。 | 開催日程 | 小学生・中学生向けプログラミング教室「CoderDojoさいたま」
のページの一番下にある
参加申込をする人は、Facebookイベント、または、この参加申込フォームより申込ください。
というリンクから飛ぶと、ページの情報を引き継ぐことが確認できます。

確認画面付きお問い合わせフォーム「MW WP Form」プラグインを使って、どの回に参加するか等を1つのお問い合わせフォームで対応できるように、記事ページの投稿タイトルやカスタムフィールドの情報をメールフォームに引き継ぐ方法

いやぁ、便利ですね!

合わせて、コワーキングスペース7Fで、月に1回の定期開催をしています、小学生・中学生向けのプログラミング教室「CoderDojoさいたま」もよろしくお願い致します!
小学生・中学生向けプログラミング教室「CoderDojoさいたま」