今回の記事では、WordPress プラグイン【Contact Form7】でお問い合わせフォームを作成・設置方法を解説します。
まず、お問い合わせフォームの設置すべき理由ですが
などがあります。
大きなトラブルに巻き込まれないため、読者に信用してもらうためにもブログを運営するときには必ずお問い合わせ先を表記しましょう。
目次
Contact Form7について
Contact Form7は、WordPress でお問い合わせフォームを作成できる定番のプラグインです。
基本設定を行えば、固定ページなどに挿入できるので、HTMLやCSSなどの専門知識がなくてもお問い合わせフォームが簡単に作ることができます。
また、外部のサービスと連携すること柔軟な対応が可能になります。
スパム対策で有名なreCAPTCHA も利用できます。（あとでページ内で紹介します）
「Flamingo」 というプラグインを合わせて使うことで、Contact Form7から送信されたメッセージをデータベースに保存することもできます。
では、実際にContact Form7の追加と設定を行います。
プラグインの追加
まず、WordPress 管理画面のメニューの「プラグイン」から「新規プラグインを追加」をクリックします。プラグインの追加画面右上の検索ボックスに「Contact Form7」を検索します。
Contact Form7の欄に表示されている、「今すぐインストール」をクリックします。
インストール後は、「今すぐインストール」のボタンが有効化に変わるため、「有効化」をクリックします。
お問い合わせフォームを作成・設定
次に、お問い合わせフォームを作成・設定していきます。
WordPress 管理画面のメニューの「お問い合わせ」から「新規追加」をクリックします。
コンタクトフォームを追加欄のタイトルを入力しましょう。タイトルはコンタクトフォーム識別用のため、任意のものでOKです。※外部に公開するタイトルではありません。
次は、設定タブを説明します。
Contact Form7 フォーム
「フォーム」タブでは、お問い合わせフォームの内容を設定します。
基本的には初期設定のままでOKです。他に合わせて取得したい情報があれば、入力フォームにカーソルを合わせて、追加したいボタンを押してフォームを追加します。
編集したら必ず「保存」をクリックしてください。
Contact Form7 メール
タブでは、自身に「お問い合わせが届きました」とお知らせの設定と、お問い合わせしたユーザーに「受け取りました」と伝えたりするために設定になります。
メールの項目
以下の内容は、「お問い合わせがあった時」の設定になります。
メール(2)の項目
「メール(2)」はお問い合わせしたユーザに「お問い合わせ受け付けました」と通知するための設定です。
デフォルトでは「メール(2)」はチェックが外れています。利用するにはチェックを入れて、「保存」をクリックしてください。メールがきちんと送信されたことを確認できると、お問い合わせしたユーザーも安心できると思われるので利用することおススメします。
「メール(2)」の送信先に[your-email]を設定する場合、「安全でないメール設定が十分な防御策なく使われている。」というエラーメッセージが表示されます。スパム対策（reCAPTCHA）の設定を行うとエラーメッセージが消えます。（あとで紹介します）
以上に関する設定は、お問い合わせに関わる重要な部分です。確実に設定を行いましょう。
Contact Form7 メッセージ
「メッセージ」では、お問い合わせフォーム上に表示される様々なメッセージを変更できます。
デフォルトのままでOKですが、お好みの内容に変更可能です。メッセージを変更した場合は、画面下部に表示される「保存」をクリックします。
以上で「Contact Form7」の設定は完了です。ちなみ「その他の設定」タブについて少し説明します。
Contact Form7 その他の設定
「その他の設定」では、項目に決まったフォーマットのコード片を追加することで、コンタクトフォームにカスタム設定を追加できます。
追加できるコードとして購読者限定モードというのがあります。
subscribers_only: trueこれは、ログインしているユーザーだけがContact Form7の送信を行えるようにするコードになります。もし、ログインしていないユーザーが送信しようとした場合、代わりにログインが必要だというメッセージが表示されます。
固定ページにフォームを設置
それでは次に、作成したお問い合わせフォームを固定ページに設置します。
まずは、固定ページを追加します。
WordPress 管理画面のメニューの「固定ページ」から「新規固定ページを追加」をクリックします。
お問い合わせぺージ用の固定ページ
次に、固定ページのタイトルやお問い合わせに関する内容を、任意で作成します。
以下の作成は入力例です。
Contact Form7のブロックを追加
作成した固定ページにお問い合わせのブロックを追加します。
上記のメッセージの下にカーソルを置き、左上の「＋」ボタンをクリックします。検索ボックスに「contact」と入力し、Contact Form 7のブロックを追加します。
Contact Form7 フォームを選択する
では、ブロックのプルダウンから先ほど作成したフォームを選択します。
プレビューで実際の表示を確認します。
問題なければ公開をクリックします。
Contact Form7 ショートコードで追加
コードを使って、ページに追加することもできます。
ショートコードをコピーする
まず、コンタクトフォームの画面で、ショートコードをコピーします。
ショートコードは後ほど固定ページに貼り付けるため、メモ帳などにコピーしておきます。
ショートコードのブロックを追加する
次に先ほど作成した固定ページを編集します。
フォームを挿入したい箇所にカーソルを置いて、左上の「＋」をクリックします。検索ボックスに「ショートコード」と入力して、ブロックを選択します。
メモ帳などにコピーしたショートコードをブロックに貼り付けます。
プレビューで実際の表示を確認します。
問題なければ公開をクリックします。
Contact Form7 表示を確認する
最後に、公開したページURLにアクセスして、フォームが表示されていれば完了です。
スパム対策をする（reCAPTCHA）
お問い合わせフォームを設置したら、コメント同様、スパムが届くことがあります。
お問い合わせフォームを悪用したスパムが多く発生しているため、スパム対策はしておきましょう。
対策として、「reCAPTCHA」というGoogle が無料で提供している認証ツールを使用します。このサービスはGoogle のアカウントを取得していれば使用できるため、ぜひ使用しましょう。
「Google reCAPTCHA」にアクセス
まず、「Google reCAPTCHA」のサイトにアクセスします。
右上の「v3 Admin Console」をクリックします。次にGoogle アカウントでログインします。アカウント持っていないという方は、作成しましょう。
必要事項の入力
各項目を入力し、送信をクリックします。入力内容は以下のとおりです。
「サイトキー」と「シークレットキー」
次に、「サイトキー」と「シークレットキー」が表示されるので、メモ帳にコピーしておきます。
reCAPTCHA をお問い合わせに設定
それでは、WordPress 管理画面に戻り、メニュー「お問い合わせ」から「インテグレーション」をクリックします。
「他のサービスとのインテグレーション」の画面が表示されたらreCAPTCHA の項目をセットアップします。
「サイトキー」と「シークレットキー」を入力
次に、先ほどメモした「サイトキー」と「シークレットキー」を貼り付けてください。
最後に、変更を保存をクリックすれば、reCAPTCHA の設定は完了です。以上でスパム対策は完了です。
reCAPTCHA の補足
以前登録したreCAPTCHA のメイン画面では、追加で設定を行ったり、トラフィックに関するステータスが確認できます。
- 作成したreCAPTCHA を選択できます。
- トラフィックに関するステータスの表示になります。
- 次の内容が可能です。
そして、「サイトキー」と「シークレットキー」は「歯車マーク」クリック、「reCAPTCHA のキー」という項目をクリックすることで表示ができます。
お問い合わせフォームのリンクを追加
固定ページにサイト上のリンクを作成してアクセスできるようにしましょう。
まずは、メニューを作成して、固定ページのリンク追加します。
メニュー画面を表示
左メニューバーの「外観」からカーソルを合わせて「メニュー」をクリックします。
「外観」を直接クリックしてからメニューをクリックしても構いません。
メニューを作成
次に、任意の名前を入力します。「メニュー設定」では、必要項目にチェックをいれます。
今回は、例としてフッターにお問い合わせを表示させたいので「フッターメニュー」にチェックをいれます。
項目に問題なければ「メニューを作成」をクリックします。
メニュー項目を追加
「メニュー項目を追加」の項目から追加したい固定ページにチェックを入れて、「メニューに追加」をクリックします。
作成した固定ページ、お問い合わせフォームにチェックを入れます。
項目に問題がなければ「メニューを保存」をクリックします。
メニューの表示を確認
最後に、指定した場所にメニューが表示されているかページにアクセスして確認します。
「設定ミスでお問い合わせフォームが機能していなかった」ということがないように、 設定完了後、お問い合わせフォームの動作確認を忘れずに行いましょう。
まとめ
いかがだったでしょうか。WordPress プラグイン【Contact Form7】を使用したお問い合わせページを作る方法を紹介しました。
お問い合わせフォームを設置することで、仕事の依頼をもらえる可能性があったり、信頼度が上がったりとたくさんのメリットがあります！
この中でもっとも重要なのが「連絡手段を作る」ことになります。以外と簡単にお問い合わせフォームが作成できるのでぜひこの機会に作成してみてください。
以上、最後までお読みいただきありがとうございました！
コメント