Webサイトを運営していると訪問したユーザーからの問い合わせフォームを作成したいという方も多いと思います。仕事の案件獲得につながったり、Webサイトの改善につなげる貴重な意見が寄せられるかもしれません。
WordPressでは問い合わせフォームをショートコードを記述するだけで簡単に実装できる便利なプラグインがあります。今回はその中でも人気のある「Contact Form 7」を使って問い合わせフォームを作る方法をご紹介します。
目次
問い合わせフォームの作成
インストール方法と基本的な設定から解説します。
Contact From 7のインストール
管理画面「プラグイン」→「新規追加」より”Contact From 7”をインストールします。
インストールが完了したら、そのままプラグインを有効化してください。
問い合わせフォームの設定
管理画面「お問い合わせ」→「新規追加」から問い合わせフォームを作成していきます。問い合わせフォームは複数作成することが可能です。
フォーム
「フォーム」では、ページに表示させる問い合わせ内容の入力欄を設定します。デフォルトでは、”お名前”、”メールアドレス”、”題名”、”メッセージ本文”、”送信ボタン”が設定されています。エディター上部にあるボタンを使って、入力欄を編集しましょう。HTMLで記述されていますので、テキスト文章を書き換えることで、任意の文言に変えることもできます。
メール
「メール」では、問い合わせが送られた際に、自信が受け取るための送信先メールアドレス、送られてくる送信元メールアドレス、題名、メールのヘッダーに表示される追加ヘッダー、メッセージのテンプレになるメッセージ本文を設定できます。
メッセージ
「メッセージ」では、訪問者が問い合わせを送った際に、自動返信メールに表示する内容を設定します。デフォルトのままでも問題ありません。
その他の設定
「その他の設定」では、特定のコマンドを記述することで、ログインしているユーザーのみ問い合わせフォームを表示したり、フォームの送信をトラッキングできるような設定にすることができます。
問い合わせフォームの表示
デフォルトの設定のままでも十分に機能します。設定が完了したら、保存ボタンをクリックしましょう。フォームが作成されると、ショートコードが発行されます。
作成した問い合わせフォームを使用するときは、このショートコードを任意のページに貼り付けるだけです。
無事、問い合わせフォームを設置することができました。
実際にテストを送信してみます。
編集画面「メール」で設定した送信先メールアドレスにこのようなメールが届きます。
問い合わせフォームのカスタマイズ
問い合わせフォームは、エディター上部のボタンをクリックすることで項目を追加することができます。
問い合わせフォームに項目を追加する
追加したい項目をクリックします。項目の設定画面が表示されるので、入力していきましょう。
フォームタグの生成
「名前」は項目に対するidのようなものです。各項目に名前をつけて、識別できるようにします。
デフォルトでなにか入力しておきたい場合は、「デフォルト値」に任意の文言または値を入力しましょう。プレースホルダーとして記入しておきたい場合は「プレースホルダーとして使用する」にチェックを入れます。
「ID属性」、「クラス属性」はフォームのスタイルを編集したい場合に記入します。特に必要がなければ未記入でも問題ありません。
追加する項目によって、設定内容は少し変わりますが、基本的には同様の作業です。
設定が完了したら、「タグを挿入」をクリックします。
フォームにショートコードを記入する
タグ（ショートコード）を生成したら、フォームに記入していきます。任意の場所に記入しましょう。HTML記法なので、適宜HTMLタグで編集も可能です。今回は<label>タグで囲みました。
「メール」のメッセージ本文に追加する
「フォーム」にてタグ（ショートコード）を追加したら、「メール」のタブに移動します。メッセージ本文も合わせて項目を追加しておきましょう。
追加できれば、これで編集は完了です。「保存」ボタンを忘れずにクリックしましょう。
追加したい固定ページにタグを貼り付ける
完成したフォームをページに実装していきます。実装したいページの編集画面より、生成したフォームのタグ（ショートコード）を記入するだけです。
公開し、ページを確認しましょう。
無事実装できました。
reCAPTCHAの設定
reCAPTCHAはメールフォームからのスパム対策として実装されます。問い合わせフォームに手当たり次第に自動でスパムメールを送信する攻撃をブロックするため、人間による認証を求めます。
reCAPTCHAを利用するにはGoogleアカウントでサイトキーとシークレットキーを取得する必要があります
reCAPTCHAにWebサイトを登録
以下のURLから取得しましょう。
https://www.google.com/recaptcha/admin
URLにアクセスすると、reCAPTCHAを実装するWebサイトの登録画面が表示されます。
「Label」に任意の名前をつけ、「Domains」実装するWebサイトのドメインを入力します。
「Choose the type of reCAPTCHA」は、reCAPTCHAの種類を選びます。今回は一般的なreCAPTCHA V2を選択しました。
入力が完了したら、「Register」をクリックしてください。
サイトキーとアクセスキーを取得
Webサイトの登録が完了したら、サイトキーとシークレットキーが表示されます。忘れないようにメモしておいてください。
Contact Form 7にサイトキーとアクセスキーを設定する
管理画面「お問い合わせ」→「インテグレーション」より先ほど取得したサイトキーとアクセスキーを設定しましょう。
これで設定が完了です。問い合わせフォームにreCAPTCHAを実装できるようになりました。
フォーム部品のデザイン
問い合わせフォームに送信前の確認画面を追加する
Contact Form 7は設定がとても簡単で、便利プラグインですが、ユーザーがフォームを送信する際に確認画面がありません。これでは、ユーザーがフォームの内容を確認できませんし、間違いなく送信できているか不安になります。
そういった場合、プラグイン「Contact Form 7 add Confirm」を使えば簡単に、送信フォームに確認画面を実装できます。
以下の記事で、具体的な設定方法を解説していますのでご参考ください。
問い合わせフォームを設置したページにSSL化を実装する方法
最近では、Webサイトの閲覧する際のクライアントとWebサーバーの通信をSSL化するHHTPS通信を実装しているWebサイトが多くなってきました。
常時HTTPS通信ができれば問題はないのですが、コスト面や閲覧者の環境によって重要な情報を扱う一部のページのみSSL化を実装したいという方もいるのではないでしょうか。
以下の記事では、問い合わせフォームを設置したページのみSSL化を実装する方法を紹介しています。
詳しい設定方法は以下の記事を参考にしてください。
WordPressで問い合わせフォームを実装する方法のまとめ
Contact Form 7は安定性のある人気のプラグインです。実装方法も簡単で、スパム対策もプラグイン上で手軽に設定できるので、初心者の方でも安心して実装できます。
問い合わせフォームを設置することで、仕事の案件が増えたり、訪問者の貴重な意見を聞けたりと、ブログサイト、コーポレートサイト関わらずどのサイトに設置しておいた方良いでしょう。ぜひこの記事を参考に取り組んでみてください。
Web制作のご相談はこちら
