WPの

~ワードプレス関連~

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

   

WordPressプラグイン Contact Form 7でどのページからの問い合わせなのか判別したい

コンタクトフォーム7

WordPressで最も有名で人気のあるお問い合わせフォームプラグイン【Contact Form 7
入力項目が同じお問い合わせフォームへのリンクが複数ある場合、どのようにしたらいいか悩んだので調べてみました。

  • 何のページからお問い合わせに繋がったのか?
  • ページ内に複数あり、どの位置のリンクからのコンバージョンなのか?
  • どの商品ページからのお問合わせなのか?
  • どのイベントからのお問合わせなのか?
  • どのサービスからのお問合わせなのか?
  • 何に関してのお問合わせなのか?
  • ユーザーが入力や選択する項目を極力少なくしたい!

コンタクトフォーム7 複製

入力項目が同じお問い合わせフォームを何個か作成したい場合には、
WordPress管理画面から【お問い合わせ】>【コンタクトフォーム】を開き、一覧を表示。
複製したい項目にカーソルを合わせ、「複製」で同じ入力項目で同じメール内容のお問い合わせフォームが作成できます。

複数の入力項目が同じお問い合わせフォームを作成する問題点

お問い合わせフォームが2,3ヶ所程度なら、複製でも問題ないと思います。
ただ、商品やイベント、サービス、プログラムなど、数が多く、どんどん増えていくものに対して、個別にフォームを配置するには「複製」では対応しきれません。
さらに、入力項目や送信メール内容を変更したい場合に、複数のお問い合わせフォームを全てを同じように変更するのは大変な労力がかかります。

パソコン入力に困る女性

かといって、ひとつのフォームを使いまわしで、ユーザーに商品名などを書き込ませたり・ドロップダウンから選ばせたりすると、手順が増えて離脱率が上がってしまうでしょう

入力項目やメール内容が同じなのに、何個もお問い合わせフォームを作成するのは非効率!
なら、どうしたらいいのか?

Contact Form 7 でURLパラメーター付けて、GETで値を渡す方法

コンタクトフォーム7 URLパラメーターの取得と挿入

仮に、商品ページごとのお問い合わせフォームで商品名が判別できるよう設定していきます。

  • URLに付与するパラメーター名: product
  • パラメーターの値を取得するフォーム名: product-name

仮の値として、productproduct-nameを使います。任意の文字列なので、自身で決めてください。

function.php 側の設定

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

編集するファイルの位置

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

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

if(isset($_GET[‘product‘])){
$name = $tag[‘name’];
if($name == ‘product-name‘)
$tag[‘values’] = (array) $_GET[‘product‘];
}

Contact Form 7 側の設定

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

フォーム

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

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

[text product-name]

URLパラメーターを取得するために、フォームに追記

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

  • :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;”】を追記します。

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

メール

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

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

商品名: [product-name]

投稿・固定ページの設定

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

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

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

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

実際の動作を確認

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

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

動画 お問い合わせフォームへURLパラメータを渡す

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

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

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

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

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

function.php 側の設定

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

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

投稿・固定ページの設定

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

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

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

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

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

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

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

 - WordPress, プラグイン, 無料プラグイン , , , ,