ワードプレス|プラグイン

ContactForm7のスパム対策から効果的な使い方まで徹底解説

Contact Form 7はお問い合わせフォームが簡単に設置できるWordPressのプラグインです。

この記事ではContact Form 7の基本的な使い方からスパム対策、効果的なカスタマイズ方法まで徹底解説しています。

これからContact Form 7を使ってお問い合わせフォームを設置したい方、また、既にContact Form 7を利用していてさらにカスタマイズしたい方はぜひ参考にしてみてください。

この記事で分かること

  • Contact Form 7の導入から使い方
  • Contact Form 7のカスタマイズ方法
  • Contact Form 7のスパム対策
管理人クッキー

分かりやすい言葉で解説していくよ!

Contact Form 7とは

Contact Form 7はWordPressにお問い合わせフォームを簡単に設置できるプラグインです。

HTMLやCSSなどの知識が無くても簡単にお問い合わせフォームが作れちゃう世界中で人気のプラグインです。(HTMLやCSSが分からなくてもContact Form 7が使えます!)

また、Contact Form 7は日本人が作ったプラグインなので不明点を日本語で問い合わせることができるのも嬉しいポイントです。

スパス対策も充実しており、無料でありながら本格的な高品質のお問い合わせフォームが作成できるのが魅力的です。

それでは早速Contact Form 7の導入方法を解説していきます。

Contact Form 7のインストール&有効化

WordPressにログインしたらまず「プラグイン」⇒「新規追加」の順番にクリックしていきます。

次に右上の検索窓で「Contact Form 7」を入力して検索します。

Contact Form 7が出てきたら「インストール」をクリックして「有効化」をクリックします。

管理人クッキー

有効化をしただけでまだお問い合わせフォームは設置されていません。

続いて導入設定を解説していきます。

Contact Form 7の設置方法

Contact Form 7の設置方法は以下の手順で行います。

Contact Form 7の設置手順

  1. 「お問い合わせ」の「新規追加」からお問い合わせフォームを作成する
  2. 「固定ページ」でお問い合わせページを作りContact Form 7を表示させる
管理人クッキー

それぞれ画像付きで解説していきます。

「お問い合わせ」の「新規追加」からお問い合わせフォームを作成する

Contact Form 7がインストールされると新たに「お問い合わせ」欄が追加されています。

「お問い合わせ」欄の「新規追加」をクリックして新しいコンタクトフォームを作成します。

新しいコンタクトフォームは既にテンプレートがあるので名前をつけてあげるだけでOKです。

ここでつける名前は自分が管理するための名前です。

ユーザーに見せる名前は別の項目で設定します。

自分が分かりやすい名前を付けたら左下の「保存」をクリックします。

続いて、設定したContact Form 7をお問い合わせページに表示させていきます。

「固定ページ」でお問い合わせページを作りContact Form 7を表示させる

「固定ページ」⇒「新規追加」をクリックし新しい固定ページを作成します。

ユーザーに分かりやすいタイトルをつけます。

「ブロック挿入ツール」からContact Form 7ボタンを探しクリックするだけで先ほど設定したContact Form 7が自動で追加されます。

コンタクトフォームを複数作成している場合は「コンタクトフォームを選択」から名前を選んで決定します。

最後に「公開」をクリックして完成です。

プレビューで見るとこんな感じです。

これでお問い合わせフォームの設置は完成です。

基本的な使い方はこれで以上です。

管理人クッキー

次の章からはさらに便利に使える機能を紹介していくよ。

Contact Form 7の便利機能選

Contact Form 7のスパム対策

お問い合わせフォームと切っても切り離せないのがスパムです。

放っておくと何万通もメールがきてサーバーがダウンすることもあります。

天下のGoogle様が無料で公開している迷惑メール対策システムがあるので設定しておきましょう。

Googleリキャプチャ(reCAPTCHA)というシステムです。

上記サイトに入ったら下図のように入力をしていきます。

reCAPCHAの設定手順

  1. 自分で管理しやすい名前を入力
  2. reCAPCHA v3の方にチェックを入れる(reCAPCHA v3の方が新しくて機能が充実している)
  3. reCAPCHAを設定したいドメインを入力
  4. 利用規約にチェックを入れる
  5. 送信をクリック
管理人クッキー

例えば登録するドメインが「https://abc.com/」だった場合「abc.com」のみ入力します。

下図の通り送信が完了すると「サイトキー」と「シークレットキー」が配布されるのでメモをしてください。

続いてサイトキーとシークレットキーをWordPressに設置していきます。

上図の通り「お問い合わせ」の「インテグレーション」をクリックし「インテグレーションのセットアップ」をクリックして次に進みます。

上図の通り、サイトキーとシークレットキーを貼り付けして「変更を保存」をクリックすると「reCAPCHA」の設定は全て完了です。

管理人クッキー

確認のため自分のサイトの右下に下図のマークが出ているかどうか確認してください。

出ていればOKです。

    Contact Form 7の自動返信メール設定

    Contact Form 7のデフォルト状態では「自分自身にお問い合わせがあった際はお知らせメールが送られてきます」が「お問い合わせをしてきた人への自動返信メールは設定されていません」。

    自動返信メールがないとユーザーは「ちゃんとメッセージが届いたのか不安」になると思います。

    ユーザビリティ向上のためにしっかりと設定しておきましょう。

    まず、「お問い合わせ」の「コンタクトフォーム」を開き、過去に作成したコンタクトフォームをクリックして開きます↓

    続いて「メール」の項目をクリック↓

    下へスクロールすると「メール(2)」の項目があるのでチェックを入れます↓

    管理人クッキー

    チェックを入れると閉じていた設定項目が表示されるよ

    初期設定のままではお問い合わせ内容がそのまま送り返されるだけなので下図の様に設定していきましょう。

    変更をおすすめする項目は以下の3つです。

    • 【送信元】
    • 【題名】
    • 【メッセージ本文】

    【送信元】は分かりやすいよう自分のサイト名に変更しておきましょう。

    【題名】は「お問い合わせいただきありがとうございます」など感謝の言葉に変えましょう。

    【メッセージ本文】には「自動返信メールであることの記載」と「返信までの期間」を入力しておくとユーザーも安心します。

    メッセージ本文のテンプレートを作りましたのでぜひご活用ください。

    自動返信メールテンプレート(コピペしてそのまま利用可)

    ※このメールはシステムからの自動返信です。

    この度はお問い合わせありがとうございます。

    折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。

    何卒こ了承くださいませ。

    --【お問い合わせ内容】--

    管理人クッキー

    必要最低限を詰め込んだシンプルなテンプレートです。

    他に必要なものがあれば追加していきましょう。

    Contact Form 7カスタマイズ方法

    続いてフォームのカスタマイズ方法を解説していきます。

    管理人クッキー

    上図の赤枠の部分だよ!

    おすすめの機能を厳選して紹介していくよ!

    以下使用頻度の高いフォームを解説していきます。

    よく使うフォーム

    • 日付
    • ドロップダウンメニュー
    • チェックボックス
    • ラジオボタン
    • ファイル

    フォーム解説の前にまず「必須項目の設定」について解説していきます。

    必須項目の設定

    必須項目の設定とは上図の様に各フォームを設定する際に「回答を必須にするかどうか」設定できる機能です。

    【名前】や【メールアドレス】など必ず回答してほしい場所は必須設定をし、【タイトル】や【ファイル】など必ずしも必要ではないものは【必須項目】のチェックを付けないで自由回答にします。

    管理人クッキー

    「必須項目」が設定されたフォームを入力しないと下図の様にエラーメッセージが出現し入力を促します。

    日付

    日付は主に生年月日の入力やセミナーの申込日など日付を記録したい時に使えます。

    上図の右にあるカレンダーアイコンをクリックするとカレンダーが表示されるので日付を選択できます。

    選択範囲の上限と下限も設定できるので、特定の日時を指定したい場合はあらかじめ設定しておきましょう。

    ドロップダウンメニュー

    ドロップダウンメニューは複数の選択肢から1つ選んでもらう時に使うフォームです。

    「お住いの都道府県」など選択数が多い時に使用します。

    ドロップダウンメニューは選択をたたむことができるため場所を取らず見た目を綺麗にできるメリットがあります。

    チェックボックス

    チェックボックスは複数の選択肢を選ぶことができるフォームです。

    アンケートなど回答が複数存在する場合に利用しましょう。

    逆に1つだけ回答を選んでほしい場合は下記のラジオボタンを利用しましょう。

    ラジオボタン

    上図の通りラジオボタンはチェックボックスとは違い1つのみ選択肢を選ぶことができます。

    性別や通勤手段など答えが1つに限られる場面で利用しましょう。

    ファイル

    ファイルは上図の通り、データファイルを追加できるフォームです。

    履歴書や画像・テキストファイルなどファイルの添付が必要な時に設定しましょう。

    Contact Form 7確認画面を追加する方法

    Contact Form 7には確認画面がありません。

    確認画面があることで入力ミスを防ぐことができます。

    自分で作成した文章を確認したい人もいるので入力確認画面の設置をしておきましょう。

    Confirm Plus Contact Form 7というプラグインで確認画面を追加できます。

    インストールして有効化するだけで確認画面が追加できます。

    確認画面を追加するプラグインにContact Form 7 add confirmというプラグインもありますが5年以上更新されていないためConfirm Plus Contact Form 7をおすすめします。

    Contact Form 7まとめ

    Contact Form 7を追加することでお問い合わせフォームを簡単に設置することができます。

    お問い合わせフォームがあることで仕事の依頼やコメントを見逃すことがありません。

    ブログの信頼性の為にも必ずお問い合わせフォームを設置しておきましょう。

    -ワードプレス|プラグイン