浅賀理生(あさかまさお)「WordPressにお問い合せページを作りたい！」
「お問い合せフォームを簡単に設置できるプラグインは無いのか？」
「スパム対策も万全にしたい！」
などWordPressにお問い合せフォームを設置したいけど、作り方が分からない、またはどのプラグインを導入すればいいのか悩んでいる方も多いのではないでしょう？
そこで今回は、WordPressにお問い合せページを簡単に設置できる「Contact Form 7」というプラグインを使った問い合わせフォームの作り方からスパム対策までを解説していきます。
Contact Form 7とは
「Contact Form 7」は、難しい専門知識なしで簡単にお問い合せフォームを作ることが出来るWordPressプラグインです。
開発者は日本人の三好 隆之さんで、有効インストール数5万回以上を誇り日本だけでなく世界中で愛されています。
Contact Form 7のインストール方法
まずは管理画面の左側に並ぶメニューから「プラグイン→新規追加」へと進んでいきます。
次に検索窓へ「Contact Form 7」と入力します。
するとプラグイン一覧の先頭に「Contact Form 7」が出てきますので、「今すぐインストール」のボタンをクリックし、「有効化」のボタンを押せばインストール完了です。
Contact Form 7の設定方法
「Contact Form 7」をインストール完了後、管理画面の左側メニューに「お問い合わせ」の項目が追加されていますので、こちらをクリックし、更に「コンタクトフォーム」へ進んでください。
次に「コンタクトフォーム1」という名前のお問い合わせフォームが、すでに作られていますので、こちらのフォームをクリックします。
お問い合わせフォームのさまざまなアレンジが出来るContact Form 7ですが、特にこだわりが無いのであればデフォルトの設定でも十分機能します。
よってまずはデフォルト設定のお問い合わせページを作成しサイトに反映させていきましょう。
ちなみにアレンジの各項目の説明は以下になります。
・フォーム
お問い合わせフォームのテンプレートを設定します。
・メール
実際にお問い合わせが来た際、送信先のメールアドレスやメール内容を設定します。
・メッセージ
お問い合わせフォーム送信者に対してのメッセージを変更できます。
・その他の設定
コードを入力することでお問い合わせフォームに色々な機能を加えることが出来ます。
お問い合わせページをサイトに反映させる
Contact Form 7で作成したお問い合わせページをサイトに反映させる方法として、まずは固定ページにお問い合わせフォームを設置していきます。
次に固定ページに反映させたいお問い合わせフォームのショートコードをコピーします。
ショートコードは管理画面の左メニュー「お問い合わせ」→「コンタクトフォーム」から確認できます。
続いて「固定ページ」→「新規追加」で固定ページにお問い合せページを作成していきます。
ページタイトルは何でも良いですけど、今回は定番の「お問い合わせ」と致します。
そして先ほどコピーしておいたお問い合わせフォームのショートコードを本文に貼り付けします。
最後に「公開」をクリックすれば固定ページのお問い合せページが完成です。
グローバルナビゲーションに設置する
お問い合せフォームをグローバルナビゲーションに設置する場合は、管理画面の左側に並ぶメニュー「外観」→「メニュー」へ進んでいきます。
メニュー構造のメニュー名を今回は分かりやすいように「グローバルナビ」と致します。
名前は分かりやすければ何でもよいので適宜変えてください。
メニュー「グローバルナビ」のなかに固定ページのお問い合せページを追加します。
お問い合せにチェックを入れて「メニューに追加」をクリック。
メニューの位置は「メイン」にチャックを入れて最後に「メニューを保存」をクリックすればグローバルナビゲーションにお問い合せフォームが反映されます。
＊メニューの位置の項目はWordPressのテーマによって呼び名が異なるのでご注意ください。
サイドバーにお問い合せフォームを開いた状態で設置する
サイドバーにお問い合わせフォームを設置するには、まず管理画面の左側メニューにある「お問い合わせ」→「コンタクトフォーム」と進み、設置したいお問い合わせフォームのショートコードをコピーしておきます。
次に「外観」→「ウィジェット」と進み、利用できるウィジェット一覧から「テキスト」をドラッグ＆ドロップでサイドバーのお問い合わせフォームを表示したい場所へと移動させます。
「テキスト」をクリックし、タイトル名は任意で「お問い合せ」とし、本文内に先ほどコピーしたお問い合わせフォームのショートコードを貼り付けて「保存」→「完了」をクリックすれば完成です。
グローバルナビゲーションに設置した時とは異なり、お問い合わせフォームを開いた状態で設置できました。
Contact Form 7のスパム対策
WordPressを長く運営していけば分かりますが、お問い合せのスパムメールは毎日のように送られてきます。
いちいちスパムメール処理に時間と労力を奪われるのは非常に勿体ないことなので、Contact Form 7にスパム対策を施しておきましょう。
Contact Form 7にAkismetを設定する
AkismetはWordPressをインストールした際にデフォルトで入っているプラグインです。
コメントスパム対策としてほとんどのサイト運営者が利用しているプラグインになります。
Contact Form 7にはAkismetの優れたスパム対策機能を利用できる設定があるのでその設定方法をお伝えしていきます。
Akismetプラグインを有効化しているのを前提とし、管理画面の左側にあるメニュー「お問い合せ」→「コンタクトフォーム」へ進みます。
次に設置したお問い合せフォームをクリックし、フォームのテンプレートを編集していきます。
[text* your-name]の部分を[text* your-name akismet:author]に変更。
[email* your-email]の部分を[email* your-email akismet:author_email]に変更。
もしアレンジで、URLを記入する項目を追加しているのであれば akismet:author_url をtext your-urlのあとに追記します。
[text your-url]の部分を[text your-url akismet:author_url]に変更します。
最後にContact Form 7にAkismetがしっかり設定されているか確認します。
実際にお問い合せフォームから送信者の名前を「viagra-test-123」と記入してメールを送ります。
Akismetのスパム機能が設定されていれば、メール送信しても「メッセージの送信に失敗しました。後でまたお試しください。」と表示が出てメールを送ることが出来ません。
Contact Form 7にreCAPTCHAを設定する
画像のようなマークや「私はロボットではありません」のチェックボックスをwebサイトのお問い合わせフォームや会員登録の際、目にしたことがあると思います。
それがGoogleが提供するスパム対策システム「reCAPTCHA」になります。
Akismetに続き、今度はreCAPTCHAのスパム対策システムをContact Form 7に設定していきます。
なお「reCAPTCHA」を利用するにはグーグルアカウントの取得が必要なのでご注意ください。
まず管理画面の左側にあるメニュー「お問い合せ」→「インテグレーション」へ進み、reCAPTCHA内の右上にあるgoogle.com/recaptchaのリンクをクリックします。
「reCAPTCHA」の設定ページへ飛びますので、続いてページ右上の「管理コンソール」をクリックします。
上から順番に記入項目をご説明していきます。
・ラベル
分かりやすい名前を入力してください。
サイト名で良いと思います。
・reCAPTCHAタイプ
reCAPTCHAタイプは「reCAPTCHA v3」を選択してください。
reCAPTCHA v2は最新のContact Form 7に対応していません。
・ドメイン
reCAPTCHAを利用するサイトのドメインを記入します。
注意点として、通常webサイトのドメインは、http://〇〇〇〇〇/となっていますが、http://またはhttps://と最後の/を省いた部分のみ記入してください。
・オーナー
Googleアカウントを取得しているメールアドレスを記入します。
アカウントにログイン済みなのでメールアドレスは既に記載された状態だと思います。
・reCAPTCHA利用条件に同意する
利用規約を読み納得の上でreCAPTCHA利用条件に同意しましょう。
・アラートをオーナーに送信する
何らかのトラブルが発生した場合、グーグルアカウント登録のメールアドレスにアラートメールが送信されますのでチェックを入れておきましょう。
最後に「送信ボタン」をクリックします。
続いてreCAPTCHAを登録したサイトの「サイトキー」と「シークレットキー」が表示されるので、メモ帳などのテキストエディタにコピぺしておきましょう。
再びWordPress管理画面の左側メニュー「お問い合せ」→「インテグレーション」へ進み、今度はreCAPTCHAの「インテグレーションのセットアップ」をクリックします。
先ほどコピペしておいた「サイトキー」と「シークレットキー」をそれぞれ入力して「変更を保存」をクリックすればreCAPTCHAの設定は完了です。
あとは確認として実際にサイトを開き、ページ右下にreCAPTCHAのマークが表示されていれば設定は完璧です。
まとめ
「Contact Form 7」のインストール方法や使い方、スパム対策についてお伝えしてきました。
「Contact Form 7」は専門知識がなくても簡単にお問い合せページが出来てしまい、加えてAkismetやreCAPTCHAを利用して、スパムメール対策も強固です。
まさにWordPressでサイトやブログを運営する方には必至のプラグインと言えます。
是非一度は「Contact Form 7」を使ってみて、その素晴らしさを味わってみてください。