ホームページの閲覧者が商品情報ページからお問い合わせページに移動した時に、問い合わせフォーム( Contact Form7 )に移動元の商品名の情報を渡したいケースがあると思います。そんなケースに対応する簡単なカスタマイズ方法を解説します。

概要

URLにパラメータをつける

商品ページから問い合わせページに移動する時に、ボタンのリンク先は問い合わせページのURLだけでなくパラメーターのついたURLで移動します。お問い合わせページのURLが https://vektor-inc.co.jp/contact-item/ だった場合、

https://vektor-inc.co.jp/contact-item/?productName=LightningPro

というようなURLになるようにします。

STEP
1

パラメーターから値を受け取る

問い合わせページ側でこのproductNameLightningProであるという情報を受け取って、その情報をContact Form 7 が受け取るようにします。

STEP
2

実装

問い合わせフォームへのリンクボタンの作成

リンクボタンはphpのテンプレートをカスタマイズしてボタン部分を埋め込むか、JavaScriptで処理するかなど、いくつかの手法があります。

[ A案 ] phpのテンプレートファイルをカスタマイズする

子テーマなどの場合はあまりテンプレートファイルを変更してしまうと、親テーマのバージョンアップでの仕様変更で動作がおかしくなったり、新規追加された機能がカスタマイズしたページでは効かなくなるなどの弊害につながるので、あまり推奨でないのですが、受託で案件専用テーマなどの場合は手っ取り早くテーマファイルに直書きする事ができます。

<a href="<?php echo home_url() . '/contact-item/?productName=' . esc_attr( get_the_title() ); ?>" class="btn btn-primary">この商品について問い合わせる</a>

[ B案 ] ボタン用のショートコードを作る

Aの手法はphpのテンプレートファイルをカスタマイズしないといけないので、あまりおすすめしていません。代替案としてショートコードでボタンを作る手法を紹介します。

まずは以下のようなコードを子テーマの functions.php などに記述します。

// ショートコード[product_btn]を登録
add_shortcode( 'product_btn', 'my_product_btn' );
// [product_btn] を返す関数
function my_product_btn(){
	// 問い合わせフォーム先のURL
	$url = home_url() . '/contact-item/?productName=' . get_the_title();
	// 問い合わせボタンを返す
	return '<div class="text-center"><a href="'.esc_url( $url ).'" class="btn btn-primary">この商品について問い合わせる</a></div>';
}

ショートコードを登録したら商品ページに貼り付けます。

[ C案 ] JavaScript でリンク先URLに自動でパラメータを追加する

若干トリッキーですがJavaScriptを使って、

  1. ページ内の要素から商品名を取得する
  2. 問い合わせページへのボタンのリンク先URLに商品名を追加する

というやり方もあります。

まず、商品ページに配置する問い合わせフォームへリンクするボタンを作成します。普通にボタンブロックなどで作成すればかまいません。
その際に識別用にcssクラスを指定します。ここでは url_throw というクラス名にしています。

商品名(ページタイトル)をボタンのリンク先に追加するコード

子テーマの functions.php などに書くコードのサンプルです。

function lightning_pass_item_form() {
	?>
	<script type='text/javascript'>
		document.addEventListener('DOMContentLoaded', function () {
			// ページのタイトルの要素( h1.entry-title )を取得
			const title = document.querySelectorAll("h1.entry-title")[0].textContent;
			// ターゲットのボタンのリンクタグ( .url_throw a )を指定
			const targetBtn = document.querySelectorAll('.url_throw a');
			// ボタンのURLを取得
			const url = targetBtn[0].getAttribute('href');
			// 元のURLにフォームに投げるパラメーターを追加する
			const newUrl = url + '?productName=' + title;
			// ボタンのリンク先を書き換え
			targetBtn[0].setAttribute('href', newUrl);
		});
	</script>
	<?php
}
add_action( 'wp_footer', 'lightning_pass_item_form' );

このコードはLightningを前提に書いているので、商品名(投稿名)が表示されている部分のセレクタは h1.entry-title としていますので、他のテーマの場合はテーマで商品名が表示されている箇所のセレクタ名に書き換えてください。

ボタンのcssクラス名は先程 url_throw を設定しました。今回利用したボタンブロックは クラス url_throw がついた div の中にaタグが入るので、.url_throw a としていますが、こちらも自分の設置したボタン部分のHTMLを考慮して必要に応じて変更してください。

A / B / C どの手法でもかまいませんので、ボタンが設置できたらボタンのリンク先が

/contact-item/?productName=LightningPro

のようにリンク元ページの情報がついている事を確認してください。

フォームの設定

まずはお問い合わせフォームを設定します。商品名入力欄をここでは productName というフィールド名で指定します。

商品名<small class="text-danger">(必須)</small>
[text* productName]

公開画面側のフォームはこんな感じです。

自動で値が入るように Contact Form 7 のフックに登録

次にURLについているパラメーターを Contact Form 7 が自動で受け取るように設定します。

子テーマのfunctions.phpなどに以下を貼り付けてください。

function my_form_tag_filter( $tag ) {
	if ( ! is_array( $tag ) ) {
		return $tag;
	}

	// productNameの値を受け取ってContactFormに投げる
	// 複数のパラメーターを受け取る場合は if (){} 部分を複製してパラメーター名を変更すればOK
	if ( isset( $_GET['productName'] ) ) {
		$name = $tag['name'];
		if ( $name == 'productName' ) {
			$tag['values'] = (array) $_GET['productName'];
		}
	}

	return $tag;
}
add_filter( 'wpcf7_form_tag', 'my_form_tag_filter', 11 );

これで元ページのボタンをクリックすると…

こんな感じで受け取る事ができます。

ボタンを自動で表示する

A 以外の場合は商品ページ毎にボタンを設置しないといけないわけですが面倒ですよね。

VK All in One Expansion Unit を使っている方はCTA機能を使うと自動で配置できます。

まずはCTAにお問い合わせボタンを新規登録します。

CTA登録画面

次に、ExUnitのメイン設定が面で、表示させたい投稿タイプに指定すれば、公開画面の本文下部に自動的に表示されます。

CTAメイン設定画面

[ D案 ] 画面遷移不要じゃね?

ここまで来て「何もこんな回りくどい事しなくても商品ページの下にフォームがあって商品名が入ってればいいんじゃね?」と思ってしまいました。こういう事です。

これで良い場合は今まで子テーマのfunctions.phpに書いていたものはすべて消去して下記に差し替えます

function my_form_tag_filter( $tag ) {
	if ( ! is_array( $tag ) ) {
		return $tag;
	}
	// 商品情報の投稿タイプ名が「products」の場合
	if ( get_post_type() === 'products' ) {
		$name = $tag['name'];
		if ( $name == 'productName' ) {
			$tag['values'] = (array) esc_html( get_the_title() );
		}
	}
	return $tag;
}
add_filter( 'wpcf7_form_tag', 'my_form_tag_filter', 11 );

そして Contact Form 7 のショートコードを製品ページの下に貼るか、CTAに登録すればOKです。

Follow me!

この記事を書いた人

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2019 WordCampNiigata セッションスピーカー
2019 WordCampHaneda セッションスピーカー
2018 WordCampOsaka セッションスピーカー
2017 WordCampKyoto セッションスピーカー

初心者でも簡単!無料WordPressテーマ

100%GPL / 商用利用可能

Lightning は WordPress公式ディレクトリに登録されているカスタマイズ性の高いテーマです。
デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

VWSオンラインコミュニティー

オンラインコミュニティでは、より良いテーマ・プラグイン開発のため、機能改善・追加要望などの書き込み大歓迎です!
ユーザー同士の交流や意見交換の場としてもお気軽にご参加ください。
※質問はフォーラムでのみ対応となります。