タイトル通りですが、ページのタイトルやカスタムフィールド の値をContact Form 7に引き渡して、フォームに表示させて送信する方法です。
イベント・セミナーなどの申し込み、不動産の問い合わせ、商品についての問い合わせなどに活用できるかと思います。
Contact Form 7に渡すのはGETまたはPOST、どちらでも可能ですが今回はPOSTで渡す方法です。
タイトル、カスタムフィールドの値をPOSTで取得してContact Form 7に渡す、完成イメージ
完成イメージとして、以下のようなページフォームを用意します。
イベント情報は、以下のような項目になっています。
- 「イベントタイトル（記事タイトル）」
- 「会場（カスタムフィールド ）」
- 「開催日（カスタムフィールド ）」
- 「開催時間（カスタムフィールド ）」
参加申し込みボタンをクリックすると、フォームにページの情報が渡され、イベント名・会場名・日時が引き継がれるイメージです。
Contact Form 7に値を渡す手順
以下のような手順でページからContact form 7に値を渡します。
- カスタムフィールドを設定（Advanced Custom Fields）
- テーマテンプレートを作成（PHP）
- Contact Form 7でフォームを作成
- Contact Form 7のメール設定
- functions.php編集（PHP）
1. カスタムフィールドを設定（Advanced Custom Fields）
まず特定の情報をフォームへ渡すために、タイトル以外はカスタムフィールドを設定します。カスタムフィールドはAdvanced Custom Fields（以下ACF）を設定します。
上記のような形でカスタムフィールドを設定していますが、フォームに渡すのは以下の3つのフィールドです。
| フィールドラベル | フィールド名 | フィールドタイプ |
|---|---|---|
| 会場 | ev_place | テキスト |
| 開催日 | ev_day | 日付選択ツール |
| 開催時間 | ev_time | テキスト |
2.テーマテンプレートを作成（PHP）
イベント情報を表示するテーマファイルを作成します。イベント情報を載せるのが、投稿ページの場合はsingle.php、固定ページの場合はpage.phpをカスタマイズします。
本記事ではpage-event.phpという固定ページ用テンプレートを作成して、ページでテンプレートを選択するようにします。
<?php
/*
Template Name:イベントページ用
*/
?>イベント情報として掲載するのは以下のようにしました。
<div class="event-item" itemprop="articleBody">
<div class="event-item__thumb">
<?php $thumb = get_field('ev_ph');
$size = 'medium';
if($thumb){
echo wp_get_attachment_image($thumb,$size);
}
?>
</div>
<div class="event-item__body">
<dl class="event-item__summary">
<?php
// 会場
if(get_field('ev_place')) :
$ev_place = get_field('ev_place');
?>
<dt>会場</dt>
<dd><?php echo esc_html($ev_place); ?></dd>
<?php endif; ?>
<?php // 開催日時
if(get_field('ev_day')) :?>
<dt>開催日時</dt>
<dd><?php
$date = get_field('ev_day', false, false);
if($date){
$date = new DateTime(date('Y-m-d', strtotime($date)));
// 曜日の配列
$week = array('日', '月', '火', '水', '木', '金', '土');
// 'w'フォーマットで曜日インデックスを取得
$w = $date->format('w');
// Y年m月d日形式で表示し、曜日を追加
$ev_date = $date->format('Y年m月d日') . ' (' . $week[$w] . ')';
echo esc_html($ev_date);
}
endif;
$ev_time = get_field('ev_time');
echo ' '.esc_html($ev_time);
?>
</dd>
<dt>定員</dt>
<dd>
<?php if( get_field('ev_capacity') ):
echo esc_html( get_field('ev_capacity') );
endif;
?>
</dd>
<dt>会費</dt>
<dd>
<?php if( get_field('ev_fees') ):
echo esc_html( get_field('ev_fees') );
endif;
?>
</dd>
</dl>
<?php /* hiddenで申込フォームにイベント名を渡す */ ?>
<form action="<?php echo esc_url(get_permalink(get_page_by_path('entry-form')->ID)); ?>" method="post">
<input type="hidden" name="title" value="<?php echo esc_attr(get_the_title()); ?>">
<input type="hidden" name="ev_place" value="<?php echo esc_attr($ev_place); ?>">
<input type="hidden" name="ev_day" value="<?php echo isset($ev_date) ? esc_attr($ev_date) : ''; ?>">
<input type="hidden" name="ev_time" value="<?php echo esc_attr($ev_time); ?>">
<input type="submit" value="参加申し込み" class="event-item__button button expanded">
</form>
</div><!-- /.event-item__body-->
</div>
開催日から曜日を自動的に表示するように設定しています。
ACFの日付フィールド設定でも、戻り値の形式「Y年m月d日」を指定することができます。
公式Date Picker
formタグのactionにはフォームを設置するURL、固定ページでスラッグを[entry-form]としています。
<form action="<?php echo esc_url(get_permalink(get_page_by_path('entry-form')->ID)); ?>" method="post">hidden項目で、「参加申込」ボタンを押した際に渡す値を設定します。ここで指定したname属性をContact Form 7のフォームに指定します。
<input type="hidden" name="title" value="<?php echo esc_attr(get_the_title()); ?>">
<input type="hidden" name="ev_place" value="<?php echo esc_attr($ev_place); ?>">
<input type="hidden" name="ev_day" value="<?php echo isset($ev_date) ? esc_attr($ev_date) : ''; ?>">
<input type="hidden" name="ev_time" value="<?php echo esc_attr($ev_time); ?>">3. Contact Form 7でフォームを作成
次にContact Form 7でイベント申し込みフォームを作成します。
イベント名、会場、開催日時をイベントページから取得しますので、readonlyを付加します。
- イベント名：
[text title readonly] - 会場：
[text ev_place readonly] - 開催日時：
[text ev_day size:20 readonly] [text ev_time size:20 readonly]
<fieldset class="form-item">
<legend>お申し込みイベント</legend>
<h2 class="form-item__header"><span>イベント名：</span>[text title readonly]</h2>
<dl class="form-item__summary">
<dt>会場</dt>
<dd>[text ev_place readonly]</dd>
<dt>開催日時</dt>
<dd>[text ev_day size:20 readonly] [text ev_time size:20 readonly]</dd>
</dl>
</fieldset>
<fieldset>
<legend>お申し込み内容</legend>
<label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<p> 性別
[radio radio-gender use_label_element default:1 "男性" "女性"]
</p>
<label>備考欄 (任意)
[textarea your-message rows:3] </label>
</fieldset>
[submit class:button-send "送信"]4. Contact Form 7のメール設定
フォームを作成したら、送信内容を受け取るためにメール設定をします。
【申し込みイベント】
イベント名：[title]
開催場所：[ev_place]
開催日時：[ev_day] [ev_time]
【お申し込み内容】
氏名：[your-name]
メールアドレス:[your-email]
性別： [radio-gender]
備考欄:
[your-message]
5. functions.phpに設定
最後にfunctions.phpに、Contact Form 7のwpcf7_form_tagフックでイベントページからフォームへ渡す値を設定します。
function mycf7_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_POST['title'])){
$name = $tag['name'];
if($name == 'title')
$tag['values'] = (array) $_POST['title'];
}
if(isset($_POST['ev_place'])){
$name = $tag['name'];
if($name == 'ev_place')
$tag['values'] = (array) $_POST['ev_place'];
}
if(isset($_POST['ev_day'])){
$name = $tag['name'];
if($name == 'ev_day')
$tag['values'] = (array) $_POST['ev_day'];
}
if(isset($_POST['ev_time'])){
$name = $tag['name'];
if($name == 'ev_time')
$tag['values'] = (array) $_POST['ev_time'];
}
return $tag;
}
add_filter('wpcf7_form_tag', 'mycf7_tag_filter');以上でイベント情報が申込フォームに引き渡されると思います。
参考：Contact Form 7で用意されているメールタグ
Contact Form 7で用意されているメールタグを使うと申し込み内容以外の情報も取得できます。
投稿ページの情報
投稿ページそれぞれに問い合わせフォームを設置してたりする場合、どのページからの問い合わせなのかを判断するのに役立ちます。
※サイドバーや、テンプレートファイルに設定されているフォームは判別できません。投稿コンテンツ内部に設置している時のみとのこと。
| [_post_id] | 投稿ID |
| [_post_name] | 投稿スラッグ |
| [_post_title] | 投稿タイトル |
| [_post_url] | 投稿のパーマリンクURL |
| [_post_author] | 投稿の作成者名 |
| [_post_author_email] | 投稿作成者のメールアドレス |
サイト情報
サイトの基本情報を取得できます。自動返信メールに挿入するのが便利そうですね。
| [_site_title] | サイトのタイトル |
| [_site_description] | サイトの説明文 |
| [_site_url] | サイトのホームページURL |
| [_site_admin_email] | サイトの管理者ユーザーのメールアドレス |
送信情報
フォームの送信情報関連です。こちらはフォーム送信メールに挿入する内容ですね。スパムやセキュリティ対応に必要になる場合があります。
| [_remote_ip] | 送信者の IP アドレス |
| [_user_agent] | 送信者のユーザーエージェント |
| [_url] | コンタクトフォームが設置されているページの URL |
| [_date] | 送信の日付 |
| [_time] | 送信の時刻 |
| [_invalid_fields] | 不正な入力のあった入力項目の数 |
| [_serial_number] | シリアルナンバーを付与できる 別途、Flamingo1.5以上が必要 |
