令和も使えるContact Form 7の設定とカスタマイズで最高のフォームにする方法
世界で愛用されているメールフォーム プラグインContact Form 7の設定、データ保存、スパム対策、バリデーションなど、カスタマイズから便利なプラグインをご紹介します。
WordPressのフォームプラグインでは「Contact Form 7」と「MW WP Form」が人気です。
MW WP Formは標準で「問い合わせデータの保存」「確認、エラー、完了ページ」の設定も可能となっています。
それでもContact Form 7をお薦めするのは豊富なアドオンプラグインがあるからです。
MW WP Formを導入しても、お客様の要望に答えられない事が多々ありContact Form 7へ乗り換える事も少なくありません。
アドオンを利用することで、スピーディーでコストを抑えることも可能となります。
Contact Form 7設置の流れ
- 設定画面でフォームを作成する
- メールの設定
- 自動返信メールの設定
以上でフォームができます。確認、完了画面の設定は不要です。
もちろん確認、完了画面を設置することもできます。
早速フォームを作っていきます。
フォームの設定
管理画面でフォームを作成します。予め用意されたフォームタグのインプットやドロップダウンなどをボタン一つで挿入することができます。
フォームは複数作成する事も可能です。
フォーム設定のTips
formタグにidやclassを追加するコードも用意されています。
| タグのカスタマイズ | 追加方法 |
|---|---|
| id="#hoge" | [text id:hoge ] |
| class="hoge" | [text class:hoge ] |
| name="hoge" | [text hoge ] |
| Placeholderを表示 | [text placeholder="鈴木一郎" ] |
| formにID | [contact-form-７ html_id="#form-hoge" ] |
| formにclass | [contact-form-７ html_class="form-hoge" ] |
| タブインデックス | [text tabindex:1] |
data属性を追加するコードは無いので、jQueryを利用してサクッと追記します。
javascript
$(function() { $('input[name="your-name"]').attr({ 'data-hoge' : 'hoge', 'data-geho' : 'heho' });});下記のようにdata属性が追加されます。
HTML
<input type="text" name="your-name" data-hoge="hoge" data-geho="geho">deta属性を利用したJava Scriptも使いやすくなりますね。リアルタムバリデーションなどにも使えます。
メッセージの位置を変更する
[response]タグを使うことで、メッセージの位置を任意の場所に表示させることができます。
サンプルとして送信ボタンの上にメッセージを表示させてみます。
未記入で送信すると、送信ボタンの上にメッセージが表示されました。
受信メール設定
お問い合せを受信するメールの設定になります。
送信先
お問い合せメールを受信するメールアドレスを記入します。
複数のメールドレスを設定することもできます。
「,」カンマで区切ります。
例）test@itti.jp,test2@itti.jp,test3@itti.jp
送信元
メールで言う「差出人」の設定になります。
メールサーバー（ドメイン）と、差出人のドメインを一致させる必要があります。
例えば、ドメインが「itti.jp」であれ、差出人のメールは「mail@itti.jp」にします。
とはいえ、お問い合せしてきた人の名前（または会社名）とメールアドレスにしたいものです。
その場合、下記を設定することもできます。
アラートが表示されますが、問題なく利用できます。
※テストは行ってくださいね。
題名
メールの「件名」になります。
追加ヘッダー
Cc、Bccを使って複数のメールアドレスを設定できます。
複数のメールアドレスを設定する場合は「,」カンマで区切って記入します。
メッセージ本文
メールの本文になります。
自動返信メール設定
サンキューメール（自動返信メール）は「メール（2）」を利用することになります。
送信先
相手のメールアドレスになります。
フォームのメールアドレスのタグを設定します。
例）[your-email]
送信元
相手のメールには「差出人」として表示されます。
受信メール設定と同様に、メールサーバーと送信元のドメインが一致していないとアラートが表示されます。不一致でも動作には問題はありません。
題名
相手のメールには「件名」として表示されます。
便利なメールタグ
Contact Form7には便利なメールタグが用意されています。
例えば、送信者のIPアドレスや、ユーザーエージェント、送信日時など。
記事にフォームを埋め込んでいる場合は、投稿記事のタイトル、URLなども取得できます。
IPアドレス、ユーザーエージェント、送信日時などは、フォームの情報として使うことが多いので、積極的に利用していきたいですね。
CSSとJavaScriptを問い合わせページのみ読み込む
Contact Form7のCSSとJavaScriptは全ページで読み込まれてしまうため、問い合わせページのみCSSとJavaScriptを読み込むようにします。
固定ページのスラッグが「contact」以外は、Contact From7のCSSとJavaScriptを読み込まないようにします。
functions.php
function load_contactform7(){ if(! is_page('contact') ) { wp_dequeue_script('contact-form-7'); wp_dequeue_style('contact-form-7'); }}add_action( 'wp_enqueue_scripts', 'load_contactform7' );IDで指定することもできるので好きな方法で設定してください。
is_pageの指定をIDで複数指定したサンプルになります。
if(! is_page( array( 1,2,3 ) ) ) 確認・完了画面が表示されるようにする
Contact Form 7は確認画面→完了画面へとステップしません。
確認・完了画面が必要な場合は「Contact Form 7 Multi-Step Forms」を利用するのが良いでしょう。
プラグイン「Contact Form 7 add confirm」は2018年以降アップデートされいないため使用してはいけません。
Contact Form 7 Multi-Step Formsの設定は下記ページで詳しく解説しています。
Contact Form 7 Multi-Step Formsの設定方法
お問い合せスパム対策
お問い合わせのスパム対策には2つのプラグインがお薦めです。
一つは「Spam Protect for Contact Form 7」
もう一つは「Contact Form 7 Honeypot」
どちらも導入が簡単で、強力なスパムプラグインです。
Spam Protect for Contact Form 7
拒否したいドメイン、またはメールアドレス、文章に含まれる言葉を予め設定することで、フォームの送信をできなくすることができます。
もちろんエラーとなる言葉は日本でも対応しています。
設定は簡単ですが、事前に送信ブロックするメールやドメイン、単語を記入しておく必要があります。
単語だけでも設定するとスパムメールをブロックする率は高くなります。
Honeypot for Contact Form 7
このプラグインだけでも、問い合わせスパムがほとんど無くなりました。
特に中国やロシア系のスパムボットのブロックには効果的です。
Contact Form 7 Honeypotの特徴と利用する理由
- ボットだけがチェックできるボックスを設置して、チェックがあればエラーとなる
- Akismetは必要なメールアドレスもブロックしてしまうことがあるので、フォームのボット対策としては導入できません。
- reCAPTCHAは、ユーザーに手間をかけさせてしまう。
効率よくスパムボットだけをブロックしたい場合は最適なプラグインです。
ハニーポットを設置する
フォームに「ハニーポット」のボタンが追加されているのでクリックします。
名前の欄だけ変更します。あとは未記入でOKです。
スパムボットが好むインプット名が良いです。今回は「mailaddress」にしました。
設定は以上で完了です。
フォームには表示されませんが、デベロッパーツールではしっかりと追加されているのが確認できます。
プラグインを導入しないでスパムメールをブロックする
メニューの「設定」→「ディスカッション」にある「Disallowed Comment Keys」の入力欄に、キーワード、IPを記入してもContact Form 7はブロックしてくれます。
Contact Form 7はコメントスパムプラグイン「Akismet」にも対応していますが、まれに問い合わせしてくる企業のメールアドレスがスパム扱いになっていることがあり、当社では手動によるスパム設定をお薦めしております。
フォームの条件分岐
チェックボックスやドロップダウンリストなどの選択によって、フォームの内容を変えたい場合があります。アドオンプラグイン「Conditional Fields for Contact Form 7」を利用することでできます。
このプラグインが凄いところは、AND（且つ）による条件分岐も簡単に設定できることです。
詳しい設定は「Conditional Fields for Contact Form 7で条件分岐させる方法」をご覧ください。
受信メールの保存とCSVダウンロード
Contact Form 7の制作が用意しているアドオンプラグイン「Flamingo」を利用します。
Flamingoの機能・特徴
- フォームのデータが保存される。
- データはCSVでダウンロードできる。
プラグインの設定は不要です。有効にするだけで利用できます。
Flamingoの設定
初期設定の状態では下記のように表示されてしまいます。
フォームの「その他の設定」に、表示項目を記入します。
今回は「件名」に名前。「送信者」に名前とメールが表示されるようにします。
Contact Form 7のメールタグが使えるので、下記のようにもできます。
例）flamingo_name: "[first-name] [last-name]"
設定後、フォームのデータは下記のようになります。
CSVの文字化け解消方法
ダウンロードCSVを開くと、文字化けしています。
GoogleスプレッドシートでCSVをインポートすると、正常に表示されます。
エクセルで開いても文字化けしないようにShift JISでCSVをダウンロードできるようにします。
functions.phpに下記のコードを追記します。
functions
function flaming_csv( $input ) {return mb_convert_encoding( $input, "SJIS", "UTF-8" );}add_filter( 'flamingo_csv_quotation', 'flaming_csv', 11 );CSVをダウンロードしてエクセルで開くと正常に表示されます。
以上でクライアントワークにも使えるお問合せフォームになっていると思います。
Contact Form 7には他にも便利なアドオンが多数あるので、クライアントからの要望にも応えることができると思いますよ。
