Redirection for Contact Form 7プラグイン

発端

私ことカニ男はContact Form 7のヘビーユーザーである。もうかれこれ10年以上利用している。

デザイナーの作成したデザインとContact Form7の出力するHTMLタグが合わないので、フォームの構築にはVue.jsを使ったものになっているが、メール送信部はContact Form7の機能をベースにしている。そんなContact Form 7であるば、メール送信後にリダイレクトしたい場合はfunctions.phpにフックを追記していたのだが、プラグインのバージョンを挙げると動かなくなることがある。

別にContact Form 7のバグというのではなく、ワードプレス本体のアップデートの影響だったり、他のプラグインがフックやアクションないでグローバル変数を書き換えたりしてよくわからんことになっているのだろう。最近の案件でもお問い合わせ完了後にサンクスページへリダイレクトしようとしたのだが、functions.phpに追記したリダイレクトのコードが動作しなかった。

これを機に便利なプラグインがないかな~と探している中で「 Redirection for Contact Form 7」プラグインを見つけた。「 Redirection for Contact Form 7」のいいところは使い方がとてもシンプルなこと。そしてちゃんと正しく動くことだ。この素晴らしいプラグインを紹介する。

インストール方法

プラグインの新規登録で「Redirection for Contact Form 7」と入力して検索結果に表示された「今すぐインストール」をクリックしてインストールする。

プラグインをインストールしたら次は「有効化」をクリックする。




プラグインの通知を受け取るかどうかを聞かれる面倒なので「スキップ」を選択する。

次の画面では有料のアドオンが表示されるが用はないのでそのままにしておく。これでプラグインが使えるようになた。

サンクスページへのリダイレクトを設定する

お問い合わせ完了後にサンクスページへのリダイレクトを設定するには、コンタクトフォームの一覧から該当するお問い合わせの編集画面を開くと「Action」というタブが増えているのでこちらをクリックする。

「Action」タブ内のSubmisson Actionsの中で、「Choose Action」のプルダウンが表示されているので、クリックする。

すると、いくつかの選択肢がでる。あいにくと用意されている機能はほとんどが有料のようだ。幸いにもリダイレクト機能は無料で使えるようなので「Redirect」を選択する。

「Redirect」を選択したら「Add Action」をクリックして、登録する。

登録が終わったら、New Actionの「Edit」をクリックして編集モードに移る。

Rule Titleではわかりやすい名前をつける。ここではサンクスページへリダイレクトするための設定なので「サンクスページへ」と入力した。

Seelct a Pageではリダイレクト先の固定ページを選択する。ここではあらかじめ作成しておいた「お問い合わせありがとうございました」という固定ページを選択した。その他の項目は特に操作する必要はないので「保存」をクリックして、編集内容を保存する。

フォームを送信すると、正常にサンクスページへリダイレクトできた。

フォーム送信後にタグを表示する

リスティングなどの効果測定用のJavascriptのタグを送信することも「 Redirection for Contact Form 7」ならいとも簡単にできる。それもただタグを表示するだけではなくい、フォームで送信されたパラメータを受け取って、その内容を使ってタグを表示することができる。この機能を使えばコンバージョンのタグにユニークなパラメータを付与して送信することができるのだ。

手順としてはお問合せフォームの「Action」タブで「Fire Javascript」を選択してアクションを登録する。

次にアクションの編集画面で適当なタイトルと入力し後、実行するJavasciriptを入力する。ここではお問合せフォームで入力したメールアドレスを画面に表示するための下記のスクリプトを登録している。[your-email]というのはContact Form 7のフォームで用意されている置換タグである。どのようなタグが利用可能かは右下の「Available mail tags」をクリックすると確認できる。

スクリプトの入力が終わったら「保存」をクリックして編集内容を更新する。

“`javascript
alert(‘入力内容:’; ‘[your-email]’);
“`

実際にお問い合わせフォームを入力し「送信」ボタンをクリックすると、

送信後に画面上部にフォームに入力されたメールアドレスがアラートダイアログとして表示されることが確認できた。

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。