フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

WEB

WordPressプラグイン「Contact Form 7」でサイト内で生成した変数を送信する方法

2016年10月14日

Pocket

意外に知られていない(?)Contact Form 7で変数を送信する方法

某エンジニア系Q&Aサイトを覗いていたら、珍しく数時間回答されていない質問があったので、意外に知られていないのかなと思い記事にしてみました。

Contact Form 7とは

この記事を読んでいる人ならば今更説明する事はないと思うのですが、WordPressを使っている人なら知らない人はいないであろう、というほど超有名なコンタクトフォーム用プラグインです。

プラグイン内のフォームに入力事項を記述すればカンタンにコンタクトフォームが作れるプラグインですが、プラグイン内で完結していてフォーム内にjsも書けないので、変数を送信するには一手間必要になります。

具体的な用例

例えば不動産の物件検索サイトとかですね。
ユーザーが物件のページを閲覧した時、物件ページの下に問い合わせフォームがありますよね。
物件ページを見たユーザーが直接問い合わせができるように配慮した構成ですが、フォームは汎用性を持たせつつ管理者側では送信されたメールに物件名や物件IDなどを入れたい。

こういう場合にPHPやJSでページタイトルなどが代入された変数を送信できると便利になります。

カスタム方法

Contact Form 7が出力するhtmlを見る

まずはContact Form 7がショートコードで出力するhtmlを確認します。

基本的な設定ですと大体こんな感じになると思います。
次にContact Form 7のメール送信設定を見てみます。

こちらもデフォルトで使用するとおおよそこんな感じでしょう。

で、htmlと送信設定を見比べてみると分かると思いますが、form内にあるinputに入力された内容が同input内に書かれたnameの名前に[]が付けられたタグで紐づけされています。

ということは、サイト内でjsなりphpなりで生成された変数は、このform内に記述すればContact Form 7の送信メールに乗っけてもらえるということです。

記述

仕組みが分かればあとは簡単。
javascriptまたはjqueryでform内に追記するだけです。

変数がjsの場合

変数がphpの場合

表示する必要がないのでtype="hidden"にしてあります。
これでContact Form 7のメール送信設定で[hensu]を記述すれば変数が送信されます。

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT