【WordPress】カスタムフィールドの値を問い合わせフォームに渡す

ユーザーから問い合わせがあった場合に、サイト運営者としてはどのページを閲覧しての問い合わせかを知りたい場合があります。

また、フォーム改善の一環として閲覧したページの情報を問い合せフォームに埋め込み、メール等で受け取りたいということもあります。

その一例として、「Advanced custom fields」で作成したカスタムフィールドの値を、問い合わせフォームプラグインである「Contact Form 7」に渡してみます。

HTML→フォームタグ→メールという感じ

「Advanced custom fields」と「Contact Form 7」は両方とも超有名プラグインなので、情報は多くあります。

ただ、別プラグインなので、そのまま連携させることはできません。

やりたいことは値の受け渡しなので。

・カスタムフィールドを使用しているページにHTMLフォームを用意する
・「Contact Form 7」のショートコードを埋め込んだページに値を渡す

という流れになります。

やることは。

・HTMLフォームの用意
・「Contact Form 7」のタグ設定
・functions.phpで値を受け渡す関数を書く

という感じです。

これで問い合わせフォームにカスタムフィールドの値を渡し、メール送信することができます。

テンプレートファイルにHTMLフォームを用意する

表示するページの作りにもよるので詳しくは割愛しますが。

送信したいカスタムフィールドの値を利用しているページを表示するテンプレートファイル内に、値を受け渡すためのフォームを用意します。

例として、個別の店舗紹介ページの情報を渡すとしましょう。

<?php
//ページでも呼び出していると仮定して、変数に入れておきます。
$test_store = get_field( 'test-store' );
$test_address = get_field( 'test-adress' );
?>
<form action="<?php echo home_url(); ?>/渡したい問い合わせフォームのURL/" method="GET">
	<input type="hidden" value="<?php echo $test_store; ?>" name="test-store">
                <input type="hidden" value="<?php echo $test_address; ?>" name="test-address">
	<input type="submit" value="問い合わせる">
</form>

HTMLフォームのaction属性で指定するURLは、カスタムフィールドの受け渡し先となる「Contact Form 7」のショートコードが埋め込まれているページのURLにします。

そうじゃないと、関係の無いページに受け渡すことになってしまうので。

フォームの内容は閲覧している人には入力してもらう必要が無いので、type="hidden"で隠しますが、value値にカスタムフィールドの値を入れます。

カスタムフィールドの値をページのどこかで呼び出していると仮定して変数に入れてますが。

value値でget_field()を使っても大丈夫です。

なので画面上には「問い合わせる」のボタンだけ表示されます。

さて、ここで各inputで指定したname属性が大事なので。覚えておきましょう。

Contact Form 7のタグで受け取る準備

続いて、問い合わせフォームの準備をします。

「Contact Form 7」のフォームはタグを入れていくだけで作れるし、HTMLも使えるのでほんとに便利ですよね。

・・・まぁ自分に言われるまでも無いですが。

ここでは値を受け取るための準備をしていきます。

受け渡す値のところだけにしますが。

<!-- フォームに値を表示させて確認させる場合 -->
[text test-store readonly]

<!-- フォームに値を表示させる必要がない場合 -->
[hidden test-address]

フォームに指定したname属性でタグを作っておきます。

別でも良いですが、こちらの方が分かりやすいという個人的な印象です。

ユーザーに入力を求めないのであれば、確認の意味で入力不可のreadonlyにしておくのが良いでしょう。

また、確認の必要もないけど値を渡したい場合はhiddenも使用できます。

あとはメールタブで作成したタグを表示させたい箇所に挿入すればOKです。

functions.phpで受け渡す

値を渡すフォームと受け取るフォームの準備ができたので、functions.phpで渡しましょう。

HTMLフォームはGETで送信しているので$_GETで値を取得します。

「Contact Form 7」の各フォームの情報は$tagという配列の中に保管されているみたいなので、受け渡したいフォームはこちらを利用して指定します。

function ACF_to_CF7($tag){
     //test-storeの値を渡す
     if(isset($_GET['test-store'])){
	$name = $tag['name'];
	if($name == 'test-store'){
          $tag['values'] = (array) $_GET['test-store'];
        }
     }
     //test-addressの値を渡す
     if(isset($_GET['test-address'])){
	$name = $tag['name'];
	if($name == 'test-address'){
          $tag['values'] = (array) $_GET['test-address'];
        }
     }
   return $tag;
}
add_filter('wpcf7_form_tag', 'ACF_to_CF7');

'name’ラベルの値を取得し、それが問い合わせフォームに存在するなら、’value’値を受け渡された値にする。

それを「Contact Form 7」のフィルターフックwpcf7_form_tagで実行させます。

よく使うコードです

私自身がワードプレスのカスタマイズを始めるきっかけになったのが、「Contact Form 7」でした。

フォームからメール送信するという機能を利用して、いろんなことを試してみた記憶があります。

その中でも、投稿で使用したカスタムフィールドの値を始めとした投稿の情報を受け渡すという操作は、ちょこちょこ必要になることが多いです。

そんな時にはこのコードを利用しています。