【実践編】Contact Form 7で作るお問い合わせフォームの具体的な設定方法【テンプレ付き】

ol-user

このページでは、WordPressプラグイン「Contact Form 7」を使用して、お問い合わせフォームを実際に設置する手順を紹介します。

フォームの作成から設置、動作確認までを一通り行い、送信テストができる状態を目指します。

予約・商品問い合わせ・採用など、目的に応じて使いやすいフォームのテンプレートも用意しました！

目標：Contact Form 7を使って基本的なお問い合わせフォームを作成し、スパム対策と送信テストを含めて正しく動作するフォームを完成させる。

1.Contact Form 7をインストールする
2.新しいフォームを作成する
3.入力項目をカスタマイズする
4.メール設定を行う
5.自動返信メールを設定する（任意）
6.メッセージタブを調整する
7.フォームをページに設置する
8.送信テストを行う
9.やっておきたい設定（スパム・履歴・送信安定化）
10.まとめ
困ったら相談してみよう！
困ったら相談してみよう！

1.Contact Form 7をインストールする

Contact Form 7は軽量で、デザイン調整もしやすいため、コーポレートサイトやLP制作でも定番のプラグインです。

WordPress管理画面 →「プラグイン」→「新規追加」
「Contact Form 7」で検索し、インストール → 有効化。
左メニューに「お問い合わせ」が追加される。

プラグインのインストール〜有効化までは、OLTANAマニュアル「お問い合わせページの作り方」に図解付きで詳しく解説されています。

あわせて読みたい

お問い合わせページの作り方

2.新しいフォームを作成する

「お問い合わせ」→「コンタクトフォームを追加」をクリック。

フォーム名を入力（例：商品お問い合わせフォーム）。

初期状態では、名前・メール・件名・メッセージの項目が自動で入っています。

3.入力項目をカスタマイズする

以前の記事「クライアントと進めるお問い合わせフォーム制作」で整理した内容をもとに、ヒアリングした項目を反映してフォームを構成します。

必要に応じて項目を追加・削除し、目的に合わせた内容に整えましょう。

3-1.基本的な入力項目の種類

テキスト項目（お名前など）
メールアドレス項目（メールアドレス）
テキストエリア（お問い合わせ内容）
任意項目の設定（チェックボックスやラジオボタンなど）

入力できる項目についてさらに詳しく知りたい方は、CF7の公式マニュアルもご覧ください。

あわせて読みたい

フォームのテンプレートを編集する(外部サイト)

3-2.そのまま使えるフォームテンプレート（目的別）

ここでは、よく利用される目的別に、必要最低限の情報を整理したテンプレートを紹介します。

一般的なお問い合わせフォーム
商品問い合わせフォーム（返品・故障・修理など）
採用フォーム（アルバイト応募など）
予約フォーム（飲食店・サロン・クリニックなど）

テンプレートはそのままコピーして使える構成になっています。

案件ごとに項目を追加・削除しながら調整して使ってください。

また、コピペはフォームに入れたら反映されますよ！

▼ 一般的なお問い合わせフォーム（コピペOK）

【一般】入力フォーム（フォームタブ）

<label> お名前（必須）
    [text* your-name autocomplete:name]
</label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email]
</label>

<label> 電話番号（任意）
    [tel your-tel autocomplete:tel]
</label>

<label> お問い合わせ内容（必須）
    [textarea* your-message]
</label>

[acceptance* privacy-consent]
<a href="プライバシーポリシーURL" target="_blank">個人情報保護方針</a>に同意します
[/acceptance]

[submit "送信"]

▼ 商品問い合わせフォーム（コピペOK）

【商品問い合わせ】入力フォーム（フォームタブ）

<label> お名前（必須）
    [text* your-name autocomplete:name]
</label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email]
</label>

<label> 電話番号（任意）
    [tel your-tel autocomplete:tel]
</label>

<label> 商品名（必須）
    [text* product-name]
</label>

<label> 注文番号（任意）
    [text order-number]
</label>

<label> 購入日（任意）
    [date purchase-date]
</label>

<label> 不具合・お問い合わせ内容（必須）
    [textarea* inquiry-details]
</label>

<label> 関連ファイルURL（任意）
    [text related-file]
</label>

[acceptance acceptance-415] <a href="プライバシーポリシーページのURL" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">プライバシーポリシー</a>に同意する
 [/acceptance]

[submit "送信"]

▼ 採用フォーム（コピペOK）

【採用】入力フォーム（フォームタブ）

<label> お名前（必須）
    [text* your-name autocomplete:name]
</label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email]
</label>

<label> 電話番号（任意）
    [tel your-tel autocomplete:tel]
</label>

<label> 希望職種（必須）
    [text* job-position]
</label>

<label> 志望動機（必須）
    [textarea* motivation]
</label>

<label> 経歴・スキル（任意）
    [textarea skills]
</label>

<label> 履歴書・職務経歴書のURL（任意）
    [text resume-url]
</label>

[acceptance acceptance-415] <a href="プライバシーポリシーページのURL" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">プライバシーポリシー</a>に同意する
 [/acceptance]

[submit "送信"]

▼ 予約フォーム（コピペOK）

【予約】入力フォーム（フォームタブ）

<label> お名前（必須）
    [text* your-name autocomplete:name]
</label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email]
</label>

<label> 電話番号（必須）
    [tel* your-tel autocomplete:tel]
</label>

<label> ご希望メニュー（必須）
    [radio radio-986 use_label_element "ランチコース" "ディナーコース1" "ディナーコース2" "お誕生日プラン"]
</label>

<label> 第一希望日時（必須）
    [date* date-907]
</label>

<label> 第二希望日時（任意）
    [date date-213]
</label>

<label> 備考（任意）
    [textarea notes]
</label>

[acceptance acceptance-415] <a href="プライバシーポリシーページのURL" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">プライバシーポリシー</a>に同意する
 [/acceptance]

[submit "送信"]

3-3.添付ファイルが必要な場合の代替案

お問い合わせフォームでは、基本的に添付ファイルの受け取りを推奨していません。

容量やセキュリティの問題が発生しやすく、フォーム側でのトラブルにつながりやすいためです。

必要な情報をスムーズかつ安全に受け取るために、以下のような代替案を検討してください。

1. 共有リンクを送付してもらう

利用者側でGoogleドライブやDropboxなどのオンラインストレージにアップロードし、その共有リンクをフォーム内のテキスト項目に入力してもらう方法です。

容量制限がないため、大きなファイルにも対応できる。
メールサーバー側の制限に左右されにくい。
アップロードの成否を利用者自身が確認できる。

リンクの共有権限については、「リンクを知っている全員が閲覧可能」または「特定の相手のみ共有」など、用途に応じて適切に設定するよう案内文を入れるとより安全です。

あわせて読みたい(外部リンク)

【初心者向け】Googleドライブの使い方を徹底解説！便利な活用法やよくある問題を紹介

2. フォーム送信後にメールでやり取りする

フォームでは最低限の情報だけ受け取り、添付ファイルについては回答メールのやり取りの中で送ってもらう方法です。

添付ファイルがメール側の仕様に沿って送信されるため、整合性が高い。
フォームを複雑にしないため、ユーザーの入力負担を軽減できる。

3. 専用アップローダーを利用する

画像やPDFなど特定の種類のファイルのみ受け取りたい場合は、外部サービスのアップロードフォームをあらかじめ用意し、そこへアップしてもらう方法もあります。

用途に合わせて容量制限やファイル形式の指定がしやすい。
フォーム本体の負荷を減らせる。

4.メール設定を行う

お問い合わせフォームが送信されたあとに、管理者に通知されるメールです。

フォームから送信された内容がクライアントに正しく届くよう、メール設定を整えます。

「メール」タブを開く。

送信先メールアドレス（クライアント側の受信先）を設定。

差出人・件名・本文を編集し、送信内容を整える。

メールタブについても、コピペ可能なテンプレートを用意しました。

▼ 一般的なお問い合わせフォーム（コピペOK）

【一般】管理者宛メール（メールタブ）

送信者: [your-name] <[your-email]>
題名: 【お問い合わせ】[your-name] 様より

以下の内容でお問い合わせが届きました。

━━━━━━━━━━━━
■ お名前
[your-name]

■ メールアドレス
[your-email]

■ 電話番号
[your-tel]

■ お問い合わせ内容
[your-message]
━━━━━━━━━━━━

送信元IP: [_remote_ip]
ブラウザ: [_user_agent]
送信日時: [_date] [_time]

▼ 商品問い合わせフォーム（コピペOK）

【商品問い合わせ】管理者宛メール（メールタブ）

送信者: [your-name] <[your-email]>
題名: 【商品お問い合わせ】[product-name]

以下の内容で商品に関するお問い合わせが届きました。

━━━━━━━━━━━━
■ お名前
[your-name]

■ メールアドレス
[your-email]

■ 電話番号
[your-tel]

■ 商品名
[product-name]

■ 注文番号
[order-number]

■ 購入日
[purchase-date]

■ 不具合・お問い合わせ内容
[inquiry-details]

■ 関連ファイルURL
[related-file]
━━━━━━━━━━━━

送信元IP: [_remote_ip]
ブラウザ: [_user_agent]
送信日時: [_date] [_time]

▼ 採用フォーム（コピペOK）

【採用】管理者宛メール（メールタブ）

送信者: [your-name] <[your-email]>
題名: 【採用エントリー】[job-position]

以下の応募が届きました。

━━━━━━━━━━━━
■ お名前
[your-name]

■ メールアドレス
[your-email]

■ 電話番号
[your-tel]

■ 希望職種
[job-position]

■ 志望動機
[motivation]

■ 経歴・スキル
[skills]

■ 履歴書・職務経歴書URL
[resume-url]
━━━━━━━━━━━━

送信元IP: [_remote_ip]
ブラウザ: [_user_agent]
送信日時: [_date] [_time]

▼ 予約フォーム（コピペOK）

【予約】管理者宛メール（メールタブ）

送信者: [your-name] <[your-email]>
題名: 【予約リクエスト】[menu]

以下の予約リクエストが届きました。

━━━━━━━━━━━━
■ お名前
[your-name]

■ メールアドレス
[your-email]

■ 電話番号
[your-tel]

■ ご希望メニュー
[radio-986]

■ 第一希望日時
[date-907]

■ 第二希望日時（任意）
[date-213]

■ 備考
[notes]
━━━━━━━━━━━━

送信元IP: [_remote_ip]
ブラウザ: [_user_agent]
送信日時: [_date] [_time]

5.自動返信メールを設定する（任意）

ユーザー（お問い合わせをした人）に送信完了の通知を自動で送る設定です。

自動返信を設定することで、ユーザーに「送信できた」という安心感を与えられます。

メールタブの下にある「メール (2)」タブを有効化。

件名や本文に「お問い合わせありがとうございます」などの文面を設定。

自動返信メール用のテンプレートです。

▼ 一般的なお問い合わせフォーム（コピペOK）

【一般】自動返信メール（メールタブの「メール(2)」）

[your-name] 様

お問い合わせありがとうございます。
以下の内容で受け付けました。

━━━━━━━━━━━━
■ お名前
[your-name]

■ メールアドレス
[your-email]

■ 電話番号
[your-tel]

■ お問い合わせ内容
[your-message]
━━━━━━━━━━━━

内容を確認のうえ、担当者よりご連絡いたします。

--------------------------------
サイト名（書き換えてください）
サイトURL
--------------------------------

▼ 商品問い合わせフォーム（コピペOK）

【商品問い合わせ】自動返信メール（メールタブの「メール(2)」）

[your-name] 様

商品に関するお問い合わせをいただきありがとうございます。
以下の内容で受け付けました。

━━━━━━━━━━━━
■ 商品名
[product-name]

■ 不具合・お問い合わせ内容
[inquiry-details]

■ 関連ファイルURL（任意）
[related-file]
━━━━━━━━━━━━

内容を確認のうえ、担当者よりご連絡いたします。

--------------------------------
サイト名（書き換えてください）
サイトURL
--------------------------------

▼ 採用フォーム（コピペOK）

【採用】自動返信メール（メールタブの「メール(2)」）

[your-name] 様

採用エントリーをお送りいただきありがとうございます。
以下の内容で受け付けました。

━━━━━━━━━━━━
■ 希望職種
[job-position]

■ 志望動機
[motivation]

■ 経歴・スキル
[skills]

■ 履歴書・職務経歴書URL（任意）
[resume-url]
━━━━━━━━━━━━

担当者が内容を確認し、あらためてご連絡いたします。

--------------------------------
サイト名（書き換えてください）
サイトURL
--------------------------------

▼ 予約フォーム（コピペOK）

【予約】自動返信メール（メールタブの「メール(2)」）

[your-name] 様

ご予約リクエストを受け付けました。
以下の内容で承りました。

━━━━━━━━━━━━
■ ご希望メニュー
[radio-986]

■ 第一希望日時
[date-907]

■ 第二希望日時（任意）
[date-213]

■ 備考
[notes]
━━━━━━━━━━━━

空き状況を確認のうえ、担当者より日程についてご連絡いたします。

--------------------------------
サイト名（書き換えてください）
サイトURL
--------------------------------