こんにちは。
今日は、WordPressで「お問い合わせフォーム」を作る方法をご紹介します。
今日の記事は動画で流れをご紹介しています。
よろしければこちらもご覧ください。
どうしてお問い合わせフォームが必要なの？
ホームページを作るときに、ぜひ設置しておきたいのが「お問い合わせフォーム」です。
お客さまからの連絡窓口
なぜかというと、ホームページを見てくれた方が、
- サービスに申し込みたいとき
- 気になることを質問したいとき
- 詳しく話を聞いてみたいとき
に、すぐに連絡できる窓口になるからです。
たとえば、
「相談をお願いしたい」お申し込みや
「この講座はいつから受けられますか？」といったお問い合わせは、
フォームがあればスムーズにやりとりを始めることができます😊
メールアドレスをそのまま公開するのは不安…
とくに、お仕事でホームページを使っている場合は、
特定商取引法やプライバシーポリシーのページにも、
「連絡できる手段」が必要とされています。
でも、メールアドレスをそのまま公開すると、
スパム（迷惑メール）がたくさん届いてしまうことも…。
フォームを設置すれば、メールアドレスを公開せずに安全にやりとりができるので、安心です。
今回は、無料で使える人気のプラグイン「Contact Form 7（コンタクトフォーム・セブン）」を使って、
かんたんにフォームを作る方法をお伝えします！
Contact Form 7ってなに？
Contact Form 7（CF7）は、
WordPressでよく使われているお問い合わせフォーム専用のプラグイン（追加機能）です。
こんなところが便利✨
- 無料で使える
- 日本語に対応している
- とてもシンプルで軽い
- カスタマイズもしやすい
WordPressを初めてさわる人でも、迷わず設置できるのでおすすめです！
ほかのフォームプラグインとの違いについて
WordPressには、お問い合わせフォームを作るためのプラグインがいくつかあります。
よく使われているのは、たとえば次の3つです：
| プラグイン名 | 特徴 |
|---|---|
| Contact Form 7 | シンプル・軽量。HTMLタグベースでカスタマイズしやすい。 |
| Snow Monkey Forms | 日本製テーマと相性◎ ブロックエディタで作れるのでデザインが反映しやすい また、確認画面を間にいれることもできる。 |
| WPForms | ドラッグ＆ドロップでUI直感的。海外製のため、英語メイン。 |
この記事では、もっともベーシックで情報も多く、無料で使いやすい
Contact Form 7 を使ったフォームの作り方をご紹介しています。
それぞれメリットがあるので、
「直感的にフォームを作りたい」「日本語対応がしっかりしているものがいい」など、
ご自身の好みに合わせて選ぶのも◎ですよ😊
Contact Form 7をインストールしよう
まずは、プラグインを入れましょう。
- WordPressの管理画面（ダッシュボード）にログイン
- 左のメニューから「プラグイン」＞「新規追加」をクリック
- 検索窓に「Contact Form 7」と入力
- 出てきたものの中から、「今すぐインストール」→「有効化」
これで準備完了です✨
フォームを作成してみよう
有効化ができたら、左メニューに「お問い合わせ」という項目が出てきます。
そこをクリックすると、すでに1つフォームが作られています。
そのまま使ってもOKですが、内容を確認・調整しておくと安心です。
初期状態で、以下の4つの項目があらかじめ用意されています：
- お名前（your-name）
- メールアドレス（your-email）
- 題名（your-subject）
- メッセージ本文（your-message）
必要に応じてフォームを編集したら、「保存」をクリックします。
フォームを保存すると、画面上部にショートコードが表示されます（例：[contact-form-7 id="1234" title="コンタクトフォーム 1"]）。
このショートコードをコピーしておきましょう。
入力項目の説明
| 用途 | タグ（例） | ポイント |
|---|---|---|
| 名前（テキスト） | [text* your-name] | 「*」をつけると必須項目になります |
| メールアドレス | [email* your-email] | 自動返信メールの送信先になります |
| 電話番号 | [tel your-tel] | 数字のみ入力可能。ハイフン可 |
| メッセージ本文 | [textarea your-message] | 複数行のテキスト入力 |
| チェックボックス | [checkbox your-service use_label_element "Aコース" "Bコース"] | 複数選択可。use_label_elementで整列可能 |
| ドロップダウン | [select your-plan "プランA" "プランB"] | 1つだけ選択する形式 |
| ラジオボタン | [radio your-gender "男性" "女性"] | 1つのみ選択可能 |
| 同意チェック | [acceptance your-consent] 同意する | 送信前に確認させる際に便利 |
ラベル（表示名）とタグの組み合わせは以下のように書きます：
<label>お名前 [text* your-name]</label>
必須項目には「*」を忘れずに
フォーム編集前にバックアップを取っておくと安心です
フォームをページに表示しよう
フォームを作っただけでは、ホームページにはまだ表示されません。
ここでは、「お問い合わせ」というページを作って、
その中にフォームを表示してみましょう。
- WordPressの左メニュー「固定ページ」＞「新規追加」
- ページのタイトルに「お問い合わせ」と入力
- 本文エリアに、Contact Form 7のショートコードを貼りつける
例：
[contact-form-7 id="123" title="コンタクトフォーム 1"]
このショートコードは、「お問い合わせ ＞ フォーム一覧」からもコピーできます！
- ページを公開したら完了です🎉
自動返信メールと管理者メールの設定
フォームからメッセージが届いたときに、
- お客さまにも「お問い合わせありがとうございます」と自動返信
- 自分（管理者）にも内容の通知
が届くように設定しておきましょう。
- 「お問い合わせ ＞ フォーム一覧」で、使っているフォームを編集
- 「メール」タブをクリック
管理者宛メールの設定
【主な項目】
| 項目名 | 入力例 | 補足 |
|---|---|---|
| 送信先（To） | your-address@example.com | 管理者（あなた）のメールアドレスを入力 |
| 送信元（From） | [your-name] <[your-email]> | お客様の名前とメールがFromに表示されます |
| 件名（Subject） | 【お問い合わせ】[your-subject] | |
| 追加ヘッダー | Reply-To: [your-email] | 管理者がそのまま返信できるようになります |
件名
【HP】お問い合わせ受付のお知らせメール本文
HPから問い合わせがありました。
※このメールはシステムからの自動返信です
———————————————-
■お名前
[your-name]
■メールアドレス
[your-email]
■タイトル
[your-title]
■お問い合わせ内容
[your-message]
———————————————-入力された内容をメール内で表示させる場合、フォームで使っている項目と「同じ名前」をメール内にも使う必要があります。
たとえば [your-name] や [your-message] のようなタグを使います。
お客さま宛の自動送信メール
- 画面を下にスクロールして、「メール（2）」のチェックを ON にする
→ これが自動返信メールの設定欄です
設定項目
| 項目名 | 入力例 | 補足 |
|---|---|---|
| 送信先（To） | [your-email] | フォームで入力されたメールアドレス宛に送信されます |
| 送信元（From） | あなたのサイト名 <info@example.com> | 「example.com」はご自身のドメインに合わせて変更 |
| 件名（Subject） | 【自動返信】お問い合わせありがとうございます | 自動返信用に分かりやすく |
| 追加ヘッダー | Reply-To: [your-email] | 任意。お客様から返信しやすくなる |
件名
お問い合わせありがとうございました。本文
※このメールはシステムからの自動返信です
[your-name] 様
この度はお問い合わせありがとうございました。
送信いただきました内容を確認の上、１〜２営業日内にご連絡差し上げます。
なお送信いただいた内容は、以下のとおりです。
———————————————-
■お名前
[your-name]
■メールアドレス
[your-email]
■タイトル
[your-subject]
■お問い合わせ内容
[your-message]
———————————————-
以上、よろしくお願い致します。
[_site_title]
名前
Email: info@XXX.co.jp
Web: https://XXX.co.jpメール本文中に [your-○○] などのタグを入れると、フォームの入力内容が差し込まれます
[your-email] のように、お客様が入力した値を使うことで自動で内容を反映できます。
フォームの項目名とタグ名が一致していないと、うまく動作しないことがあるので注意くださいね。
スパム対策やメール送信エラーについて（補足）
今回は、次のような設定をあらかじめ行っています：
- reCAPTCHA（リキャプチャ）：ロボットによるスパム送信を防ぐしくみ
- SMTPプラグイン：メールがちゃんと届くようにするための設定
お問い合わせフォームは「表示できたら完成！」と思いがちですが、
これらの設定をしておかないと、メールが届かなかったり、迷惑メールが大量に来てしまうこともあります。
ですので、初めてフォームを設置される方は、フォームを作ると同時に、これらの設定も一緒に行うのがおすすめです✨
↓別のお問い合わせフォームですが、reCaptchaの設定方法を記述しています。
まとめ
今回は、Contact Form 7を使って、
WordPressにお問い合わせフォームを作る方法をご紹介しました。
お問い合わせフォームは、
「連絡手段」としてだけでなく、
お客さまとの信頼関係をつくる入口でもあります。
見る人にとっては「相談しやすい」という安心感にもつながります。
ホームページを作るときは、ぜひ最初にフォームも用意してみてくださいね😊
🧩「フォーム、ちゃんと動いてるか不安…」
自動返信メールや、項目の整え方など、意外とつまづきがちなフォーム設定。
ご自身で頑張ってみてもうまくいかないときは、単発レッスンで一緒に解決してみませんか？
- Contact Form 7の設定確認
- 改行や見た目の調整
- メールが届かない時のチェックポイント など
👉 単発レッスン（45分／Zoom対応）