Contact Form 7でお問い合わせフォームを作成する方法

お問い合わせのフォームを作成する際にWordpressプラグイン「Contact Form 7」を使用しました。「Contact Form 7」は多くのサイトで使用されていて、詳しい使い方も検索するとたくさん見つかりますが、自分自身の備忘録として使い方や設定方法をまとめておきたいと思います。

Contact Form 7の使い方

まずは「Contact Form 7」をWordpressにインストールします。

「Contact Form 7」をインストールして有効化すると、左メニューに「お問い合わせ」が追加されます。

メニューの「新規作成」から新しいフォームを作成します。作成したフォームは、「コンタクトフォーム」から編集することができます。

この辺の使い方は、他のプラグインと同じです。

新規作成ページでまずは、デフォルトの言語を設定します。特に変更する必要が無ければ日本語のまま「新規追加」ボタンをクリックします。

まず、コンタクトフォームの「タイトル」を記入します。フォームの中身は取りあえずそのままで、一度保存します。

コンタクトフォームが作成できました。

作成したコンタクトフォームを表示するには、ショートコードをフォームを表示したいページに記述します。
ショートコードは、コンタクトフォームのタイトルの下に表示されています。

［contact-form-7 id="598" title="test"］

固定ページや投稿ページにショートコードを直接記入します。

先ほどのショートコードを固定ページに記入すると、作成したフォームが表示されました。

フォームを表示することができたので、次はフォームの内容などを設定していきます。

お問い合わせメニューの「コンタクトフォーム」から、先ほど作成したフォームのタイトルを選択すると、コンタクトフォームを編集することができます。

編集画面ではフォームの内容、送信するメールの内容、確認メッセージなどを編集できます。

フォームの入力欄はボタンを選択すると、簡単に追加できます。

[text* your-name]

このタグが表示するフォームの設定です。textがフォームの種類、*が必須項目、your-nameがフォームの名前です。ドロップダウンメニューなど、複数の項目から選択する場合は、選択項目がタグの中に入ります。試しにドロップダウンメニューでお問い合わせ内容を追加してみました。

[select menu-message "資料請求" "ご質問" "その他"]

メールの画面では、メールの送信先やメールの本文の内容を設定できます。[]タグの中にフォームの名前を記入することで、送信されたフォームの値をメールに入れることができます。先ほど作成したお問い合わせ内容をメール本文に表示する場合は「お問い合わせ内容: [menu-message]」のように記入します。

メールは複数送信することができます。ユーザーに送信したメッセージの確認メールを送りたいときなどは、「メール(2)を使用」にチェックして、メールをもうひとつメールを作成します。

メッセージの画面では、メールを送信したとき、エラーが発生したときに表示するメッセージを設定できます。用途に合わせてカスタマイズします。

コンタクトフォームのスパム対策として、チェックボックスを設定しておきます。「承認確認」から、確認のためのチェックボックスを設定できます。

[acceptance acceptance-check]

このチェックボックスにチェックが無いと、メッセージを送信できません。本来このチェックボックスは、メッセージの内容をユーザーに確認してもらうためのものらしいのですが、結果的にスパム対策にもなるそうです。

他にも「Akismet」や「CAPTCHA」など、スパム対策に役立つプラグインがたくさんあるので活用してみてください。

以前のバージョンの「Contact Form 7」では、メールの「送信元」（差出人）のところに日本語を入力した際、文字化けする場合がありました。
文字化けは日本語部分を"（ダブルコーテーション）で囲うことで防ぐことができます。

例えば、「送信元」（差出人）のところで「株式会社総北お問い合わせ事務局<メールアドレス>」のように企業名などを直接日本語で入力するときは下記のように記載します。

”株式会社総北お問い合わせ事務局”<[your-email]>

プラグインのバージョンアップに伴い改善されているかもしれませんが、備忘録として残しておきたいと思います。