[Contact Form 7] 投稿ページのタイトルや情報を取得してフォームの項目に表示する

タイトル通りですが、投稿記事のタイトルやカスタムフィールド の値をContact Form 7に引き渡して、フォームにデフォルトで表示させるには。

イベント・セミナーなどの予約申し込み、不動産の問い合わせ、商品についての問い合わせなどに有効ですね。

タイトルやカスタムフィールド の値をPOSTで取得してContact Form 7に渡す

値を取得してContact Form 7に渡すのはGET,POSTどちらでも可能ですが今回はPOSTでhiddenタグを使う場合を

DEMO:
イベント募集の投稿ページから
「イベントタイトル(投稿タイトル)」
「開催場所(カスタムフィールド )」
「開催日時(カスタムフィールド )」

の値をContact Form 7に渡します。

イベントページ例

上記のようなイベントページから「参加申込」ボタンをクリックすると以下の予約フォームに値が渡されます

予約申し込みフォーム

テーマテンプレートPHPを設定

イベント情報を表示するテーマファイルを設定します。イベント情報を載せるのは投稿ページでも固定ページでも好きな場所でOKです。

イベント情報として掲載するのは以下のようにしました。

  • イベントタイトル(記事タイトル)
  • イベント会場(カスタムフィールド: place )
  • イベント開催日(カスタムフィールド : day )
  • イベント開催時間(カスタムフィールド : time)

カスタムフィールド はAdvanced Custom Fieldsプラグインを利用する想定です。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
				
	<header class="article-header">	
		<h3 class="entry-title" itemprop="headline"><?php the_title(); ?></h3>
    </header>
    <div class="entry-content" itemprop="articleBody">
    	<div class="row">
    		<div class="entry-thumb">
    			<?php $thumb = get_field('ph');
    					$size = 'eventthumb';
    					if($thumb){
    						echo wp_get_attachment_image($thumb,$size);
    					}
	 ?>
   </div>
<div class="entry-body">
<dl class="evsummary">
	<?php if(get_field('place')) : ?>
	<dt>会場</dt>
		<dd><?php echo get_field('place'); ?></dd>
	<?php endif;
		if(get_field('day')) :?>
		<dt>開催日時</dt>
		<dd><?php 
$date = get_field('day', false, false);
$week = array('日', '月', '火', '水', '木', '金', '土');
$w = get_field('day');

$date = new DateTime($date);
$w = $date->format('w');

$kdate = $date->format('Y年n月j日').'('.$week[$w].')';
$time = get_field('time');

$datetime = $kdate.' '.$time;
echo $datetime;
 ?>

<?php /* hidden項目で申込フォームにイベント名を渡す */ ?>
 <form action="<?php echo get_permalink(get_page_by_path('entryform')->ID); ?>" method="post">
<input type="hidden" name="title" value="<?php echo the_title(); ?>">
<input type="hidden" name="place" value="<?php the_field('place',$post->ID); ?>">
<input type="hidden" name="daytime" value="<?php echo $kdatetime; ?>">

<input type="submit" value="参加申し込み" class="button expanded alert">
</form>
  </div><!-- /.entry-body-->
</div><!-- /.row -->
</div> <!-- end article section -->
</article> <!-- end article -->

イベント日時から曜日を自動的に表示するように設定しています。

formタグのactionにはフォームを設置したページURL、今回は固定ページでスラッグを[entryform]としています。

get_permalink(get_page_by_path('entryform')->ID);

「参加申込」の送信ボタン直前にあるhidden項目で、送信ボタンを押した際に渡す値を設定。

<input type="hidden" name="title" value="<?php echo the_title(); ?>">
<input type="hidden" name="place" value="<?php the_field('place',$post->ID); ?>">
<input type="hidden" name="daytime" value="<?php echo $kdatetime; ?>">

Contact Form 7でフォームを作成

Contact Form 7でイベント申し込みフォームを作成します。

イベント名、会場、開催日時をイベントページから取得しますので、readonlyを付加します。classは任意で。

<div class="row">
	<div class="columns">
		<div class="target-ev">
			<h3><span>イベント名:</span>[text title class:readonly class:disp_title readonly]</h3>
			<div class="row">
			<dl>
				<dt>会場</dt>
				<dd>[text place class:readonly readonly]</dd>
				<dt>開催日時</dt>
				<dd>[text daytime class:readonly readonly]</dd>
			</dl>
			</div>
		</div>
	</div>
</div><!-- /.row -->

<div class="row">
	<div class="columns">
		<label for="your-name">
			お名前<span class="require">(必須)</span>
			[text* your-name placeholder "お名前"]
		</label>
		<label for="your-name">
			ふりがな<span class="require">(必須)</span>
			[text* your-kana placeholder "ふりがな"]
		</label>
	</div>
</div><!-- /.row -->
<div class="row">
	<div class="submitwrap">
[submit class:button class:expanded class:alert "この内容で送信する"]
</div>
</div>

ここで設定した項目名は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['place'])){
    $name = $tag['name'];
    if($name == 'place')
      $tag['values'] = (array) $_POST['place'];
  }
  if(isset($_POST['kdaytime'])){
    $name = $tag['name'];
    if($name == 'kdaytime')
      $tag['values'] = (array) $_POST['kdaytime'];
  }
  return $tag;
}
add_filter('wpcf7_form_tag', 'mycf7_tag_filter');

以上でイベント情報が申込フォームに引き渡されると思います。これらの設定は以下のサイトを参考にさせていただきました。

あらかじめ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以上が必要