目次
WordPressプラグイン Contact Form 7でどのページからの問い合わせなのか判別したい
WordPressで最も有名で人気のあるお問い合わせフォームプラグイン【Contact Form 7】
入力項目が同じお問い合わせフォームへのリンクが複数ある場合、どのようにしたらいいか悩んだので調べてみました。
- 何のページからお問い合わせに繋がったのか？
- ページ内に複数あり、どの位置のリンクからのコンバージョンなのか？
- どの商品ページからのお問合わせなのか？
- どのイベントからのお問合わせなのか？
- どのサービスからのお問合わせなのか？
- 何に関してのお問合わせなのか？
- ユーザーが入力や選択する項目を極力少なくしたい！
入力項目が同じお問い合わせフォームを何個か作成したい場合には、
WordPress管理画面から【お問い合わせ】＞【コンタクトフォーム】を開き、一覧を表示。
複製したい項目にカーソルを合わせ、「複製」で同じ入力項目で同じメール内容のお問い合わせフォームが作成できます。
複数の入力項目が同じお問い合わせフォームを作成する問題点
お問い合わせフォームが2,3ヶ所程度なら、複製でも問題ないと思います。
ただ、商品やイベント、サービス、プログラムなど、数が多く、どんどん増えていくものに対して、個別にフォームを配置するには「複製」では対応しきれません。
さらに、入力項目や送信メール内容を変更したい場合に、複数のお問い合わせフォームを全てを同じように変更するのは大変な労力がかかります。
かといって、ひとつのフォームを使いまわしで、ユーザーに商品名などを書き込ませたり・ドロップダウンから選ばせたりすると、手順が増えて離脱率が上がってしまうでしょう。
入力項目やメール内容が同じなのに、何個もお問い合わせフォームを作成するのは非効率！
なら、どうしたらいいのか？
参考にさせて頂いた記事
Contact Form 7 でURLパラメーター付けて、GETで値を渡す方法
仮に、商品ページごとのお問い合わせフォームで商品名が判別できるよう設定していきます。
- URLに付与するパラメーター名: product
- パラメーターの値を取得するフォーム名: product-name
仮の値として、productとproduct-nameを使います。任意の文字列なので、自身で決めてください。
function.php 側の設定
関数を追記します。
編集するファイルは、contact-form-7の中にあるfunction.phpです。
または、テーマ内のfunction.phpでも大丈夫です。
後者の方が関数をまとめて管理できるので良いと思います。
ただ、通常のテーマは作成者が新しいバージョンを配信しアップデートすると、テーマ内ファイルが上書きされます。
子テーマを使用しておくことをお勧めします。
子テーマの導入と親テーマへの継承について
編集するファイルの位置
|
1 2 |
/wp-content/plugins/contact-form-7/includes/function.php /wp-content/themes/テーマ名/function.php |
以下のコードをコピーして、プラグインとテーマ内どちらかのfunction.phpの一番下の行へ貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Contact Form 7 URLパラメーター取得 関数 function my_form_tag_filter($tag){ if ( ! is_array( $tag ) ) return $tag; if(isset($_GET['product'])){ $name = $tag['name']; if($name == 'product-name') $tag['values'] = (array) $_GET['product']; } return $tag; } add_filter('wpcf7_form_tag', 'my_form_tag_filter'); //Contact Form 7 URLパラメーター取得 関数 |
上記のコードで任意の文字列で置き換える箇所をピックアップ。
if(isset($_GET[‘product‘])){
$name = $tag[‘name’];
if($name == ‘product-name‘)
$tag[‘values’] = (array) $_GET[‘product‘];
}
Contact Form 7 側の設定
function.phpへ追記した関数に合わせて、
WordPress管理画面の【お問い合わせ】＞【コンタクトフォーム】からURLパラメーターを取得したいフォームを選択し、編集。
フォーム
以下のように【フォーム】タブの内容へ追加します。
|
1 2 |
<p><label>商品名 [text product-name]</label></p> |
上記の追加で任意の文字列で置き換える箇所をピックアップ。
入力フォームを隠して、メールにのみURLパラメーターの値を表示させたい場合には、
【contact form 7 modules】のプラグインを使用するといいらしいのですが、
古いのせいなのか有効化すると、エラーが出た。
- WordPress:varsion4.7
- contact form 7 modules:varsion2.0
Fatal error: Call to undefined function wpcf7_deprecated_function() in xxx/wp-content/plugins/contact-form-7/includes/shortcodes.php on line 9
なら、CSSで【style=”display:none;”】を追記します。
|
1 2 |
<p style="display:none;"><label>商品名 [text product-name]</label></p> |
入力フォームを隠して、メールにのみURLパラメーターの値を表示することが出来ました。
メール
【メール】タブを開き、以下のように追記します。
|
1 2 3 4 |
差出人: [your-name] <[your-email]> 商品名: [product-name] メッセージ本文: [your-message] |
上記の追記箇所をピックアップ。
商品名: [product-name]
投稿・固定ページの設定
コンタクトフォームへのリンクがあるページには、コンタクトフォームページ（contact）へのリンクURLに?から始まるパラメーターを付与します。
|
1 |
<a href="http://xxx.com/contact/?product=サンプル商品" target="_blank" rel="noopener noreferrer">コンタクトフォームへ</a> |
上記のリンクURLで任意の文字列で置き換える箇所をピックアップ。
http://xxx.com/contact/?product=サンプル商品
この場合、「サンプル商品」がproduct-nameの入力フォームへ渡されます。
実際の動作を確認
コンタクトフォームへのリンクがあるページを開いて、
実際にリンクURLをクリックし、コンタクトフォームへ移動してみます。
上のコンタクトフォームリンクには、「サンプル商品」
下には、「サンプル商品2」のURLパラメーターが付与してあります。↓
入力フォームを表示させておく場合には、説明文があるといいかもしれません。
▲この商品へのお問い合わせで間違いないですか？
違う場合には、商品名を書き換えて下さいませ。
など。
CSSの【style=”display:none;”】で入力フォームを非表示にした場合には、必要ないですね。
ページタイトルを取得し、自動化させる – 応用編
URLパラメーターを書き換えるのが面倒なので、投稿タイトルをPHPで取得し、URLパラメーターへ代入します。
自動化するので、いくらページが増えても対応できて安心です。
function.php 側の設定
投稿内でPHPを使うにはプラグインがありますが、セキュリティー面が脆弱になるらしい。
自作ショートコードで、投稿内でタイトルを挿入できるようにします。
function.phpに関数を追記します。以下ディレクトリ・ファイルを開く。
|
1 |
/wp-content/themes/テーマ名/function.php |
下記のコードをコピペで「タイトル挿入ショートコード」が使えるようになります。
|
1 2 3 4 5 |
function shortcode_title() { return get_the_title(); } add_shortcode('title', 'shortcode_title'); // 投稿内で [title] と記述する |
投稿・固定ページの設定
コンタクトフォームへのリンクがあるページを編集します。
リンクURL?パラメーター名=の後ろを[title]にすると、タイトルが出力されます。
|
1 |
<a href="http://xxx.com/contact/?product=[title]" target="_blank" rel="noopener noreferrer">コンタクトフォームへ</a> |
これで、商品名やイベント名、プログラム名など個別ページごとのお問い合わせボタンURLに「 ?product=[title] 」を付ければ、そのページタイトルを自動で取得し、
あらかじめフォームへ入力しておいたり、非表示にして送信メールへ記載して分かりやすく出来ます。
Contact Form 7でURLパラメーターを取得する効果
クライアントにとって、GoogleアナリティクスやWEBマスターツールを使って、
どのページからのコンバージョンか分析するのは、ハードルが高い！
受信メールにどのページからのお問い合わせか書いてあれば、
クライアントでも、どの商品・イベントなどの項目が注目されているか分かり、
効果的に問い合わせの多い人気商品へ注力できます。
ユーザーは、入力項目が少なくなりお問い合わせしやすくなります。
WordPressの管理者としても、お問い合わせフォームを複数作成する手間もなくなり、
ひとつのフォームなので編集・変更も簡単になります。
お問い合わせが重要になるサービスでは、役に立つ方法だと思います。
コード大変参考になりました、ありがとうございます。
一部コピペで対応できない部分があり、質問させていただきます。
コード例（//Contact Form 7 URLパラメーター取得 関数）で下記エラーとなります。
wp-content/themes/lightning-pro-child-sample/functions.php ファイルの7行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。
syntax error, unexpected ‘hundred_percent’ (T_STRING), expecting ‘]’
6行目 if(isset($_GET[fusion …………n_height=”none”][‘product’])){ の
[[fusion_builder…… から …….=”none”]までを削除し、
if(isset($_GET[‘product’])){ とすると更新され、商品名[fusion_title]として引き継がれました。
しかし、応用編の「ページタイトルを取得し、自動化させる – 応用編」を試しても自動取得できず、
[fusion_title]の表記のままでした。
ご教授いただければ幸いです。
表示がおかしくなってました。
修正したので、もう一度記事をご確認ください。
ご確認ありがとうございます。ページタイトルを引き継ぐことができました、
https://xxxxx.com/contact/?title= タイトル名表示
URLを引き継ぐ場合として、下記を行いましたがコンタクトフォーム7には引き継がれませんでした。
よろしければご教授ください。
表記されているコード
//Contact Form 7 URLパラメーター取得 関数
function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )・・・・
と
function shortcode_title() {
return get_the_title();
}
add_shortcode(‘title’, ‘shortcode_title’);
// 投稿内で [title] と記述する
コンタクトフォーム7
ページ名
[text title-permalink]
他
ページ名
[text title-url]
ページ名
[text permalink] など
titleを全てpermalinkに変更して試しましたが、フォーム欄は引き継がれませんでした。
コンタクトフォームが設置してある投稿ページには
https://xxxxx.com/contact/?title= URL名 で表記されていたのですが。
お時間ある時で結構でございます。アドバイス頂けますと幸いです。
URLのパラメーターを?title=
コンタクトフォームをtitle-permalink
にするなら
になるんじゃないでしょうか？
ご確認いただきまして、ありがとうございます。
すみません、質問の内容が明確では無い中で失礼致しました。
やりたい事としまして、
表記されている「ページタイトルを取得し、自動化させる – 応用編」を一部変更し、「URLを取得し、自動化させる」方法を模索中です。
表記されているコードからタイトルの自動取得はできましたが、
URL取得に関して下記内容から色々と変更を試みたのですが、
解決の糸口が見つかりません。
何卒、よろしくお願い申し上げます。
●function PHPへの表記
//Contact Form 7 URLパラメーター取得 関数
function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_GET[‘title’])){
$name = $tag[‘name’];
if($name == ‘title-name’)
$tag[‘values’] = (array) $_GET[‘title’];
}
return $tag;
}
add_filter(‘wpcf7_form_tag’, ‘my_form_tag_filter’);
//Contact Form 7 URLパラメーター取得 関数
function shortcode_title() {
return get_the_title();
}
add_shortcode(‘title’, ‘shortcode_title’);
// 投稿内で [title] と記述する
●投稿ページ内のリック表記
コンタクトフォームへ
●contact form 7への表記
ページ名
[text title-name]
に直したら、パーマリンクを取得できないですか？
アドバイスありがとうございます、感謝です。
下記内容で、URLをフォームに渡すことができました。
//Contact Form 7 URLパラメーター取得 関数
function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_GET[‘permalink’])){
$name = $tag[‘name’];
if($name == ‘title-permalink’)
$tag[‘values’] = (array) $_GET[‘permalink’];
}
return $tag;
}
add_filter(‘wpcf7_form_tag’, ‘my_form_tag_filter’);
//Contact Form 7 URLパラメーター取得 関数
function shortcode_permalink() {
return get_the_permalink();
}
add_shortcode(‘permalink’, ‘shortcode_permalink’);
// 投稿内で [title] と記述する
丁寧で非常に分かりやすくコピペもしやすい。
作業時短になりました。めちゃめちゃ感謝です。