WordPress Tips

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

2019-08-24

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

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

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

Welcart対応のオシャレで高機能テーマ

WordPressテーマ「ICONIC」

  • ショップロゴ表示可能なGoogleマップカスタムピンマーカー
  • ローディング画面
  • トップページニュースティッカー
  • レコメンド商品一覧表示機能、関連商品

    WordPressテーマ「GLAMOUR」

    • トップページを自由に構成できるコンテンツビルダー
    • レコメンド商品一覧表示機能
    • 画像つきメガグローバルナビゲーション2タイプ
    • ショップロゴ表示可能なGoogleマップカスタムピンマーカー
    • 固定ページテンプレート「CONCEPT」「ITEM RANKING」「投稿者一覧」
    • カスタム投稿タイプ「お知らせ」「特集記事」

    WordPressテーマ「EGO.」

    • 静止画、MP4、Youtubeに対応したトップページヘッダー
    • 画像付きメガグローバルナビゲーション
    • ローディング画面の設定機能
    • 固定ページテンプレート「ランディングページ」「ランキング」
    • カスタム投稿タイプ「お知らせ」

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

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

      [Contact Form 7] Welcart商品名を問い合わせ項目名として問い合わせフォームに引き継ぐ

      前回の内容、WordPressプラグイン[Contact Form 7]を使って、遷移前のページの値(記事タイトル・カスタムフィールド )を引き継いでフォームに表示する、というのと同じような内容ですが ...

      続きを見る

      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以上が必要

      -WordPress Tips
      -