【Contact Form 7】１個のフォームでどのページからの問合せか判別する方法 URLパラメーターの使い方

2016/12/17

1 WordPressプラグイン Contact Form 7でどのページからの問い合わせなのか判別したい
- 1.1 複数の入力項目が同じお問い合わせフォームを作成する問題点
2 Contact Form 7 でURLパラメーター付けて、GETで値を渡す方法
3 ページタイトルを取得し、自動化させる – 応用編
- 3.1 function.php 側の設定
- 3.2 投稿・固定ページの設定
4 Contact Form 7でURLパラメーターを取得する効果

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でも大丈夫です。
後者の方が関数をまとめて管理できるので良いと思います。
ただ、通常のテーマは作成者が新しいバージョンを配信しアップデートすると、テーマ内ファイルが上書きされます。
子テーマを使用しておくことをお勧めします。
子テーマの導入と親テーマへの継承について

編集するファイルの位置

/wp-content/plugins/contact-form-7/includes/function.php
/wp-content/themes/テーマ名/function.php

1 2	/wp-content/plugins/contact-form-7/includes/function.php /wp-content/themes/テーマ名/function.php

以下のコードをコピーして、プラグインとテーマ内どちらかのfunction.phpの一番下の行へ貼り付けます。

//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パラメーター取得　関数

//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パラメーターを取得したいフォームを選択し、編集。

フォーム

以下のように【フォーム】タブの内容へ追加します。

<p><label>商品名
[text product-name]</label></p>

1 2	<p><label>商品名 [text product-name]</label></p>

上記の追加で任意の文字列で置き換える箇所をピックアップ。

[text product-name]

入力フォームを隠して、メールにのみ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;”】を追記します。

<p style="display:none;"><label>商品名
[text product-name]</label></p>

1 2	<p style="display:none;"><label>商品名 [text product-name]</label></p>

入力フォームを隠して、メールにのみURLパラメーターの値を表示することが出来ました。

メール

【メール】タブを開き、以下のように追記します。

差出人: [your-name] <[your-email]>
商品名: [product-name]
メッセージ本文:
[your-message]

差出人: [your-name] <[your-email]>

商品名: [product-name]

メッセージ本文:

[your-message]

上記の追記箇所をピックアップ。

商品名: [product-name]

投稿・固定ページの設定

コンタクトフォームへのリンクがあるページには、コンタクトフォームページ（contact）へのリンクURLに?から始まるパラメーターを付与します。

<a href="http://xxx.com/contact/?product=サンプル商品" target="_blank">コンタクトフォームへ</a>

1	<a href="http://xxx.com/contact/?product=サンプル商品" target="_blank">コンタクトフォームへ</a>

上記のリンクURLで任意の文字列で置き換える箇所をピックアップ。

http://xxx.com/contact/?product=サンプル商品

この場合、「サンプル商品」がproduct-nameの入力フォームへ渡されます。

実際の動作を確認

コンタクトフォームへのリンクがあるページを開いて、
実際にリンクURLをクリックし、コンタクトフォームへ移動してみます。

上のコンタクトフォームリンクには、「サンプル商品」
下には、「サンプル商品2」のURLパラメーターが付与してあります。↓

入力フォームを表示させておく場合には、説明文があるといいかもしれません。

▲この商品へのお問い合わせで間違いないですか？
違う場合には、商品名を書き換えて下さいませ。

など。
CSSの【style=”display:none;”】で入力フォームを非表示にした場合には、必要ないですね。

ページタイトルを取得し、自動化させる – 応用編

URLパラメーターを書き換えるのが面倒なので、投稿タイトルをPHPで取得し、URLパラメーターへ代入します。
自動化するので、いくらページが増えても対応できて安心です。

function.php 側の設定

投稿内でPHPを使うにはプラグインがありますが、セキュリティー面が脆弱になるらしい。
自作ショートコードで、投稿内でタイトルを挿入できるようにします。
function.phpに関数を追記します。以下ディレクトリ・ファイルを開く。

/wp-content/themes/テーマ名/function.php

1	/wp-content/themes/テーマ名/function.php

下記のコードをコピペで「タイトル挿入ショートコード」が使えるようになります。

function shortcode_title() {
    return get_the_title();
}
add_shortcode('title', 'shortcode_title');
// 投稿内で [title] と記述する

function shortcode_title() {

return get_the_title();

}

add_shortcode('title', 'shortcode_title');

// 投稿内で [title] と記述する

投稿・固定ページの設定

コンタクトフォームへのリンクがあるページを編集します。
リンクURL?パラメーター名=の後ろを[title]にすると、タイトルが出力されます。

<a href="http://xxx.com/contact/?product=[title]" target="_blank">コンタクトフォームへ</a>

1	<a href="http://xxx.com/contact/?product=[title]" target="_blank">コンタクトフォームへ</a>

これで、商品名やイベント名、プログラム名など個別ページごとのお問い合わせボタンURLに「 ?product=[title] 」を付ければ、そのページタイトルを自動で取得し、
あらかじめフォームへ入力しておいたり、非表示にして送信メールへ記載して分かりやすく出来ます。

Contact Form 7でURLパラメーターを取得する効果

クライアントにとって、GoogleアナリティクスやWEBマスターツールを使って、
どのページからのコンバージョンか分析するのは、ハードルが高い！
受信メールにどのページからのお問い合わせか書いてあれば、
クライアントでも、どの商品・イベントなどの項目が注目されているか分かり、
効果的に問い合わせの多い人気商品へ注力できます。

ユーザーは、入力項目が少なくなりお問い合わせしやすくなります。

WordPressの管理者としても、お問い合わせフォームを複数作成する手間もなくなり、
ひとつのフォームなので編集・変更も簡単になります。

お問い合わせが重要になるサービスでは、役に立つ方法だと思います。

- WordPress, プラグイン, 無料プラグイン ContactForm7, wordpress, エラー, プラグイン, 使い方