ワードプレス、プラグイン、お問い合わせフォーム、Contact Form 7

Web運用(サイト構築)

ウェブサイトの訪問者からの問い合わせをスムーズに受け取りたいと考えていませんか?
Contact Form 7は、WordPressで人気の高いお問い合わせフォームプラグインで、初心者でも簡単にプロ仕様のフォームを作成できます。

本記事では、基本的な使い方からカスタマイズ方法までを詳しく解説。コード不要で、すぐにフォームを設置できるようになります。さらに、豊富な設定や拡張機能を活用すれば、サイトのニーズに合った最適なフォームが作成可能です。

Contact Form 7を導入し、ユーザーとのスムーズなコミュニケーションを実現しましょう!

インストールと初期設定

インストールと有効化

  • プラグインを追加する
    • WordPressの管理画面にログインします。
    • 左側のメニューから 「プラグイン」→「新規プラグインを追加」 をクリックします。
  • プラグインを検索
    • 画面右上にある検索バーに 「Contact Form 7」 と入力します。
    • Contact Form 7 のプラグインが表示されたら、「今すぐインストール」 をクリックします。
  • インストールの完了を待つ
    • 数秒待つと、インストールが完了します。
  • プラグインを有効化
    • インストールが完了したら、「有効化」 をクリックします。

これで Contact Form 7 が使用できるようになりました!
お問い合わせフォームを作成したい場合は、次にフォームの設定を行いましょう。

それぞれのメニュー

Contact Form 7のメニューの説明

Contact Form 7 には、主に以下の3つのメニューがあります。

  • コンタクトフォーム
    → すでに作成されているフォームの一覧を表示します。
  • 新規追加
    → 新しくお問い合わせフォームを作成できます。
  • インテグレーション
    → Google reCAPTCHAなど、外部サービスとの連携を設定できます。

新しいお問い合わせフォームの作成方法

  • 新規フォームを作成する
    • WordPressの管理画面から 「お問い合わせ」→「新規追加」 をクリックします。
  • デフォルトのフォームをそのまま使う
    • 新しいフォーム作成画面が開きます。
    • すでに基本的なフォームのテンプレート(氏名・メールアドレス・題名・メッセージ本文)が用意されています。
    • フォームのタイトルを入力してください。(例:資料請求、お問い合わせフォーム)
    • 特に変更が不要なら、そのまま 「保存」 をクリックします。
  • ショートコードをコピーする
    • 保存後、画面の上部にショートコードが表示されます。コンタクトフォームの作成一覧でも見れます。(例:[[contact-form-7 id=”123″ title=”お問い合わせフォーム”]])
    • このショートコードをコピーします。
  • 固定ページにフォームを表示する
    • 「固定ページ」→「新規追加」 をクリックして、新しいページを作成します。
    • ブロックエディターで 「ショートコード」ブロック を追加します。
    • 先ほどコピーしたショートコードを貼り付けます。
  • フォームが表示される!
    • ページを 公開 すると、お問い合わせフォームがサイト上に表示されます。
    • デフォルトのフォーム は以下のようなシンプルなデザインです。
      • 氏名(必須)
      • メールアドレス(必須)
      • メッセージ欄
      • 送信ボタン

フォームの編集

デフォルトのフォームをそのまま使うのも簡単で便利ですが、実は もっと便利な機能を追加 することもできます。デフォルトのフォームには 最低限の項目(氏名・メールアドレス・タイトル・メッセージ欄)しかありませんが、 電話番号の入力欄を追加したり、チェックボックスを使ったりする ことも可能です。

フォームの編集方法手順

  • フォームを編集する
    • 作成したフォームのタイトルの上にマウスをのせると、「編集」 というボタンが表示されます。※新規作成時でも問題ないです。
    • 「編集」 をクリックすると、フォームの詳細設定画面が開きます。
  • 4つのタブを使って設定を変更する
    • フォームタブ
      → フォームの項目(氏名・電話番号・メールアドレスなど)を追加・削除できます。
    • メールタブ
      → フォームから送信された内容を、どのメールアドレスに送るかを設定できます。
    • メッセージタブ
      → フォーム送信後のメッセージ(例:「送信が完了しました!」)を設定できます。
    • その他の設定タブ
      → デモモードや、購読者限定モードなどの追加オプションを設定できます。

フォームの見た目を整える場所は主に、フォームタブからの編集になります。

「フォームタブ」には、いくつかのテンプレートが用意されており、タブをクリックすると、テンプレートの編集も可能です。以下では、各項目の意味を説明します。

テキスト、メールアドレス、URL、電話番号

テキスト、メールアドレス、URL、電話番号はほぼ一緒です。

項目タイプ

  • 「テキスト項目」を選択すると、フォームに 1行のテキスト入力欄 を作成できます。
  • 例:名前、メールアドレス、住所などを入力する欄として使用。

項目名

  • 入力項目の識別用の名前を指定します。
  • 例:text-287 のようなデフォルト名が設定されますが、わかりやすい名前(例:your-name)に変更するのがおすすめです。

必須入力の設定

  • 「必須入力の項目」 にチェックを入れると、この項目を必須に設定できます。
  • チェックを入れると、ユーザーが入力せずに送信しようとした際にエラーメッセージが表示されます。

クラス属性

  • ここにCSSクラス名を入力すると、その入力欄に特定のデザインを適用できます。
  • 例:custom-text-class を入力すれば、後からCSSでデザインを変更できます。

長さ

  • 入力できる文字数の制限を設定します。
  • 下限:最低文字数(例:5文字以上の入力を必須にする)
  • 上限:最大文字数(例:50文字まで入力可能)

デフォルト値

  • 入力欄にあらかじめ表示しておく初期値を設定できます。
  • 例:「例:山田 太郎」のように入力例を表示することが可能です。

数値

項目タイプ

  • 「スピンボックス」や「スライダー」を選択して数値入力形式を設定できます。
    • スピンボックス:プラス・マイナスボタンで数値を増減。
    • スライダー:スライドバーで数値を選択。

数値実際に使う場面

  • 数値を入力する必要がある場面で役立ちます。
    • 例:
      • 商品の購入数量を指定する。
      • 年齢や価格などの情報を入力させる。
      • 1~10のスケールで評価を入力させる。

日付

  • 基本機能
    • 日付入力専用の項目を追加できる。
  • 主な設定
    • 項目名:識別用の名前を設定(例:reservation-date)。
    • 必須入力:チェックを入れると必須項目に。
    • 範囲:選択できる日付を開始日と終了日で制限(例:min:2023-02-01 max:2025-12-31)。
    • デフォルト値:初期表示する日付を設定可能。
  • 使いどころ
    • 予約フォーム(例:予約日や申込日の指定)。
    • スケジュール管理(選択可能な日付を範囲で制御)。

テキストエリア

  1. 基本機能
    • 複数行のテキストを入力できる項目を追加。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:message)。
    • 必須入力:チェックを入れると必須項目に。
    • クラス属性:CSSクラスを指定してデザイン調整。
    • 行数と列数:テキストエリアの大きさを設定可能。
  3. 使いどころ
    • 自由記述欄(例:お問い合わせ内容や詳細説明)。
    • メモやコメント欄(長文入力が必要な場合)。

ドロップダウン

  1. 基本機能
    • プルダウンメニューを作成し、ユーザーが選択肢から1つを選べる項目を追加。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:select-458)。
    • 選択できる値:各選択肢を1行ずつ記載(例:「選択肢1」「選択肢2」)。
    • 初期選択値:最初の選択肢をデフォルトで選ぶかどうかを設定可能。
    • 必須入力:選択を必須にする場合はチェックを入れる。
  1. 使いどころ
    • 選択式の質問(例:問い合わせカテゴリや希望時間帯)。
    • 選択肢が固定されている場合

チェックボックス

  1. 基本機能
    • 複数の選択肢から、1つまたは複数を選択できる項目を追加。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:checkbox-212)。
    • 選択できる値:各選択肢を1行ずつ記載(例:「選択肢1」「選択肢2」)。
    • 必須入力:チェックが必須なら「必須入力の項目」にチェックを入れる。
    • label要素で囲むとエラーになります。
  1. 使いどころ
    • 複数回答が必要な質問(例:興味のある分野、希望のサポート内容)。
    • 選択肢が複数あり、自由に選べる場合

ラジオボタン

  1. 基本機能
    • 複数の選択肢から1つだけを選択できる項目を追加。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:radio-198)。
    • 選択できる値:各選択肢を1行ずつ記載(例:「選択肢1」「選択肢2」)。
    • 必須入力:チェックが必須なら「必須入力の項目」にチェックを入れる。
    • label要素で囲むとエラーになります。
  1. 使いどころ
    • 単一回答が必要な質問(例:性別選択、希望するオプション)。

承諾確認

  1. 基本機能
    • 利用規約やプライバシーポリシーへの同意を確認するためのチェックボックスを作成。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:acceptance-775)。
    • 同意条件:チェックボックスの横に表示する同意内容を記載(例:「利用規約に同意します」)。
    • 必須選択:チェックを外すと任意、入れると必須項目に。
  1. 使いどころ
    • 利用規約やプライバシーポリシーの承諾確認。

ファイル

  1. 基本機能
    • ユーザーにファイルをアップロードさせる項目を作成。
  2. 主な設定
    • 項目名:識別用の名前を設定(例:file-367)。
    • 受け入れ可能なファイル形式:許可するファイルの種類を指定(例:audio/*、video/*、image/*)。
    • ファイルサイズ制限:アップロード可能なファイルの最大サイズを設定(例:1mb)。
  1. 使いどころ
    • 画像や動画のアップロード(例:プロフィール画像、証明書)。
    • 書類提出(例:PDFやWordファイル)。

フォームの編集まとめ、使いわけなど

Contact Form 7では、デフォルトのフォームをそのまま使うこともできますが、編集することでより便利なフォームを作成できます。編集画面では、「フォーム」のタブを使い、編集が可能です。

主な入力項目の種類

  • テキスト入力欄:名前やメールアドレスなどの入力に使用
  • 数値入力:購入数量や年齢などの入力に適用
  • 日付入力:予約日や申込日の指定が可能
  • テキストエリア:お問い合わせ内容やコメントの入力向け

選択式の項目の使い分け

  • 1つだけ選択→ **ラジオボタン or ドロップダウン(選択肢が多い場合)
  • 複数選択チェックボックス

フォームの編集を活用し、サイトの目的に合った入力フォームを作成しましょう

メールの設定

Contact Form 7のメール設定では、フォームから送信された内容を管理者宛に通知するメールのフォーマットを設定できます。ここでは、各項目の意味と設定方法を詳しく解説します。

各項目の説明

送信先(To)

➡ フォームの送信内容を受け取るメールアドレスを指定。
デフォルトでは [_site_admin_email] が設定されており、WordPressの管理者メールアドレスに送信されます。
変更したい場合は、任意のメールアドレス(例:example@mail.com)を入力。

送信元(From)

➡ 送信されるメールの差出人アドレスを設定。
通常、WordPressのサイト名を含めたメールアドレスを設定するのが一般的。デフォルトです。

  • 送信元アドレスは、サイトのドメインに合わせると迷惑メールになりにくい
    • 例:info@yourdomain.com
  • フリーメール(Gmail、Yahooメールなど)はSPF/DKIMの設定が必要な場合がある

題名(Subject)

➡ メールの件名を設定。
デフォルトでは [_site_title] “[your-subject]” となっており、サイト名+送信者が入力した件名になります。

💡 フォームの件名を固定にする場合は、[your-subject] を削除して、メール設定で直接入力すると良いです。

追加ヘッダー

➡ 追加のメールヘッダーを設定。
デフォルトでは Reply-To: [your-email] が設定されており、管理者がメールを返信すると、フォーム送信者のメールアドレスに返信できるようになります。
📌 CCやBCCの設定も可能(追加の設定が必要です)

Reply-To: [your-email]
Cc: cc@example.com
Bcc: bcc@example.com
Bash

※Cc、Bccの追加で403エラーになった場合はサーバー側で、WAFを設定している理由が濃厚です。レンタルサーバー側でOffにします。SPFレコードの設定を確認・修正する。DKIM 認証を有効にする。WP Mail SMTP プラグインを使う。ここはまた別記事で解説いたします。

(CCは複数人に同時送信、BCCは他の受信者に見えない形で送信)

メッセージ本文

➡ メールの本文テンプレートを設定。
フォームに入力された情報をメール本文に挿入するためのプレースホルダー(ショートコード)[your-message]とすると、フォームで入力した内容が入力されます。
デフォルトの例:

差出人: [your-name] [your-email]
題名: [your-subject]

メッセージ本文:
[your-message]

-- 
本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。
Bash

空のメールタグを含む行を出力から除外する

フォームの入力欄が空白の場合、その行をメールに含めないようにする。

  • チェックを入れると、未入力の項目がメールに表示されなくなる
  • フォームの入力データが少ない場合に、スッキリしたメールを送れる
  • デフォルトでは無効(チェックを入れる必要あり)

HTML形式のメールを使用する

メールの本文を HTMLフォーマット で送信できるようにする。

  • チェックを入れると、太字・色・リンクなどのHTMLタグが使用可能です。
  • 企業向けの問い合わせメールで見やすくデザインできます。

注意

受信側のメールソフトがHTMLメールに対応していない場合、正しく表示されないことがあります。シンプルなメールでよいなら チェックしない方が安全です。

ファイル添付

メールに添付ファイルを追加するための設定。
フォームで [file] フィールド を使用した場合、そのファイルをメールに添付する。


[file-100]
Bash

メールで使えるタグ(メールタブ用)

Contact Form 7 の 「メール」タブで使えるタグ を、カテゴリ別に厳選して20個紹介します。

フォームの入力内容を取得するタグ

フォームで入力されたデータを、送信メールに含めるためのタグ。[]の中の値は項目名の値を入力します。

下記はデフォルトで予約されているため、変更できません。

  • [your-name] → 名前
  • [your-email] → メールアドレス
  • [your-subject]→題名
  • [your-message]→本文

サイトの情報を取得するタグ

  • [_site_title] → サイトのタイトル
  • [_site_url] → サイトのURL
  • [_post_id]→フォームが埋め込まれている投稿のID
  • [_post_name] → フォームが埋め込まれている投稿のスラッグ

📌 ポイント

  • [_site_title] で、どのサイトからの問い合わせかを明示できる
  • [_post_id] を使うと、どの投稿ページから送信されたかが識別できる

送信者の情報を記録するタグ

スパム対策や、問い合わせのトラブルシューティングに役立つタグ。

  • [_remote_ip] → 送信者のIPアドレス
  • [_user_agent]→ 送信者のブラウザ情報
  • [_date] → 送信日時(YYYY-MM-DD)
  • [_time] → 送信時間(HH:MM:SS)

📌 ポイント

  • [_remote_ip] を使うと、スパム対策として送信者のIPアドレスを確認できる
  • [_user_agent] を記録すると、どのデバイスやブラウザから送信されたかがわかる
  • [_date]`[_time] で送信時刻を記録し、管理しやすくなる

📌 ポイント

  • 送信者へ返信できるようにするには、追加ヘッダーに Reply-To: [your-email] を設定
  • ファイルを添付する場合は、「ファイル添付」欄に [your-file] を記載

他にもさまざまなタグがあるので、詳しくは公式サイトをご確認ください。

メールの設定(自動返信)

「メール (2)」は、フォーム送信時に追加のメールを送るための機能です。
通常のメール(管理者宛の通知)とは別に、送信者に自動返信メールを送る際によく使われます。

メール (2)の主な用途

  1. 送信者への自動返信(例:問い合わせ受付の確認メール)
  2. 異なるフォーマットのメールを送信(例:管理者用と送信者用で内容を変える)

WordPressでの自動返信の設定自体は比較的簡単ですが、使用するメールドメインによって設定方法が異なります。そのため、一般的な設定だけでは適切に動作しない場合があります。特に、Gmail、Outlook、独自ドメインのメールサーバーなどでは、SMTP設定やSPF/DKIM認証の構成が必要になることが多く、環境に応じた調整が求められます。

自動返信を使用する前は、スパム対策のreCAPTCHAを必須で導入します。導入後、警告メッセージが消えていれば使えます。

reCAPTCHAについて、2025年までに Google はすべてのユーザーを reCAPTCHA Enterprise に強制移行し、一定回数以上のリクエストを送信すると課金が発生する仕組みになります。そのため、現在無料で利用できる Cloudflare Turnstile が注目されています。今後、Contact Form 7 も Cloudflare Turnstile を推奨する可能性があります。Cloudflare Turnstile は動作が軽く、高速なため、おすすめの選択肢です。

Cloudflare Turnstile( reCAPTCHA代替プラグイン)についての詳細記事はこちら。
WP Mail SMTP( SMTP設定)についての詳細記事はこちら。

「メッセージ」タブについて

「メッセージ」タブでは、フォーム送信時に表示されるメッセージをカスタマイズできます。デフォルトのままでも問題なく使えますが、サイトのコンセプトやターゲット層に合わせて変更すると、より魅力的なフォームになります。

キャラクターや世界観を重視するサイト

🔹 :ゲームサイト・アニメ系ブログ・ファンタジー系サイト
カスタマイズ例

  • デフォルト:「ありがとうございます。メッセージは送信されました。」
  • 変更後:「勇者よ、メッセージは無事に届いたぞ!」

🔹 エラー時の例

  • デフォルト:「メッセージの送信に失敗しました。後でもう一度お試しください。」
  • 変更後:「魔法がうまく発動しなかった!もう一度トライしてみて!」

フレンドリーな雰囲気にしたいサイト

🔹 :若年層向けECサイト、カジュアルなブログ、カフェの公式サイト
💡カスタマイズ例

  • デフォルト:「ありがとうございます。メッセージは送信されました。」
  • 変更後:「送信完了!すぐに確認するね😊」
  • デフォルト:「入力内容に問題があります。確認して再度お試しください。」
  • 変更後:「あれ?ちょっとミスがあるみたい!もう一度チェックしてね!」

フォーマル・ビジネス向けサイト

🔹 :企業サイト・士業(弁護士・税理士)・BtoB向けサービス
カスタマイズ例

  • デフォルト:「ありがとうございます。メッセージは送信されました。」
  • 変更後:「お問い合わせを受け付けました。担当者より折り返しご連絡いたします。」
  • デフォルト:「入力内容に問題があります。確認して再度お試しください。」
  • 変更後:「一部の必須項目が未入力です。入力内容をご確認のうえ、再送信してください。」

シニア層向けのサイト

🔹 :健康食品・シニア向けサービス・介護系サイト
💡 カスタマイズ例

  • デフォルト:「ありがとうございます。メッセージは送信されました。」
  • 変更後:「送信が完了しました。ご不明な点があれば、お気軽にお電話でもお問い合わせください。」
  • デフォルト:「入力内容に問題があります。確認して再度お試しください。」
  • 変更後:「必須項目が未入力です。赤枠の部分をご確認ください。」

「メッセージ」タブはデフォルトでも問題なく使えますが、
サイトの雰囲気やターゲット層に合わせて変更することで、より親しみやすく・分かりやすくなります。

特に変更を検討すべきサイトの例:
キャラクター系サイト(世界観を演出)
若年層向けサイト(カジュアルな言葉づかい)
企業・ビジネスサイト(フォーマルで信頼感のある表現)
シニア向けサイト(分かりやすく丁寧な文章)

カスタマイズすることで、ユーザーにとってより心地よいフォームになります!

「その他の設定」タブについて

「その他の設定」タブでは、フォームの動作をカスタマイズするための設定を追加できます。基本的なフォームの利用では特に変更する必要はありませんが、特定の機能を追加したいときに使える便利な機能です。

たとえば、以下のようなカスタマイズが可能です。

  • デモモードの有効化 → 実際にはメールを送信せず、テスト用のフォームとして動作
  • 送信後のリダイレクト → フォーム送信後に特定のページへ自動的に移動
  • スパム対策の強化 → 送信制限の追加

デモモード

デモモードを有効にすると、フォームのテスト時に実際のメール送信を行わずに動作確認ができます。

  • 「その他の設定」タブを開く
    • Contact Form 7 のフォーム編集画面で「その他の設定」タブをクリック
  • デモモードのコードを追加
demo_mode: on
Bash
  • 「保存」ボタンを押す
    • 設定を反映させる

設定後の動作

  • フォームの送信ボタンを押しても、実際のメールは送信されず「送信完了メッセージ」だけが表示される
  • 本番環境に移行する際は、このコードを削除 すれば通常の送信が可能

デモモードは、フォームの動作確認をする際に便利な機能です。

最初のうちは特に気にせず、そのままでも問題ありません。「こういう設定もできるんだな」と覚えておくとよいでしょう!

まとめ

Contact Form 7は、WordPressで広く利用されているお問い合わせフォームプラグインで、初心者でも簡単にフォームを作成・設置できます。本記事では、インストール方法から基本的な使い方、フォームのカスタマイズ、メール設定まで詳しく解説しました。

特にメールの自動返信設定は、使用するメールドメインによって適切な設定が必要となり、SMTP設定やSPF/DKIM認証の構成が求められる場合があります。適切な設定を行わないと、送信したメールが迷惑メールとして扱われたり、正しく届かないことがあるため注意が必要です。

また、フォームのデザインやメッセージをカスタマイズすることで、サイトの雰囲気やターゲット層に合った使いやすいフォームを作成できます。選択肢の追加、入力項目の調整、エラーメッセージの変更などを行うことで、よりユーザーフレンドリーなフォームに仕上げることが可能です。

Contact Form 7を活用し、訪問者とのスムーズなコミュニケーションを実現しましょう。

コメント

タイトルとURLをコピーしました