まずは『Contact Form 7』をインストールしましょう。

プラグインの新規追加画面で検索窓に「Contact Form 7」と入力し、今すぐインストールをクリックします。

「WordPressメインナビゲーション ＞ プラグイン ＞ 新規プラグインを追加」の画面

インストールできたら有効化をクリックしましょう。

『Contact Form 7』をインストールして有効化すると、メインナビゲーションに「お問い合わせ」が追加されます。クリックして『Contact Form 7』を開きましょう。

新規追加をクリックすると、フォームの作成画面が表示されます。

フォームのタイトルを入力し、まずはこのまま保存をクリックしましょう。

まず「メール」タブをクリックして表示される画面から、ホームページ管理者宛てに送信される自動通知メールを設定します。

※上記の表は横にスライドできます。
※（追加：2024年6月20日）WordPress6.5をお使いの場合は、「メッセージ本文」のデフォルトの内容が多少異なります。

メモ

以下は、上記で設定した内容を実際にメールソフトで受信したときのイメージです。

設定が完了したら、保存をクリックしましょう。

メールタブの画面を下にスクロールすると「メール（2）を使用」というチェックボックスがあります。

チェックを入れると、ユーザー宛てに送信されるメールを設定できるようになりますよ。

※上記の表は横にスライドできます。
※（追加：2024年6月20日）WordPress6.5をお使いの場合は、「メッセージ本文」のデフォルトの内容が多少異なります。

メモ

以下は、上記で設定した内容を実際にメールソフトで受信したときのイメージです。

設定が完了したら、保存をクリックしましょう。

自動送信メールの設定が完了したら、お問い合わせページで「フォーム送信後に表示されるメッセージ」を編集しましょう。

「メッセージ」タブをクリックしてください。

デフォルトでは「ありがとうございます。メッセージは送信されました。」になっています。必要であれば変更しましょう。

この記事では、「この度はお問い合わせいただき、誠にありがとうございます。追って担当者からご連絡いたします。」に変更します。

変更したら、「保存」をクリックしてください。

まずメインナビゲーションから「固定ページ」を選択し、新規追加でお問い合わせページを作成しましょう！

※（追記2024年6月20日）WordPress6.5をお使いの場合は、「新規固定ページを追加」です。

タイトルと本文に、以下のような内容を入力します。

次に、右下の「＋ボタン」をクリックしてください。

検索窓に「contact」と入力すると、『Contact Form 7』のアイコンが表示されるので、クリックしてブロックを追加します。

今回作ったフォームを選択します。

画面右上の下書き保存ボタンをクリックします。

URL（パーマリンク）を「contact」に変更して、公開ボタンをクリックすれば完了です。

画面右上の「プレビュー」から、「新しいタブでプレビュー」をクリックしましょう。

追記（2024年6月20日）

WordPress6.5をお使いの場合は、表示アイコンをクリックするとプレビューできます。

以下、お問い合わせページの画面です。

まず「フォーム」タブを選びます。入力項目を追加したい箇所にカーソルを合わせてから、「電話番号」をクリックしましょう。

以下を参考に設定してください。

入力例を表示する場合は、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れましょう。チェックを入れないと、入力例が実際に入力された状態になってしまいます。

その他の項目は変更する必要がないため、このままタグを挿入をクリックしましょう。

電話番号のタグを追加できました。

しかしこの状態では、ユーザーがフォームに何を入力すればよいか分からないため、項目名としてタグの上に「電話番号」のテキストを入力し、「ラベルタグ（<label></label>）」で囲みます。

メモ

項目名と項目を紐づけるためのタグです。ラベルタグで紐づければ、項目名をクリックした場合でも、項目にカーソルがあたるので、ユーザーがフォームを入力しやすくなります。

また、氏名やメールアドレスにも入力例を表示させる場合は、それぞれのタグの中に「placeholder」を追加します。さきほど追加した電話番号のコードを参考にしてください。

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

先ほどと同じように、挿入したい箇所にカーソルを合わせ、日付をクリックしましょう。

以下を参考にタグを挿入してください。

この記事ではそのままタグを挿入します。

タグを挿入したら、他と同様に「項目名」と「ラベルタグ（<label></label>）」を付けましょう。

保存をクリックして完了です。
実際のお問い合わせページでは、以下のように表示されます。

追加で必要な場合は、これまでの説明と同じ流れで、挿入したい箇所にカーソルを合わせてテキストエリアをクリックしましょう。

設定項目も、これまで説明した内容と変わりありません。

挿入したい箇所にカーソルをあて、ドロップダウンメニューをクリックします。

以下を参考に、タグを挿入してください。

今回は、住所の都道府県選択項目を想定して、「複数選択を可能にする」にはチェックを入れません。
また、ユーザーが自らの意思で選択肢を選んだと分かるように、「空の項目を先頭に挿入する」にチェックをいれます。

保存をクリックすれば完了です。
実際のお問い合わせページでは、次のように表示されます。

「ー以下から選択してくださいー」の部分をクリックすると、選択肢が表示されますよ。

これまでどおり、挿入したい箇所にカーソルを合わせて、チェックボックスをクリックします。

以下を参考に設定して、タグを挿入してください。

「ラベルを前にチェックボックスを後に配置する」をチェックすると、チェックボックスの表示位置が、「選択肢（テキスト）」の前から後ろに変更されます。

チェックなし

チェックあり

「個々の項目をlabel要素で囲む」にチェックを入れると、チェックボックスのみならず、その「選択肢（テキスト）」をクリックしても反応するようになります。

ユーザーが選択しやすくなるので、おすすめです。

「チェックボックスを排他化する」をクリックすると、複数選択ができなくなります。ユーザーは「どれも選ばない」か「一つだけ選択する」ことになりますよ。

注意

「チェックボックス」は、「ラベルタグ（<label></label>）」で囲むとエラーになります。ラベルタグは付けないようにしましょう。

（参考）複数のフォームコントロールが単一の label 要素内に置かれている。
（参考）入力フィールドにラベルを付けられますか?

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

これまでどおり、挿入したい箇所にカーソルを合わせて、ラジオボタンをクリックしましょう。

以下を参考にタグを挿入してください。

※「ラベルを前にチェックボックスを後に配置する」と「個々の項目をlabel要素で囲む」については、前述の「チェックボックスの追加方法」で解説しているので、割愛します。

注意

「ラジオボタン」は、「ラベルタグ（<label></label>）」で囲むとエラーになります。ラベルタグは付けないようにしましょう。

（参考）複数のフォームコントロールが単一の label 要素内に置かれている。
（参考）入力フィールドにラベルを付けられますか?

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

「個人情報の取り扱い」などに対して、ユーザーから承諾を得たい場合は、承諾確認を使用します。

以下を参考に、タグを挿入してください。

必須にすると、ユーザーは実際のチェックを入れない限り、送信ボタンを押せません。

タグの中に「target=”_blank”」を書くと、リンクが新しいタブで開くため、ユーザーがフォームから離脱するのを防げます。

保存をクリックして完了です。

実際のお問い合わせページでは、以下のように表示されます。

お問い合わせページで、「テキストにリンクが設置されているか」や「新しいタブで開くか」などを確認しましょう。

画像やPDFなどのデータファイルのアップロード機能をフォームに追加したいときは、ファイルを使用します。

以下を参考にタグを挿入してください。

保存をクリックすれば完了です。

実際のお問い合わせページでは、以下のように表示されます。

まず、「メール」タブをクリックしてください。
すると、追加した項目に対するタグが表示されているのが分かります。

このタグを自動送信メールに設定すれば、追加した項目が表示されるようになりますよ。

試しに、ホームページ管理者への自動通知メールでやってみましょう。
「電話番号：」と入力したあとに、対応するタグを挿入します。

タグが挿入されたら保存をクリックしてください。

では、お問い合わせページでフォームを入力および送信し、自動通知メールを確認してみましょう。
フォームに入力した値が「電話番号：」の横に表示されていればOKです。

メモ

ファイルアップロード機能のタグについては、「ファイル添付」の欄に挿入してください。

お問い合わせフォームにファイルをアップロードし、自動通知メールに添付されていれば完了です。

まずはreCAPTCHAのホームページにアクセスし、『Contact Form 7』に接続するための「APIキー（認証コード）」を取得します。

画面上部のv3 Admin Consoleをクリックしましょう。

必要事項を入力して、reCAPTCHAの利用登録を済ませます。

登録すると「サイトキー」「シークレットキー」が表示されるので、それぞれコピーしてメモ帳に貼り付けておきましょう。そのあと、設定に移動をクリックしてください。

アラートをオーナーに送信するにチェックを入れて、保存をクリックします。

WordPressの管理画面に戻り、「お問い合わせ → インテグレーション」をクリックし、セットアップをしていきます。
「reCAPTCHA」のインテグレーションのセットアップをクリックしましょう。

先ほどコピーした「サイトキー」「シークレットキー」を貼り付けて、変更を保存をクリックします。

これで設定は完了です。
ホームページにアクセスし、右下にアイコンが表示されていれば完了です。

ページ表示例

▲出典：reCAPTCHA「よくある質問」

削除するには、以下のコードをCSSファイルに記述します。

メモ

「追加CSS」の機能があるテーマの場合、簡単にCSSファイルにコードを記述することが可能です。