本記事では、Contact Form 7というWordPressプラグインを使ったフォームの作り方についてご紹介します。

本記事で利用したWordPress、プラグインのバージョンは下記のとおりです。

WordPress: 6.8.3
Contact Form 7: 6.1.2
Flamingo: 2.6

1. フォームで収集する項目の設定 #

まずは左側のメニューの「Add Contact Form」をクリックし、新たなフォームを作成します。

フォームの作成

フォームの収集項目を設定します。具体的に設定可能な収集項目や、収集項目の設定方法などは公式ドキュメント「フォームのテンプレートを編集する」をご覧ください。

フォームの収集項目の設定

一通り収集項目の設定が出来たら、実際にページにフォームを設置してみましょう。ブロックエディタ・ショートコードのいずれかの方法でフォーム設置が可能です。

今回はブロックエディタで設置してみます。/contact-form-7と入力するとフォームのブロックが挿入できます。

フォームの設置

挿入後ページを保存し実際に開いてみましょう。

見た目はシンプルですが、フォームが表示されるいるはずです。

フォームの表示確認1

2. フォームのデザインの設定 #

次に、フォームの見た目を整えていきます。CSSを記載できる場所はいくつかありますが、今回は外観メニューからアクセスできる「追加CSS」機能を使ってCSSを記載しました。

セレクタに指定すべきCSSクラス名などについては公式ドキュメント「コンタクトフォームのスタイル指定」をご覧ください。

CSSの追加

今回は下記のようなCSSを記載しました。

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #888;
  border-radius: 4px;
  padding: 8px;
  outline: thin;
}

.wpcf7 input:focus {
  border: 2px solid black;
}

.wpcf7 input[type="submit"] {
  width: max-content;
  font-size: 16pt;
  padding: 8px 32px;
  background-color: #404040;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #606060;
}

CSSを追加し保存した後にページを開くと、想定通りデザインが変更されています。

フォームの表示確認2

3. フォーム回答後のメールの設定 #

前提 #

フォームへの回答があったときにメールを送付するには、WordPressのサーバーでMTA（メール転送エージェント）の設定が行われている必要があります。

MTAの設定はWordPressの利用環境によって変わりますので、本記事では説明をいたしません。よくわからない場合は社内のIT担当やサーバー事業者に問い合わせてみると良いかもしれません。

本記事ではpostfixを利用して、メールの検証ができるようにしています。

参考

wp_mail()を使うにあたり必要となる設定項目
https://developer.wordpress.org/reference/functions/wp_mail/#notes
phpのメール関連の設定
https://www.php.net/manual/ja/book.mail.php

自分に送付するメールの設定 #

フォームへの回答があったときに、その旨を自分（ウェブサイト管理者）に通知するためのメールを設定します。

「コンタクトフォームの編集」画面の「メール」タブで、誰に・どのような内容のメールを送付するか設定することができます。

ここではウェブサイト管理者のメールアドレスに、下記のような内容のメールを送付するよう設定しました。

自分に送付するメールの設定

詳細なメールの設定方法に関しては公式ドキュメント「メールのセットアップ」をご覧ください。

この設定を保存しフォームに回答してみると、ウェブサイト管理者のメールアドレスにメールが送付されていることが確認できます。

自分に送付されたメール

フォーム回答者に送付するメールの設定 #

フォーム回答者に対してお礼メールを自動返信することもできます。

「コンタクトフォームの編集」画面の「メール」タブの下方に「メール（2）」というチェックボックスがありますので、そこにチェックを入れると2つ目のメールの設定ができるようになります。

今回はフォーム回答者のメールアドレス宛に、下記のような内容のメールを送付するよう設定しました。（警告文が出ていますが、こちらは後に説明するセキュリティ設定で対応します。）

回答者に送付するメールの設定

この設定を保存しフォームに回答してみると、回答者に対してもメールが送付されていることが確認できます。

回答者に送付されたメール

4. フォーム回答内容の保存 #

ひとまずここまでの設定で、ウェブサイトからの問い合わせを受け付け、その旨を把握することができるようになりました。

このままでも問題ありませんが、メールというのはその性質上確実に受け手に届くとは限りませんし、仮に届いたとしても誤ってそのメールを削除してしまうなどのトラブルも想定されます。

ですのでフォームへの回答内容の保存・確認をメールだけに依存するのではなく、別の方法も組み合わせることで、トラブル少なくウェブサイトの運営ができるようになりますので、おすすめです。

幸いフォームへの回答内容の保存・確認が簡単に実現できる無料のプラグインがありますので、そのご紹介をします。

Flamingoの設定 #

今回は、Contact Form 7の作者が開発したFlamingoというプラグインを使います。

まずはWordPressのプラグインディレクトリからFlamingoをダウンロード・インストールし、有効化してください。

Flamingoの有効化ができたら、フォームへの回答内容・回答者の情報が正しく保存されるよう、フォームの設定を変更する必要があります。

「コンタクトフォームの編集」画面を開き「その他の設定」タブで下記の内容を設定します。

flamingo_email: "フォーム回答者のメールアドレスを示すmail-tag / 文字列"
flamingo_name: "フォーム回答者の名前を示すmail-tag / 文字列"
flamingo_subject: "フォーム回答内容の題名を示すmail-tag / 文字列"

詳細な設定方法に関しては公式ドキュメント「メールのセットアップ」をご覧ください。

今回は下記のように設定しました。

Flamingoの設定

設定を保存し、フォームに回答してみると、Flamingoのページから回答内容と回答者の情報が確認できるます。CSVファイルでのエクスポートも可能です。

Flamingoのページで回答者の確認

5. フォームのセキュリティ設定 #

最後に、フォームのセキュリティに関する設定を行いましょう。

インターネットにフォームを公開していると、悪意のあるユーザーやbotが訪れることがあります。そのようなことを許していると、例えば下記のような問題が発生する可能性があります。

短い間に大量のフォーム回答が行われウェブサイトがダウンする
フォーム回答者に送付するメールの設定をしている場合、意図しないメールアドレス宛に大量にメールが送られる

このようなことを防ぐために、CAPTCHAという仕組みをフォームに組み込むことが一般的です。

Contact Form 7ではCAPTCHA（Google reCAPTCHA / Cloudflare Turnstile）を組み込む仕組みも提供されていますので、今回はTurnstileのCAPTCHAを導入してみます。

導入の手順は公式ドキュメント「Cloudflare Turnstile インテグレーション」に分かりやすくまとまっていますので、こちらを参照してください。

Cloudflare Turnstileの設定後フォームが含まれたページを開くと、下記のようにCAPTCHAウィジェットが表示されるようになり、悪意のあるユーザーやbotから保護してくれるようになります。

Cloudflare Turnstile

まとめ #

本記事ではContact Form 7を使って、WordPressのウェブサイト上でフォーム入力を受け付ける方法について説明いたしました。

参考になれば幸いです。

本記事の内容についてご質問やコメント等ございましたら、お気軽にお問い合わせください。

[WordPress] Contact Form 7を使ったフォームの作り方