【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」でした。
フォームからメール送信するという機能を利用して、いろんなことを試してみた記憶があります。
その中でも、投稿で使用したカスタムフィールドの値を始めとした投稿の情報を受け渡すという操作は、ちょこちょこ必要になることが多いです。
そんな時にはこのコードを利用しています。
ディスカッション
コメント一覧
まだ、コメントがありません