WordPressでサイトを作ったら、必ず必要になるのが「お問い合わせフォーム」です。
「お問い合わせフォームなんてどうやって作ればいいの？」「難しそう…」と思われる方も多いんじゃないでしょうか。
いろいろな方法がある中で、いちばんおすすめなのが 「Contact Form 7」 という無料プラグインです。
世界中で使われていて、日本語情報も豊富。何よりAFFINGERとの相性もいいので、当サイトでは必ずといっていいほど導入しています。
この記事では、WordPress初心者でも迷わずフォームを完成させられるように、
インストールから基本設定、申込フォームへの応用、スパム対策、デザイン調整の手順まで詳しく解説していきます。
ステップ1：Contact Form 7の導入 ～ ページ設置
プラグインをインストール
まずはプラグインを導入します。
WordPress管理画面にログインして、以下の手順で進めてください。
- 左のメニューから「プラグイン」→「新規追加」をクリック
- 右上の検索窓に「Contact Form 7」と入力
- 表示された「Contact Form 7」を「今すぐインストール」→「有効化」
これでフォーム作成に必要な準備が整いました。
インストール後は、管理画面に「お問い合わせ」というメニューが追加されます。
デフォルトのフォームを確認する
- 「お問い合わせ」メニューを開く
（すでに「コンタクトフォーム1」というサンプルフォームが用意されています。）
- 「編集」をクリックすると、フォームのコードが出てきます。
- そこにあるショートコードをコピーしてください。
固定ページにフォームを設置する
次に、このフォームを実際のページに表示してみましょう。
- 「固定ページ」から新規追加をクリック
- ページタイトルに「お問い合わせ」と入力
- 本文に先ほどコピーしたショートコードを貼り付ける
- 右上にある「公開」ボタンを押す
- これで以下のような「お問い合わせフォーム」が完成しました
この時点で「名前・メールアドレス・題名・メッセージ」の4項目が入力できるフォームが完成しているはずです。
「え、もうできたの？」と思われたかもしれませんが、本当にここまでは簡単です。
次のステップからは、フォームの中身を自分に合った形に編集したり、申込フォームとして使えるようにしていきましょう。
ステップ2：フォームを自分用に編集する
このステップでは、デフォルトのフォームを「自分のサイトに合った内容」に変えて、実際に使える形に整えていきます。
例：題名を消す、電話番号を追加するなど
手順
メニューの「お問い合わせ」をクリック
「コンタクトフォーム1」の編集画面を開く
編集画面にフォームコードが表示されます。
不要な項目を削除してみる
例：題名（Subject）は必要ないことが多いので、次のコードを削除します。
<label> 題名
[text* your-subject] </label>必要な項目を追加してみる
例：電話番号を追加する場合は、削除したコードの下に次を貼り付けます。
<label> 電話番号
[tel your-tel] </label>保存して確認する
編集画面右上の「保存」をクリック。
フォームを設置したページをブラウザで開き、「題名」が消えて「電話番号」が追加されているか確認してください。
ここまでで「自分に必要な項目を追加・削除できる」ようになりました。
次は、申込フォームへの応用（プラン選択や日付入力など） に進みましょう。
ステップ3：申込フォームとして使う
このステップでは、お問い合わせフォームを「申込フォーム」に応用して、予約や体験申込などに対応できるようにします。
例：希望日を選べる、プランを選べる、ファイルを添付できる
手順
希望日を入力できるようにする
編集画面のフォームコードに、次を追記してください。
<label> 希望日
[date your-date] </label>これでカレンダーから日付を選べる入力欄が追加されます。
希望プランを選べるようにする
日付の下に次を追記します。
<label> 希望プラン
[select your-plan "プランA" "プランB" "プランC"] </label>プルダウンでプランを選べるようになります。
「プランA」などは、自分のサービス内容に合わせて書き換えてください。
ファイルを添付できるようにする（任意）
見積りや写真送付が必要な場合は、次を追加してください。
<label> 資料や写真を添付（jpg, pdf可）
[file your-file limit:5mb] </label>ユーザーが画像やPDFを送れるようになります。
保存してページを確認
ブラウザでお問い合わせページを確認し、希望日・プラン・添付ファイルの欄が表示されていればOK
これで「お問い合わせフォーム」から一歩進んで「申込フォーム」として使えるようになりました。
次は、自動返信メールを設定する に進みましょう。
プルダウン（希望プラン）に枠線がない
ステップ4：自動返信メールを設定する
このステップでは、フォームから送信したユーザーに「お問い合わせありがとうございます」という自動返信メールを送れるようにします。
これでユーザーに安心感を与え、信頼性もアップします。
手順
フォーム編集画面を開いて「メール」タブを開く
ここに「メール」と「メール（2）」という2種類の設定欄があります。
「メール（2）」を有効化する
「メール（2）」のチェックボックスにチェックを入れます。
※すると自動返信メールの編集画面が出現します。
宛先を設定する
「宛先」欄に [your-email] と入力します。
これはフォームで入力されたユーザーのメールアドレスを意味します
件名を設定する
例：
お問い合わせありがとうございます本文を設定する
以下をコピペして、自分のサイト用に書き換えてください。
[your-name] 様
お問い合わせいただきありがとうございます。
お問い合わせ内容を確認の上、ご返信先メールアドレスへ回答いたします。
今しばらくお待ちくださいますようお願いいたします。
ーーーーーーーーーーーーーーーーーーーー
● お名前 [your-name]
●メールアドレス [your-email]
● お問い合わせ内容
[your-message]
ーーーーーーーーーーーーーーーーーーーー
お問い合わせ内容によっては、返信までに時間がかかることがありますので、ご了承ください。保存する
設定が終わったら「保存」をクリック。
動作確認
- 実際にフォームからテスト送信してみる
- 自分のメールアドレス宛に「自動返信メール」が届けば成功
- 本文内の「[your-name]」「[your-message]」が、実際に入力した内容に置き換わっているかを確認
これでフォーム送信者に自動返信メールが届くようになりました。
次は、サンクスページの設定に進みましょう。
ステップ5：サンクスページ（完了画面）の設定
このステップでは、フォーム送信後に「ありがとうございます」と表示されるサンクスページを作成します。
送信完了がハッキリ伝わり、離脱防止・信頼性アップにつながります。
手順
WordPress管理画面 → 左メニュー「固定ページ」→「固定ページを追加」
タイトルに「お問い合わせありがとうございます」と入力
本文には次のようなメッセージを書きます
この度はお問い合わせいただき、誠にありがとうございます。
内容を確認のうえ、担当者よりご連絡いたします。
通常24時間以内に返信いたしますので、しばらくお待ちください。「公開」をクリックしてページを保存
これでサンクスページが完成しました。
フォーム送信後にサンクスページへ移動させる
Contact Form 7単体ではリダイレクト機能がありません。
そのため、専用のプラグイン「Redirection for Contact Form 7」を使います。
プラグイン導入手順
- 「プラグインを追加」→検索窓に「Redirection for Contact Form 7」と入力。
※「有効化」まで済ませる
- メニューの「お問い合わせ」→ フォームを選択し編集画面へ
- 「Actions」というタブが追加されているのでクリック
- 「＋Add Action」→「Redirect」を選択
- Rule Title に「サンクスページ」と入力
- Select a page を、先程作成したサンクスページ（お問い合わせありがとうございます）を選択
- 最後に「保存」
これでリダイレクトの準備は完了です。
動作チェック
- お問い合わせページを開き、テストで送信してみる
- 送信完了後に「お問い合わせありがとうございます」ページに移動すれば成功
- 自動返信メールと合わせて届いていれば完璧です
これで、送信後に「ありがとうございます」と表示されるサンクスページが用意できました。
次は、スパム対策（reCAPTCHAの導入） に進みましょう。
ステップ6：スパム対策（reCAPTCHAの導入）
このステップでは、フォームからの迷惑メール（スパム）を減らすために、Google reCAPTCHAを導入します。
「ロボットによる自動送信」を防ぎ、安心してフォームを使えるようにします。
手順
1. Google reCAPTCHAにサイトを登録する
- Google reCAPTCHA管理ページにアクセスする
→ https://www.google.com/recaptcha/admin/create
- Googleアカウントでログイン
- 新しいサイトを登録する画面が表示されます
- 必要な情報を入力する
- ラベル：自分が分かりやすい名前（例：サイト名）
- reCAPTCHAタイプ：v3（推奨）を選択
- ドメイン：自分のサイトURL（例：the-affinger.com）を入力
- ラベル：自分が分かりやすい名前（例：サイト名）
- 「送信」をクリックすると サイトキー と シークレットキー が発行されます
この2つのキーは後で使うのでコピーしておきましょう。
2. WordPressにキーを設定する
- WordPress管理画面 → 左メニュー「お問い合わせ」→「インテグレーション」
- 「reCAPTCHA」を探して「インテグレーションの設定」をクリック
- 先ほど取得した「サイトキー」と「シークレットキー」を入力し「変更を保存」をクリック
- reCAPTCHA が有効化されているか確認
3. 動作を確認する
お問い合わせページを開き、右下に「reCAPTCHA」のマークが表示されていれば導入成功です。
このマークは通常サイト訪問者には邪魔になりません。
これでスパム対策も完了しました。
最後に、デザインを整える で、見た目をAFFINGERに合わせておしゃれに仕上げましょう。
ステップ7：デザインを整える
このステップでは、無機質なフォームを、AFFINGERのデザインに合わせて「見やすく・おしゃれに」仕上げます。
見た目が整うと信頼感がアップし、送信率（CVR）も上がります。
デフォルトの見た目はちょっと味気ない
Contact Form 7の初期状態は、ただの白い入力欄とボタンです。
そのままでも使えますが、「デザインが安っぽい」と感じられると、せっかくの問い合わせも減ってしまいます（あんまり関係ないけど）。
そこで、CSSを少し追加してデザインを整えていきます。
これから紹介するCSSコードを、WordPressの「追加 CSS」にコピー＆ペーストするだけで、すぐにデザインが反映されます。
ボタンをおしゃれにする
例：ボタン（紫）、ホバー時（明るい紫）、文字色（白）
.wpcf7 input[type="submit"] {
background: #8B3DFF; /* 背景色（お好みで変更可） */
color: #fff; /* 文字色 */
padding: 12px 24px; /* 内側の余白 */
border-radius: 10px; /* 角を丸める */
border: none; /* 枠線を消す */
cursor: pointer; /* カーソルをポインタに */
}
.wpcf7 input[type="submit"]:hover {
background: #A163FF; /* ホバー時に色を少し明るく */
}これだけで「送信ボタン」がぐっと見栄えよくなります。
入力欄を整える
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%; /* 横幅いっぱいに広げる */
padding: 10px; /* 内側の余白 */
border: 1px solid #ccc; /* 薄いグレーの枠線 */
border-radius: 4px; /* 角を少し丸める */
box-sizing: border-box;
font-size: 16px; /* 文字サイズ */
}このCSSが重要なのは、見た目の変化よりもレイアウトの安定性とモバイルでの表示を確保する点にあります。
さらに凝ったデザインをしたい方へ
今回ご紹介した基本的なCSSでフォームだけでも使いやすくなりますが、さらにボタンの色や入力欄のアニメーションなど、凝ったデザインを取り入れたい場合は、以下の記事を参考にフォームをカスタマイズしてみてください。
まとめ
ここまでで、
- 基本フォームの作成
- 項目の追加・編集
- 申込フォームへの応用
- 自動返信メール
- サンクスページ
- スパム対策
- デザイン調整
と、一通りの作業ができました。
これで、初心者でも迷わずフォームを完成できるはずです。
最後に、当サイトの購入特典では デザイン済みフォームテンプレート を用意しています。
コピペするだけで「プロが整えたデザイン」がすぐ反映されるので、作業をもっと短縮できます。
＼ 当サイト限定の特典をチェック ／
【2025年最新】AFFINGER6の購入特典はこちら
