調査・研究レポートReport

WordPressでメールフォームを実装するためのプラグインと言えば、Contact Form 7 やMW WP Form など様々なものがありますが、FLARESでは標準的にはContact Form 7 を普段利用しています。今日はContact Form 7 の使い方について書いてみたいと思います。

Contact Form 7 の基本的な使い方

WordPressへのインストール

WordPress管理画面にログインし、「プラグイン」をクリックします。

新規追加をクリックします。

「contact form 7」の文字列で検索し、表示される「Contact Form 7」をインストール、有効化します。

メニューに「お問い合わせ」が追加されたらインストール完了です。

フォームの作成

基本的なフォームの作成方法

お問い合わせをクリックします。

新規追加の場合には上部にある新規追加をクリックします。フォームの編集の場合には、フォーム名をクリックします。

フォームタブでフォームのデザインを設計できます。下部のエディアエリアにHTMLに埋め込む形でフォームのショートコードを記載していくとフォームが完成します。

フォーム項目の中でよく使う主要なものについては以下をご確認ください。

フォーム項目

テキスト

1行テキストの入力欄を生成します。必須項目、デフォルト値、placehlder、クラスやIDの付与などに対応しています。

メールアドレス

メールアドレスの入力欄を生成します。必須項目、デフォルト値、placehoder、クラスやIDの付与に対応しています。

テキストエリア

複数行のテキスト入力欄を生成します。必須項目やデフォルト値、placeholder、クラスやIDの付与に対応しています。

ドロップダウンメニュー

ドロップダウンメニューを生成します。必須項目、複数選択、空の項目挿入、クラスやIDの付与に対応しています。

チェックボックス

チェックボックスを生成します。必須項目、各要素をlabelでラッピング、クラスやIDの付与などに対応します。

ラジオボタン

ラジオボタンを生成します。各要素をlabelでラッピング、クラスやIDの付与などに対応します。

承諾承認

プライバシーポリシーなどの同意用のチェックボックスを生成します。このチェックをOnにするまで送信ボタンがクリックできない仕組みになります。

送信ボタン

送信ボタンを生成します。表示するラベル用テキストを自由に変更でき、クラスとIDの付与に対応しています。

フォームを表示させる

フォームを表示させるためには、Contact Form7 のフォームの設定画面に表示されているショートコードを投稿や固定ページのエディターに張り付ける必要があります。

上記のショートコードを固定ページのエディターに挿入してみました。

Gutenberg の場合にはショートコードブロックを利用します（ブロックを指定せずに張り付けるとショートコードブロックになりました）。

公開してページを表示させると以下のような表示になりました（テーマはTwenty Nineteen）。

入力項目によって表示する項目を変化させる

特定項目の入力内容によって表示を変化させるためのプラグイン「Conditional Fields for Contact Fotm 7」

特定のフォーム項目の入力内容によって特定のフォーム項目を変化させることができます。この機能を実現するためには以下のプラグインを利用するとスムーズです。

Conditional Fields for Contact Form 7

Conditional Fields を追加するとフォームの設計画面にConditional fields という名前のタブが一つ増えます。

Conditional Group の追加

Conditional fields Group を追加します。Conditional fields Group で囲った部分が条件によって表示したり、非表示にしたり変化させられる部分になります。

Conditional Group を追加するためのボタンをクリックします。

Conditional Group を設定します。

出力される Group のショートコードの中に送信ボタンのショートコードを移動させました。Groupを追加したらContact form 7 に認識させるために一度保存しておきましょう。

ルールの追加

ルールを追加します。ルールとは制御対象のグループと表示条件のセットのことです。

承諾承認のボタンをクリックしたときに送信ボタンが表示されるように設定してみました。

Show: 表示を制御する対象のグループを選択

if：表示条件 → 項目名が特定の値に一致するかどうかを判断して表示する。

動作確認

以下のような動作になりました。

確認画面を追加するためのプラグイン「Contact Form 7 add confirm」

Contact Form 7 はそのまま利用すると送信ボタンをクリックした瞬間にメールが送信されてしまいますが、日本国内のウェブ制作会社が制作するお問い合わせフォームの多くには確認画面をワンクッション挟んでユーザーに確認をしていただいた上で送信するという流れがまだまだ一般的です。

送信ボタン以外に確認ボタンを追加するためのプラグインが次のプラグインです。

Contact Form 7 add confirm

利用するにはまずはプラグインをインストールしてください。

プラグインの検索ボックスに「Contact form 7 add confirm」と入力すると検索できます。

プラグインを有効にするとフォームを設計する画面に確認ボタンと戻って編集ボタンが表示されるので、クリックしてショートコードを挿入しましょう。フォームの入力画面には確認ボタンが表示され、確認画面に遷移すると確認画面の表示が消えて代わりに戻って編集ボタンが表示されます。

「確認ボタン」と「戻るボタン」のショートコードを送信ボタンの横に並べてみました。

確認ボタンをクリックすると確認画面に遷移します。

戻るボタンをクリックすると編集画面に戻ります。

確認画面のデザインをカスタマイズする

確認画面は標準のままだと暗めのグレーな背景になるので、色を調整したいなどデザインをカスタマイズする場合には、以下の記事が参考になると思います。

《Wordpress》Contact Form 7 add confirm使用時のスタイルを整える

https://qiita.com/uto-usui/items/826b19818fc41f93f6e9

送信されるメールの内容を設計する

メール内容の設計

メールタブに切り替えると送信されるメール自体の設計を行うことができます。送信先や送信元、CCやBCCなどのメールアドレスや本文など自由に作りこむことができます。入力項目の名前をショートコード形式で張り付けると送信前に入力された内容に差し替えてメールを送信するとができます。

自動返信メールと管理者向けメール

お客様への自動返信メールと企業担当者への管理者向けメールの2通のメールを送ることができます。そのためには「メール（2）」のチェックを有効にします。

有効にすると入力欄が増えますので、二つ目のメールの内容を設計しましょう。

reCAPTCHAを利用してスパムに対策する

reCAPTCHとはGoogleが開発しているメールフォームなどのスパムに対策するための仕組みで、無料で利用することができます。

ここでは詳しくは説明しませんが、以下のサイトでreCAPTCHの登録を行うことができます。

Google reCAPTCHA

https://www.google.com/recaptcha/intro/v3.html

reCAPTCHにはバージョンが2と3があるのですが、現在の最新のContact Form 7 で利用できるものはバージョン3です。注意してください。

reCAPTCHの管理画面からサイトを登録するとサイトキーとシークレットキーの二つが発行されるので、これら2つのキーをContact Form 7 に入力します。

Contact Form 7 のサブメニューにある「インテグレーション」をクリックすると表示される reCAPTCH の「インテグレーションのセットアップ」をクリックしましょう。

サイトキーとシークレットキーを入力し、変更を保存のボタンをクリックすると設定完了です。

正しく設定ができているとサイトを表示したときに右下に reCAPTCH のバッジが表示されます。

GoogleAnalyticsのコンバージョンをトラッキングする

コンバージョンをトラッキングすルための方法は以下の記事にありますので興味があればご確認ください。

https://flares.jp/digimag/gtag-x-cf7-x-virtual-pageview/

まとめ

Contact Form 7 を利用する上で必要なことをまとめてみましたがいかがだったでしょうか？

現状WordPressの時代の流れとしては、Gutenberg の出現によって従来の Classic editor からの移り変わりの時期に差し掛かっていると思います。もちろん従来のやり方がダメだというわけではないのですが、ブロックエディターに対応したフォームビルダーも今後多くあらわれることと思いますので、アンテナを高くしてそういった新しいプラグインの情報も敏感に察知していければと思います。

とはいうものの、Contact Form 7 は世界一実積のあるWordPressにおけるフォームプラグインなのでまだまだ現役ですし、この先もまだまだ長く多くの方に使われていくことでしょう。私もまだまだ継続的に利用を続けていくと思います。カスタマイズの良いアイデアがあればぜひ私にも分けて頂けると非常にうれしいです。よろしくお願いします！( *’ω’*)ノ