【WordPress】Contact Form7の使い方をご紹介！カスタマイズやスパム対策も
目次
今回は、WordPressのお問い合わせフォームを制作できるプラグイン「Contact Form7」の使い方についてご紹介します。
また、カスタマイズやスパムメール対策の方法についてもご紹介します。
WordPressでお問い合わせフォームページを作りたいが、やり方がわからない！という方は是非この記事をご参考ください。
ちなみに今回ご紹介するプラグインは、以前書いたWordPressのおすすめのプラグインの紹介記事でも書いているので、そちらも合わせてご覧いただければと思います。
【WordPress】プラグイン編 – WordPressでホームページを作ろう
https://www.dailyupblog.com/hp/1343/
それではいきましょう。
Contact Form7をインストールする
早速、ご自身のWordPressにContact Form7をインストールしてみましょう。
WP管理画面左メニューの「プラグイン」＞「新規追加」をクリックしてください。
右上の検索窓に「Contact Form7」と検索してください。
検索結果で表示された「Contact Form7」の「今すぐインストール」をクリックしてください。
その後に表示される「有効化」をクリックして、有効化しましょう。
左メニューに「お問い合わせ」が表示されたらOKです。
Contact Form7の使い方
Contact Form7の使い方をご紹介していきます。
お問い合わせフォームの作成
WP管理画面左メニューの「お問い合わせ」をクリックすると下記のように、「コンタクトフォーム 1」というフォームがデフォルトで用意されています。
この「コンタクトフォーム 1」をクリックするとフォームの編集画面に飛びます。
ここでは主に4項目の設定があります。
フォーム
ここでは、HTMLベースでフォームを編集できます。
各フォーム項目はショートコードで記述します。
追加するには、入力エリアの上にある「テキスト」〜「送信ボタン」までをクリックすることで追加できます。
入力エリア内のカーソルを合わせている箇所に追加されます。
試しにテキストフォームを追加してみましょう。
入力エリア内の1行目にカーソルを合わせて、入力エリア上の「テキスト」をクリックしてみてください。
下記のようなダイアログボックスが表示されると思います。
ダイアログボックスで様々な設定をしていきます。
- 項目タイプ・・・必須項目かどうか
- 名前・・・フォームのname属性（半角英数字で設定してください）
- デフォルト値・・・デフォルトで入る値を設定
- プレースホルダー・・・ユーザーの参考となるグレー文字、入力値ではない
- Akismet・・・送信者の名前を入力する項目だった場合、チェック
- ID属性・・・フォームのidを設定
- クラス属性・・・フォームのclassを設定
このダイアログで設定する内容はフォームの種類で変わります。
設定したら、「タグを挿入」をクリックするとカーソルの位置にタグが挿入されます。
Contact Form7で設置できるフォームを以下にまとめました。
| テキスト | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・送信者の名前の入力を要求する項目 ・Akismet ・ID属性 ・クラス属性 |
| メールアドレス | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・送信者の名前の入力を要求する項目 ・Akismet ・ID属性 ・クラス属性 |
| URL | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・送信者の名前の入力を要求する項目 ・Akismet ・ID属性 ・クラス属性 |
| 電話番号 | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・ID属性 ・クラス属性 |
| 数値 | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・範囲 ・ID属性 ・クラス属性 |
| 日付 | 【オプション】 ・項目タイプ ・名前 ・デフォル値 ・このテキストを項目のプレースホルダーとして使用する ・範囲 ・ID属性 ・クラス属性 |
| テキストエリア | 【オプション】 ・項目タイプ ・名前 ・デフォルト値 ・このテキストを項目のプレースホルダーとして使用する ・ID属性 ・クラス属性 |
| ドロップダウンメニュー | 【オプション】 ・項目タイプ ・名前 ・オプション ・複数選択肢を可能にする ・空の項目を先頭に挿入する ・ID属性 ・クラス属性 |
| チェックボックス | 【オプション】 ・項目タイプ ・名前 ・オプション ・ラベルを前に、チェックボックスを後に配置する ・ 個々の項目を label 要素で囲む ・チェックボックスを排他化する ・ID属性 ・クラス属性 |
| ラジオボタン | 【オプション】 ・名前 ・オプション ・ラベルを前に、チェックボックスを後に配置する ・個々の項目を label 要素で囲む ・ID属性 ・クラス属性 |
| 承諾確認 | 【オプション】 ・名前 ・同意条件 ・オプション ・ID 属性 ・クラス属性 |
| クイズ | 【オプション】 ・名前 ・クイズと回答 ・ID 属性 ・クラス属性 |
| ファイル | 【オプション】 ・項目タイプ ・名前 ・ファイルサイズの上限 (バイト) ・受け入れ可能なファイル形式 ・ID 属性 ・クラス属性 |
| 送信ボタン | 【オプション】 ・ラベル ・ID属性 ・クラス属性 |
メール
ここでは、送信先メールアドレスや送信元メールアドレス、送信メールのテンプレなどを設定します。
設定する項目を以下にまとめました。
| 送信先 | 送信先メールアドレスを入力してください。 【デフォルト値】 [_site_admin_email] |
| 送信元 | 送信元メールアドレスを入力してください。 【デフォルト値】 [_site_title] 設定メールアドレス |
| 題名 | 送信メールの題名（タイトル）を入力してください。 【デフォルト値】 [_site_title] “[your-subject]” |
| 追加ヘッダー | 送信メールのヘッダーに追加する内容があれば、ここに入力してください。 【デフォルト値】 Reply-To: [your-email] |
| メッセージ本文 | 送信メールのメッセージ本文をここに入力してください。 設定した各フォームのnameを[]で囲って、入力値を出力することができます。 例）「your-name」というnameのテキストボックス→[your-name] 【デフォルト値】 差出人: [your-name] <[your-email]> 題名: [your-subject] メッセージ本文: [your-message] — このメールは _site_title のお問い合わせフォームから送信されました 【補足】 「空のメールタグを含む行を出力から除外する」チェックボックスにチェックすると、未入力のフォームをメールから非表示にできます。 「HTML 形式のメールを使用する」チェックボックスにチェックすると、送信メールの内容をHTML形式にできます。 |
| ファイル添付 | ファイルアップロードフォームを設置していた場合、name名を[]で囲ったタグをここに入力してください。 |
下の「メール（2）」の部分の「メール（2）を使用」にチェックを入れると、お問い合わせを送ったユーザーへの自動送信メールの内容も設定することができます。
設定内容は先ほど表で紹介したものと同じになります。
メッセージ
ここでは、お問い合わせフォームに関する様々なメッセージを設定できます。
例えば、メールが正常に送信されなかった場合のエラーメッセージや入力不備が見つかった場合のメッセージなどを設定することができます。
ここはこだわりがなければ基本的にデフォルトのままの設定で問題ないと思います。
その他の設定
ここでは、お問い合わせフォームに関するその他の様々な設定を書くことができます。
例えば、動作の確認をするためのデモモードの設定をしたり、ログインしたユーザーしか送信できなくしたりする設定などを書くことができます。
いくつかその他の設定で設定できるものをまとめてみました。
| demo_mode: on | このコードを「その他の設定」に入力すると 実際に送信することなく動作の確認ができる（デモモード） |
| acceptance_as_validation: on | このコードを「その他の設定」に入力すると 承認確認チェックのエラーメッセージの位置を変更する |
| subscribers_only: true | このコードを「その他の設定」に入力すると サイトにログインしているユーザーのみ送信できるようにする（購読者限定モード） |
フォームをサイト上に表示する
フォームを制作したら、早速サイト上に表示しましょう。
制作したフォームはショートコードを設置することで表示することができます。
ショートコードは「お問い合わせ」の制作したフォームの一覧に記載されています。
このショートコードをコピーして、貼り付けましょう。
今回は固定ページで「お問い合わせ」ページを作成して、そこに設置します。
ショートコードを貼り付ける時は、ビジュアルエディタではなくて、コードエディタに貼り付けましょう。
「エディタ」＞「コードエディタ」から切り替えて、貼り付けます。
ショートコードを設置したページを公開して、ページを確認すると制作したお問い合わせフォームが表示されているのがわかります。
また、Contact Form7の注意点としては、確認画面はなく、入力画面から送信ボタンを押すと送信されるので、必ず承認確認ボタンを設置してください。
SMTP設定をする
今までご紹介した内容だけで、お問い合わせフォームからメールを送ろうとすると、お使いのメールによりますが、届いたメールが迷惑メールに振り分けられる可能性が高いです。
原因は様々です。
特に、WordPressのテーマや設定しているURLとサーバー側のプログラムのURLが異なっていることが大きな原因となります。
これは、「WP Mail SMTP」というプラグインを導入することで対策できます。
このプラグインは、レンタルサーバーからメールを送るのではなく、SMTPというサービスを経由してメールを送ることが可能なプラグインになります。
WP Mail SMTPをインストール
Contact Form7同様に、「プラグイン」＞「新規追加」から、「WP Mail SMTP」と検索をかけて、インストールしてください。
インストールしたら、左メニューに「WP Mail SMTP」の項目が増えるので、クリックして、設定画面に移動してください。
※最初にセットアップの画面が出るので、次から紹介する設定をこの段階で、設定してしまっても結構です。今回はこのセットアップはあえてスキップして進めます。
設定画面は以下のようです。
今回は、お使いのレンタルサーバーのドメインメールで設定する前提ですので、そのやり方をご紹介します。
このやり方は、前提として、レンタルサーバーでメールサーバーを利用しつつ、独自ドメインのメールアドレスを作成しているとします。
下記のように入力していってください。
| 送信元メールアドレス | 独自ドメインのメールアドレスを入力 |
| フォーム名 | サイト名と同じものを入力 |
| 返信先 | 送信元アドレスを返信先 (return-path) として設定にチェック |
| メーラー | その他のSMTPを選択 |
| SMTP ホスト | サーバーのホスト名を入力 |
| 暗号化 | SSLにチェック |
| SMTP ユーザー名 | 独自ドメインのメールアドレスを入力 |
| SMTP パスワード | メールサーバーで設定されているパスワードを入力 |
また、WP Mail SMTPはGmailやoutlookなど、他のメーラーでも設定できるので、その際はそれらの方法で設定してみてください。
※Gmailなどを設定するときはクライアントIDなどの入力があるので、Googleアカウント側で必要な情報を取得する必要があります。
このようにSMTP設定をするだけで、迷惑メールへの振り分けの対策ができます。
スパム対策をする
お問い合わせフォームなどを使っていると、スパムメールなどを送られることがあります。
時には大量のスパムメールが送られてきて、メールサーバーがパンクしてしまうほどの時もあります。
スパム対策もWordPressでフォームを扱うとなると必要になってきます。
WordPressでできる主なスパム対策は下記二つです。
- 「Honeypot for Contact Form 7」プラグインを導入する
- 「reCAPTCHA」を導入すr
Honeypot for Contact Form 7
Honeypot for Contact Form 7」は、Contact Form7用のスパム対策用のプラグインです。
このプラグインを導入することで、スパムメールを防ぐことができます。
設定は非常に簡単ですので、初心者の方はこちらがおすすめです。
導入手順
まず、管理画面左メニュー「プラグイン」＞「新規追加」にて、「Honeypot for Contact Form 7」と入力して、インストール・有効化してください。
インストールしたら、「お問い合わせ」から制作したお問い合わせフォームの編集画面に移動してください。
「フォーム」の上に「ハニーポット」が追加されているのがわかると思います。
ハニーポットの設置箇所は、送信ボタンの上なので、[submit “送信”]の上にカーソルを合わせて、「ハニーポット」をクリックしてください。
そうすると、下記のようなダイアログが表示されます。
必ず入力しなければならないのは、「名前」です。
一応ハニーポットの公式では、セキュリティ的にこのデフォルトの「honeypot」付きの文字列は使わない方がいいとのことです。
推測されにくい独自の文字列を入れてもいいと思います。
設定内容を入力できたら、タグを挿入してください。
これで、簡単にハニーポットが導入できました。
reCAPTCHA
ハニーポットでもスパムメールを防ぎきれないことがあります。
その場合はreCAPTCHAを挿入することをお勧めします。
reCAPTCHAとは、Googleが提供しているスパム対策のサービスです。
Googleが提供しているだけあって、かなり強力なので、ハニーポットではなくて、こちらを設定する方がいいかもしれません。
導入手順
まず下記にアクセスして、上部の「v3 Admin Console」をクリックしてください。
https://www.google.com/recaptcha/about/
そうすると下記のような画面に移動します。
| ラベル | リキャプチャを設置したいサイトドメインを入力 |
| reCAPTCHA タイプ | reCAPTCHA v3を選択 |
| ドメイン | リキャプチャを設置したいサイトドメインを入力 |
| オーナー | Gmailのメールアドレスを入力、デフォルトで入力されている |
| reCAPTCHA 利用条件に同意する | チェックを入れる |
設定を入力したら、「送信」を押してください。
すると下記のページに移動します。
上記の「サイトキー」と「シークレットキー」は後で使うので、控えておきましょう。
続いて、WP管理画面の「お問い合わせ」＞「インテグレーション」と移動して、「reCAPTCHA」の「インテグレーションのセットアップ」をクリックしてください。
すると下記のように「サイトキー」と「シークレットキー」の入力フォームが出るので、ここに先ほど控えた二つを入力して、「変更を保存」を押しましょう。
これで設定完了です。
サイトを確認して、画面右下にリキャプチャマークが表示されていればOKです。
これでreCAPTCHAを導入することができました。
さいごに
いかがだったでしょうか。
今回はContact Form7の使い方とカスタマイズやスパム対策などのやり方についてご紹介しました。
お問い合わせフォームはホームページにおいて必要不可欠なものなので、プラグインを使ってここまで簡単に作成できたらとても助かりますよね。
また、スパム対策なども非常に大切なので、絶対に設定するようにしてください。
今回の記事が皆様のお役に立てれば幸いです。
関連記事