ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

令和も使える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設置の流れ

  1. 設定画面でフォームを作成する
  2. メールの設定
  3. 自動返信メールの設定

以上でフォームができます。確認、完了画面の設定は不要です。
もちろん確認、完了画面を設置することもできます。

早速フォームを作っていきます。

フォームの設定

管理画面でフォームを作成します。予め用意されたフォームタグのインプットやドロップダウンなどをボタン一つで挿入することができます。

フォームは複数作成する事も可能です。

フォーム設定の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-7 html_id="#form-hoge" ]
formにclass[contact-form-7 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も使いやすくなりますね。リアルタムバリデーションなどにも使えます。

受信メール設定

お問い合せを受信するメールの設定になります。

Contact Form 7

送信先

お問い合せメールを受信するメールアドレスを記入します。

複数のメールドレスを設定することもできます。
「,」カンマで区切ります。

例)test@itti.jp,test2@itti.jp,test3@itti.jp

送信元

メールで言う「差出人」の設定になります。

メールサーバー(ドメイン)と、差出人のドメインを一致させる必要があります。
例えば、ドメインが「itti.jp」であれ、差出人のメールは「mail@itti.jp」にします。

とはいえ、お問い合せしてきた人の名前(または会社名)とメールアドレスにしたいものです。
その場合、下記を設定することもできます。

アラートが表示されますが、問題なく利用できます。
※テストは行ってくださいね。

題名

メールの「件名」になります。

追加ヘッダー

Cc、Bccを使って複数のメールアドレスを設定できます。

複数のメールアドレスを設定する場合は「,」カンマで区切って記入します。

メッセージ本文

メールの本文になります。

自動返信メール設定

サンキューメール(自動返信メール)は「メール(2)」を利用することになります。

自動返信メール

送信先

相手のメールアドレスになります。
フォームのメールアドレスのタグを設定します。

例)[your-email]

送信元

相手のメールには「差出人」として表示されます。

受信メール設定と同様に、メールサーバーと送信元のドメインが一致していないとアラートが表示されます。不一致でも動作には問題はありません。

題名

相手のメールには「件名」として表示されます。

便利なメールタグ

Contact Form7には便利なメールタグが用意されています。

例えば、送信者のIPアドレスや、ユーザーエージェント送信日時など。
記事にフォームを埋め込んでいる場合は、投稿記事のタイトル、URLなども取得できます。

IPアドレス、ユーザーエージェント、送信日時などは、フォームの情報として使うことが多いので、積極的に利用していきたいですね。

確認・完了画面が表示されるようにする

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の設定方法

お問い合せスパム対策

お問い合せスパム対策として「Contact Form 7 Honeypot」プラグインを利用します。

このプラグインだけで、問い合わせスパムがほとんど無くなりました。
特に中国やロシア系のスパムボットのブロックには効果的です。

Contact Form 7 Honeypotの特徴と利用する理由

  • ボットだけがチェックできるボックスを設置して、チェックがあればエラーとなる
  • Akismetは必要なメールアドレスもブロックしてしまうことがあるので、フォームのボット対策としては導入できません。
  • reCAPTCHAは、ユーザーに手間をかけさせてしまう。

効率よくスパムボットだけをブロックしたい場合は最適なプラグインです。

ハニーポットを設置する

フォームに「ハニーポット」のボタンが追加されているのでクリックします。


名前の欄だけ変更します。あとは未記入でOKです。
スパムボットが好むインプット名が良いです。今回は「mailaddress」にしました。

設定は以上で完了です。


フォームには表示されませんが、デベロッパーツールではしっかりと追加されているのが確認できます。

受信メールの保存と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には他にも便利なアドオンが多数あるので、クライアントからの要望にも応えることができると思いますよ。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ