コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法
今回は久しぶりにコンタクトフォーム7についてのお話です。
普通に「お問い合わせフォーム」として使う場合、あらかじめ用意した入力枠や選択肢で事足ります。
しかし、「応募フォーム」だったり「お見積りフォーム」だったり、フォームの用途は様々です。場合によっては、フォームページへ移動してくる前の「遷移元」のページに合わせて、テキストフィールドのデフォルトの入力内容やチェックボックスなどの選択肢を動的に設定したい事も多いものです。ページごとに１つずつフォームを作成していくなんてナンセンスです！ありえません。
という事で今回は、コンタクトフォーム7の「デフォルトの入力内容」や「メール送信先」、「ラジオボタンなどの選択肢」など、さまざまな内容を遷移元のページに合わせて動的に設定する方法です。
～ 目次 ～
遷移元のページからフォームページに情報を渡す
ベースとなる1つのフォームを使用して、選択肢やメールの送信先を動的に変えて行くには、遷移元のページから情報を渡してやればいいわけです。ここでは、POSTとGETの2通りの渡し方を記載します。
GETを使用する場合の渡し方
フォームに渡す内容がURLに表示されても構わない場合はGETでいいですね。
この場合はシンプルにフォームへのリンクURLを修正します。
|
1 |
<a href="https://example.com/contact/">フォーム</a> |
フォームページへのリンクは、通常は上のようなHTMLになると思います。これを下のように書き換えます。
|
1 |
<a href="https://example.com/contact/?store_id=953&store_name=ド○・キホーテ">フォーム</a> |
一応書いておきますが、”?”の後に「情報名=値」と記述し、複数ある場合は”&”で繋いでいきます。
POSTを使用する場合の渡し方
送信先メールアドレスを渡したい場合などは、URLに表示させたくないですよね。そんな時は渡し方がちょっと面倒ですが、POSTで渡します。
この場合は、フォームページへのリンク部分のソースを下のように置き換えます。
|
1 2 3 4 5 |
<form action="http://example.com/contact/" method="post"> <input type="hidden" name="store_name" value="ド○・キホーテ"> <input type="hidden" name="store_email" value="mail@example.com"> <input type="submit" value="フォーム"> </form> |
1行目のURLはフォームを設置したページのURLに書き換えます。
また、上の例ですと”store_name”と”store_email”という2つの情報を送信していますが、nameとvalueを書き換えて追加していけば、必要な数の情報が渡せます。
遷移元から渡した値をフォームページで利用する方法
遷移元のページから情報を渡せたら、次はフォームページで受け取ってコンタクトフォーム7で利用できるようにしましょう。こちらは使用中のテーマのfunctions.phpに追記していきます。
いくつかコードを載せますが、すべてPOSTで送信された値を受け取るように書いてあります。URLパラメータを付けてGETで渡した場合には、コード中の$_POSTを、すべて$_GETに書き換えればOKです。
テキスト（エリア）にデフォルト値を入れる場合
下のサンプルコードは、遷移元からPOSTで送信されたstore_nameという名前の情報を、コンタクトフォーム7の”store-name”という名前のフィールドのデフォルト値に利用する場合のものです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function my_form_tag_filter($tag){ if ( ! is_array( $tag ) ){ return $tag; } if(isset($_POST['store_name'])){ $name = $tag['name']; if($name == 'store-name'){ $tag['values'] = (array) $_POST['store_name']; } } return $tag; } add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11); |
つまり、コンタクトフォーム7で下のようなテキスト枠を作っておけば、渡された”store_name”の値がデフォルト値として入力されます。
|
1 |
[text store-name readonly] |
こういったケースでよく使うので書いておきましたが、コンタクトフォーム7では”readonly”と付け加えると、編集不可にする事ができます。渡したデフォルト値を編集されても構わなければ消してください。
利用したい値が複数ある場合
上のコードの6行目から11行目を一括りとして、利用する値が複数ある場合は追加していきましょう。
下の部分が一括りですが、「渡した情報の名前」と「コンタクトフォーム7のフォームパーツ名」の部分を書き換えて追加すればOKです。
|
1 2 3 4 5 6 |
if(isset($_POST['渡した情報の名前'])){ $name = $tag['name']; if($name == 'コンタクトフォーム7のフィールド名'){ $tag['values'] = (array) $_POST['渡した情報の名前']; } } |
セレクトボックスやラジオボタンなどの選択肢に利用する場合
テキストエリアにデフォルト値を入れるだけでなく、セレクトボックス（ドロップダウン）やチェックボックス・ラジオボタンの選択肢も渡された値を利用して動的に設定できます。
下のサンプルコードは、select_opt1～3までの値を受け取り、その値を元にコンタクトフォーム7の選択系フォームパーツを作るケースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function my_form_tag_filter($tag){ if ( ! is_array( $tag ) ){ return $tag; } if(isset($_POST['select_opt1'])){ $name = $tag['name']; if($name == 'selectbox'){ $tag['values'][] = $_POST['select_opt1']; } } if(isset($_POST['select_opt2'])){ $name = $tag['name']; if($name == 'selectbox'){ $tag['values'][] = $_POST['select_opt2']; } } if(isset($_POST['select_opt3'])){ $name = $tag['name']; if($name == 'selectbox'){ $tag['values'][] = $_POST['select_opt3']; } } return $tag; } add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11); |
つまり、下のようなドロップダウン（セレクトボックス）を作成しておけば、遷移元のページに合わせた選択肢が表示できます。
|
1 |
[select selectbox] |
ラジオボタンでもチェックボックスでも基本的に同じようにできます。
また、やり方は様々ですが、たとえば下のように書いてしまえば1つの値に選択肢を全部入れてしまう事もできますね。
|
1 2 3 4 5 6 7 8 9 |
if(isset($_POST['selectbox'])){ $name = $tag['name']; if($name == 'selectbox'){ $workSelectOptions=explode(' ',trim($_POST['selectbox'])); foreach($workSelectOptions as $s){ $tag['values'][] = $s; } } } |
上のコードは、selectboxという名前で、セレクトボックスの選択肢を半角スペース区切りにして一度に渡した場合です。値を渡す段階で「選択肢１ 選択肢２ 選択肢３」という感じに半角スペース区切りに整形しておけば、こんな感じでもOKです。
フォームの送信先を遷移元のページに合わせて変更する場合
最後にメール送信先のアドレスを動的に変更したい場合です。受け取り方はテキストエリアなどの場合と同じです。
フォーム画面に表示させたくない場合がほとんどではないかと思います。こんな時のために、コンタクトフォーム7はhiddenフィールドにも対応しています。フォーム作成画面で下のように記述すると隠しフィールドが作成できます。
|
1 |
[hidden store-email] |
あとは、メールの設定画面で（上のコードの場合）store-emailを送信先にすればOKです。
最後に
やり方を毎回忘れてしまうので、よくやる形をまとめてみました。
こんな感じで遷移元のページデータを利用できると、フォームは用途ごとに１つだけ用意すればよく、とても便利です。
