【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

以下のコードをコピーして、プラグインとテーマ内どちらかの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 側の設定

function.phpへ追記した関数に合わせて、
WordPress管理画面の【お問い合わせ】＞【コンタクトフォーム】からURLパラメーターを取得したいフォームを選択し、編集。

フォーム

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

商品名
[text product-name]

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

入力フォームを隠して、メールにのみURLパラメーターの値を表示させたい場合には、
【contact form 7 modules】のプラグインを使用するといいらしいのですが、
古いのせいなのか有効化すると、エラーが出た。

• WordPress:varsion4.7
• contact form 7 modules:varsion2.0

なら、CSSで【style=”display:none;”】を追記します。

商品名
[text product-name]

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

メール

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

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

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

投稿・固定ページの設定

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

コンタクトフォームへ

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

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

実際の動作を確認

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

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

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

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

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

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

function.php 側の設定

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

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

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

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

投稿・固定ページの設定

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

コンタクトフォームへ

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

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

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

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

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

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

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