コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法
2019年6月25日2021年10月17日

今回は久しぶりにコンタクトフォーム7についてのお話です。

普通に「お問い合わせフォーム」として使う場合、あらかじめ用意した入力枠や選択肢で事足ります。

しかし、「応募フォーム」だったり「お見積りフォーム」だったり、フォームの用途は様々です。場合によっては、フォームページへ移動してくる前の「遷移元」のページに合わせて、テキストフィールドのデフォルトの入力内容やチェックボックスなどの選択肢を動的に設定したい事も多いものです。ページごとに1つずつフォームを作成していくなんてナンセンスです!ありえません。

という事で今回は、コンタクトフォーム7の「デフォルトの入力内容」や「メール送信先」、「ラジオボタンなどの選択肢」など、さまざまな内容を遷移元のページに合わせて動的に設定する方法です。

遷移元のページからフォームページに情報を渡す

ベースとなる1つのフォームを使用して、選択肢やメールの送信先を動的に変えて行くには、遷移元のページから情報を渡してやればいいわけです。ここでは、POSTとGETの2通りの渡し方を記載します。

GETを使用する場合の渡し方

フォームに渡す内容がURLに表示されても構わない場合はGETでいいですね。

この場合はシンプルにフォームへのリンクURLを修正します。

フォームページへのリンクは、通常は上のようなHTMLになると思います。これを下のように書き換えます。

一応書いておきますが、”?”の後に「情報名=値」と記述し、複数ある場合は”&”で繋いでいきます。

POSTを使用する場合の渡し方

送信先メールアドレスを渡したい場合などは、URLに表示させたくないですよね。そんな時は渡し方がちょっと面倒ですが、POSTで渡します。

この場合は、フォームページへのリンク部分のソースを下のように置き換えます。

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”という名前のフィールドのデフォルト値に利用する場合のものです。

つまり、コンタクトフォーム7で下のようなテキスト枠を作っておけば、渡された”store_name”の値がデフォルト値として入力されます。

こういったケースでよく使うので書いておきましたが、コンタクトフォーム7では”readonly”と付け加えると、編集不可にする事ができます。渡したデフォルト値を編集されても構わなければ消してください。

利用したい値が複数ある場合

上のコードの6行目から11行目を一括りとして、利用する値が複数ある場合は追加していきましょう。

下の部分が一括りですが、「渡した情報の名前」と「コンタクトフォーム7のフォームパーツ名」の部分を書き換えて追加すればOKです。

セレクトボックスやラジオボタンなどの選択肢に利用する場合

テキストエリアにデフォルト値を入れるだけでなく、セレクトボックス(ドロップダウン)やチェックボックス・ラジオボタンの選択肢も渡された値を利用して動的に設定できます。

下のサンプルコードは、select_opt1~3までの値を受け取り、その値を元にコンタクトフォーム7の選択系フォームパーツを作るケースです。

つまり、下のようなドロップダウン(セレクトボックス)を作成しておけば、遷移元のページに合わせた選択肢が表示できます。

ラジオボタンでもチェックボックスでも基本的に同じようにできます。

また、やり方は様々ですが、たとえば下のように書いてしまえば1つの値に選択肢を全部入れてしまう事もできますね。

上のコードは、selectboxという名前で、セレクトボックスの選択肢を半角スペース区切りにして一度に渡した場合です。値を渡す段階で「選択肢1 選択肢2 選択肢3」という感じに半角スペース区切りに整形しておけば、こんな感じでもOKです。

フォームの送信先を遷移元のページに合わせて変更する場合

最後にメール送信先のアドレスを動的に変更したい場合です。受け取り方はテキストエリアなどの場合と同じです。

フォーム画面に表示させたくない場合がほとんどではないかと思います。こんな時のために、コンタクトフォーム7はhiddenフィールドにも対応しています。フォーム作成画面で下のように記述すると隠しフィールドが作成できます。

あとは、メールの設定画面で(上のコードの場合)store-emailを送信先にすればOKです。

最後に

やり方を毎回忘れてしまうので、よくやる形をまとめてみました。

こんな感じで遷移元のページデータを利用できると、フォームは用途ごとに1つだけ用意すればよく、とても便利です。

関連のある記事

コンタクトフォーム7でreCAPTCHA V3を導入する方法

コンタクトフォーム7でreCAPTCHA V3を導入する方法

記事を読む

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

記事を読む

コンタクトフォーム7にサンクスページを追加する方法

コンタクトフォーム7にサンクスページを追加する方法

記事を読む

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

記事を読む

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content

目次へ