Contact Form 7プラグインでお問い合わせメールフォームを作る

Contact Form 7プラグインでお問い合わせメールフォームを作る

ブログ訪問者の方が管理者の方と連絡を取ろうと思った場合、通常は管理者がメールアドレスを記載するかメールフォームを設置するかのどちらかだと思います。

前者は一昔前は当然のように行われていた方法ですが、スパムの格好の餌食となってしまいます。

後者はより安全な方法ではありますが、メールフォームを自分で設置しようとするとある程度の知識が必要となってしまい敷居が高くなってしまいます。

しかしWordPressではContact Form 7というプラグインを利用する事によって、シンプルかつ柔軟なメールフォームを設置する事ができます。

様々なスパム対策も可能なContact Form 7プラグインのインストール方法と使い方をご紹介します。

スポンサーリンク

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

まずはContact Form 7プラグインのインストールと有効化を行ってContact Form 7を利用できるようにします。

インストールと有効化の手順が分からない方は以下のページを参考にして下さい。

WordPress(ワードプレス)プラグインのインストールと有効化

2016.11.16

Contact Form 7の設定方法

Contact Form 7プラグインを有効化すると左のメニューバーに「お問い合わせ」という項目が追加されます。

【お問い合わせ】→【新規追加】を選択します。
コンタクトフォームの新規追加

コンタクトフォームの設定ページに切り替わりますのでまずは「フォームの名前」を入力します。

あくまでも管理する為の名前なので管理しやすい任意の名前にします。
コンタクトフォームの名前を入力

フォームの設定

フォームのタブでは記事や固定ページで表示されるフォームの設定を行えます。
※最低限のHTMLの知識が必要です。

デフォルトでは、「お名前」「メールアドレス」「題名」「メッセージ本文」4つのフォームと「送信」ボタンが設定されています。
デフォルトのフォーム設定タブ

もし何かのアンケートを取る為のフォームであれば必要な項目を選択し追加していきます。

例えばサイトURLのフォームを追加したい場合は、上部の「URL」のタグを選択します。
URLのタグを選択

URLフォームの設定ページが開くので、以下を参考に設定して下さい。

  • 項目タイプ:入力を必須にしたい場合はチェックを入れます。必須項目に未入力のまま送信しようとするとエラーが表示されるようになります。
  • 名前:フォームタグの名前を入力します。通常は最初から入力されている名前のままでOK。
  • デフォルト値とプレースホルダー:デフォルト値に文字を入力し、「プレースホルダーとして使用する」にチェックを入れると以下のようなフォームの入力例が表示できます。
    プレースホルダー例
  • Akismet:チェックを入れるとスパムメールを減らす事ができます。Akismetプラグインを導入している必要があります。必要なメールがスパム判定されると困るので通常はチェックをしない方がいいように思います。スパムが来るようになってからチェックを入れるように変更でもいいでしょう。
  • ID属性:HTMLとCSSの知識がある場合のみ変更して下さい。
  • クラス属性:ID属性と同様HTMLとCSSの知識がある場合のみ変更して下さい。

フォームの設定が終わればタグを挿入を選択し、必要な箇所にタグを設置して下さい。
タグを挿入

通常のお問い合わせフォームであればデフォルトのままでも問題なく使用できると思います。

ただしContact Form 7では「確認用の画面」が表示されずに送信されてしまう為、誤送信を防ぐ為にも次項の項目で説明するいずれかの方法を取り入れておいた方がいいでしょう。

メールの誤送信を防ぐ手段

先ほども解説したようにContact Form 7では「確認用の画面」が表示されずに送信されてしいます。

例えばメールアドレスを入力中にキーボードのEnterを押してしまうと入力途中の状態でメールが送信されます。

こういった誤送信を防ぐ手段として主な対策は以下の方法があります。

  1. 確認画面を表示するプラグインを導入する
  2. 承諾確認タグを設置する
  3. reCAPTCHAタグを設置する

僕の個人的なオススメは2番の承諾確認タグを設置する方法です。

1番を取り入れない理由は、確認画面を表示するプラグインの作者はContact Form 7の作者とは別の方です。

今後Contact Form 7の仕様が変わった際に不具合を起こす可能性がありますし、不具合を起こした際に対応してもらえる保障がない事。

そして単純にプラグイン同士が競合する可能性を少しでも減らす為になるべく不必要だと思うプラグインを導入したくないというのが理由です。

次に3番のreCAPCHAタグの設置です。

reCAPCHAというのは、何かを送信する時にスパムではない事の証明として「画像に表示されている文字や数字を入力してください」というよく見かけるアレです。

機能としてはスパムを防ぐためのものなのですが、間違ってEnterを押した際にreCAPCHAの認証を行っていないと送信に失敗するので結果的に誤送信を防げるという訳ですね。

reCAPCHA自体はスパム防止としてはすごく便利な機能ではあるものの、設置するのに少し手間がかかる点と訪問者の方にも手間をかけてしまう点という意味であまりオススメしていません。

そして僕が2番の承諾確認タグを設置するのをオススメする理由は以下です。

  • Contact Form 7に最初からある機能を利用しているので設置が簡単。
  • 訪問者の方もチェックするだけ(逆の挙動も可)なので手間いらず。
  • チェックをしないと送信できないのである程度スパムを防げる。

こういった理由からここでは承諾確認タグを設置する方法のみ解説します。

もし確認画面を表示するプラグインを導入されたい方は「Contact Form 7 add confirm」で検索して下さい。

reCAPCHAを導入されたい方はこちらの公式ページ「reCAPCHA」よりご確認下さい。

承諾確認タグを設置する方法

フォームの設定画面にて【承諾確認】タグを選択します。
承諾確認タグを選択

承諾確認フォームの設定画面が開きますので、それぞれ設定します。

僕はデフォルトのまま使用しています。
承諾確認フォームの設定

タグを挿入する位置としては送信ボタンの手前がいいでしょう。

ここで注意ですが、ただタグを設置するだけだと意味の分からないチェックボックスだけがぽつんと設置された状態になってしまうので、きちんと説明文を入力します。

僕の場合を例に挙げるとこんな感じです。
承諾確認タグの設置例

以上で承諾確認タグの設置は終わりです。

メールの設定

メールタグの設定では、メールフォームから送信されたメールの送信先や送信内容などの受け取り設定が行えます。
メールタグの設定

設定できる内容は以下になります。

  • 送信先:メールを送信された際の受信先のアドレスを設定。複数のメールアドレスを設定したい場合はカンマ区切りで入力。
  • 送信元:メールの送信元のアドレスを設定。デフォルトではWordPressの一般設定で指定しているメールアドレス。
  • 題名:受け取るメールの件名を設定。
  • 追加ヘッダー:受け取ったメールの返信先アドレスを設定。基本はデフォルトのままで問題なし。Cc:やBcc:も設定可。
  • メッセージ本文:フォームタグで設定した内容が表示される。基本的にはそのままで問題ないが、自分が見やすいように変更してもいいと思います。

自動返信メールの設定

デフォルトではメールフォームから送信してもらった相手へ自動返信メールは送られません。

ですが自動返信メールがあった方がきちんと送信できた事の安心にも繋がります。

「どんな内容のメール送ったかな?」といった場合も後で確認できるので是非設定しておきましょう。

先ほどのメールタブの画面の下に進むと【メール(2)を使用】というチェックボックスがありますのでチェックを入れます。
メール(2)を使用にチェック

チェックを入れると自動返信メールの設定画面が現れるので以下を参考に設定します。

  • 送信先:必ずデフォルトのままの[your-email]にしておく。
  • 送信元:メールの送信元のアドレスを設定。デフォルトではWordPressの一般設定で指定しているメールアドレス。
  • 題名:相手へ送るメールの件名を設定。自動返信と分かる内容が好ましい。
  • 追加ヘッダー:相手が返信する際の返信先アドレスを設定。
  • メッセージ本文:自動返信メールの本文を設定。自動返信である事や相手が入力した内容を確認できるようにしましょう。
  • ファイル添付:僕は使用していないので添付の方法はわかりません。ゴメンナサイ。

メッセージの設定

メッセージが正常に送信できた場合や、送信ができなかった場合のメッセージを設定できます。

ほとんどの場合はデフォルトのままで大丈夫だと思います。

その他の設定

コードを追加する事でメールフォームの挙動をカスタムできます。

どのような事が出来るかはこちらの公式ページ「その他の設定」をご覧下さい。

全ての設定が終わりましたら必ず保存を忘れないようにして下さい。

メールフォームの確認

全ての設定が終わればメールフォームがきちんと出来ているか確認をします。

コンタクトフォームの編集ページに記載されているショートコードをコピーし、メールフォームを設置したい記事や固定ページに貼り付けて公開します。
ショートコードをコピー

実際に公開したページのメールフォームを確認し、自分で問い合わせをしてみましょう。
お問い合わせメールフォームの確認

きちんとメールが届いているか、送信されてくるメールの内容や自動返信の内容などに問題がなければ完了です。

スポンサーリンク
Contact Form 7プラグインでお問い合わせメールフォームを作る

コメントを残す

メールアドレスが公開されることはありません。