この記事で解決できる悩み
- Contact Form 7とは？
- Contact Form 7の設置方法
- Contact Form 7のメニュー追加方法
- Contact Form 7のデザイン設定方法
ブログ運営3年目のけいが解説していきますね。
上記の悩みを解決できる記事を書きました。
僕も初めてContact Form 7を利用してみようと考えていたときは、「どんな特徴があって、どのように設定したらいいんだろう…」と悩んでいたので、みなさんの気持ちはよく分かります。
でも、今回この記事でご紹介するのにあたり、実際に調べて使用してみたところ、意外とシンプルで扱いやすくフォーム作成に必要な流れが一通り理解できました。
この記事で紹介する「Contact Form 7の設定・カスタマイズ方法」を参考にすれば、今日からでも読者との関係が自然と広がっていくブログとして運営していけますよ。
記事前半では「Contact Form 7の特徴」、後半では「Contact Form 7の設定方法（全般）」を紹介するのでブログ運営に興味がある人はぜひチェックしてみてください。
【本編に入る前に】
🎁当サイトでは無料相談を受け付けています🎁
これからブログ運営を始めるのにあたって細かい部分で分かりにくいところもあると思います。
そこで、期間限定特典としてお一人様40分前後の個別無料相談をご用意しました。ぜひご活用ください。
ただし、当サイト経由でWordPressを開設された人のみを対象とさせていただきます。その点についてはご了承ください。
それでは本編でContact Form 7の設定・カスタマイズ方法について解説していきます。
Contact Form 7とは？
まずはContact Form 7とは何かを理解していきましょう。
| Contact Form 7の機能 | 説明 | Contact Form 7の機能 | 説明 | Contact Form 7の機能 | 説明 |
| ①テキスト | 短い文章を自由に入力できる | ⑥日付け | カレンダーから日付を選択できる | ⑪承認確認 | 利用規約などに同意していることを確認できる |
| ②メールアドレス | メールアドレスを入力できる | ⑦テキストエリア | お問い合わせ内容などの長文を入力できる | ⑫クイズ | スパム防止のための簡単な質問に回答できる |
| ③URL | WebサイトなどのURLを入力できる | ⑧ドロップダウンメニュー | 選択肢から1つをプルダウンで選択できる | ⑬ファイル | 画像やPDFなどのファイルを添付できる |
| ④電話番号 | 電話番号を入力できる | ⑨チェックボックス | 複数の選択肢をチェック形式で選択できる | ⑭送信ボタン | 入力した内容を送信できる |
| ⑤数値 | 数字のみを入力できる | ⑩ラジオボタン | 候補の中から1つだけ選択できる |
Contact Form 7（コンタクトフォーム7）は、Webサイトにお問い合わせフォームを設置できる便利なプラグインです。
専門的な知識がなくても、基本的なフォームをすぐに作れたり、必要に合わせてカスタマイズできたりするのが特徴です。
さらに、このContact Form 7は日本で開発されていて、「使い方」や「FAQ」も充実しているので、操作で迷う場面も少なく安心して使えます◎。
このように、扱いやすさと柔軟さのバランスがよく、多くのブログで利用されている人気のプラグインになります。
Contact Form 7の公式マニュアル
Contact Form 7を設定する流れ（全体像）
続いてContact Form 7を設定するまでの流れ（全体像）を見ていきましょう。
Contact Form 7を設置するには基本設定・メニュー設定・デザイン設定をしていく必要があります。
なお、基本設定、メニュー設定はプラグイン内のHTMLでそのまま調整できます。
しかし、デザイン設定だけはプラグイン側で完結せず、自分でCSSコードを用意しないといけないんですよね。
そのため、外部（AI）でCSSを生成して、それを反映するという2つの工程があることを理解しておきましょう。
Contact Form 7の基本設定
それではここから、Contact Form 7の設定方法を説明していきます。
まずは、お問い合わせフォームをWordPressに導入していきましょう。
以下が設置手順とその流れになります。
Contact Form 7の基本設定
- Contact Form 7をインストールする
- フォーム名を入力する
- メールを設定する
- メッセージを設定する
- WordPressに設置する
それぞれ順番に説明していきますね。
Contact Form 7をインストールする
WordPressのダッシュボード画面から「①プラグイン」をクリックします。
「②プラグインを追加」をクリックします。
「③プラグインの検索」から“Contact Form 7”と入力し→「④今すぐインストール」をクリックしてください。
「⑤有効化」をクリックしたら完了です。
このタイミングでのちの設定をスムーズに進めるために「Classic Editor」と「Advanced Editor Tools」も同様にインストールして有効化しておいてください。
フォーム名を入力する
WordPressのダッシュボード画面から「①お問い合わせ」をクリックします。
「②コンタクトフォーム1」をクリックします。
「③フォーム名」を変更していきます。ここのフォーム名は自分の分かりやすいものでOK。
「④（仮）お問い合わせフォーム」と入力し→「⑤保存」をクリックしたら完了です。
メールを設定する
メール設定とは？
読者からお問い合わせがあった際に“管理者に届くメールを設定する”工程になります。
管理画面から「①メール」をクリックします。
「②題名」を消去して“ホームページよりお問い合わせが届きました。”と入力し→「③追加ヘッダー」も同じく消去します。
「④保存」をクリックしたら完了です。
メッセージを設定する
メッセージ設定とは？
読者がお問い合わせをした際に“通知を受け取りました”という自動返信メールを設定する工程になります。
先ほどのメールフォーム画面から下にスクロールして「①メール（2）」にチェックを入れます。
「②題名」を消去して“お問い合わせいただきありがとうございます。【（例）けいブログ】”と入力し→「③追加ヘッダー」も同じく消去します。
※初期設定の段階でエラーがでていますが特にこのエラーは気にする必要はありません。
さらに下までスクロールして「④保存」をクリックしたら完了です。
WordPressに設置する
Contact Form 7の管理画面から「①ショートコード」をコピーします。
WordPressのダッシュボード画面にもどり「②固定ページ」をクリックします。
「③固定ページを追加」をクリックしてください。
「④題名」に“お問い合せフォーム”と入力し→「⑤パーマリンク」に“inquiry”と入力して→「⑥本文」に①のコードを貼り付け→「⑦保存」をクリックします。
続いてお問い合わせフォームを設置する場所を決めていきます。WordPressのダッシュボード画面から「⑧外観」→「⑨メニュー」をクリックします。
「⑩メニュー名」に“フッターメニュー”と入力し→「⑪メニュー設定」にチェックを入れて→「⑫メニューを作成」をクリックしましょう。
「⑬お問い合わせ」にチェックを入れ→「⑭メニューに追加」を選択して→「⑮メニューを保存」をクリックします。
お問い合わせフォームがWordPressに表示されていれば設置は完了です。実際にクリックして動作を確認してみましょう。
▼お問い合わせフォームが表示されます▼
お問い合わせフォームが確認できたら、メッセージを送信してみて、双方にきちんと通知が届いているか確認してみましょう。
Contact Form 7のメニュー設定（けいブログ風）
基本設定が終わり、デフォルトのお問い合わせフォームを設置できました。
ただ、このままだとフォームとして足りない部分もあるので、メニュー設定から追加のカスタマイズをしていきましょう。
以下がカスタマイズ手順とその流れです。
Contact Form 7のメニュー設定
- フリガナを追加する
- ドロップダウンを追加する
- ファイル吹付を追加する
上記で紹介している設定以外にも、Contact Form 7ではさまざまなメニューを追加できますが、当ブログでは「読者が迷わず入力できる」という点を意識してフォームを構成しています。
それぞれの具体的な手順を説明していきますね。
フリガナを追加する
WordPressのダッシュボード画面から「①お問い合わせ」をクリックします。
「②お問い合わせフォーム」をクリックします。
氏名の下に4マス分の改行を入れ→3マス目にカーソルを合わせて「③テキスト」をクリックします。
「④タグの挿入」をクリックしてください。
「⑤半角改行」を入れてタグの位置をそろえます。
<label>と</label>で基本的に囲む必要があるので「⑥氏名」からコピーして貼り付けます。
「⑦氏名」を“フリガナ”に変更します。
（仮）666のうしろに半角スペースを入れて「⑧placeholder "ヤマダ タロウ"」と入力し→「⑨保存」をクリックしたら完了です。
上記工程での「placeholder ＋"ヤマダ タロウ"」はフリガナ欄にプレースホルダーを表示するのに入力しています。
▼完成したお問い合わせフォームがこちらです▼
ドロップダウンを追加する
Contact Form 7の管理画面から「①題名」をクリックして入力されているコードを全て消去します。
「②ドロップダウンメニュー」をクリックします。
③選択できる値から「選択肢 1」に“ブログの相談”と入力し→「選択肢 2」に“X運用の相談”と入力して→「選択肢 3」に“その他”と入力後に→「④タグを挿入」をクリックします。
<label>と</label>で基本的に囲む必要があるので「⑤氏名」からコピーして貼り付けましょう。
「⑥氏名」を“ご用件”に変更します。
「⑦ご用件」に必須マークを入れたいのでご用件のうしろに半角スペースを入れて“<span class="cf7-required">必須</span>”と入力します。
さらに表示画面をセレクト式にしたいので「⑧（仮）select-120」のうしろに半角スペースを入れて“include_blank”を入力し→「⑨保存」をクリックしたら完了です。
▼完成したお問い合わせフォームがこちらです▼
なおこの段階で、氏名・メールアドレス・メッセージ本文にも「必須の表記」と「プレースホルダー」を入れておきたいので合わせてカスタマイズしておきましょう。
各項目のHTMLカスタマイズコード
氏名
<label> 氏名 <span class="cf7-required">必須</span>
[text* your-name akismet:author placeholder "山田 太郎"]</label>
メールアドレス
<label> メールアドレス <span class="cf7-required">必須</span>
[email* your-email akismet:author_email placeholder "kei@gmail.com"]</label>
メッセージ本文
<label> メッセージ本文 <span class="cf7-required">必須</span>
[textarea* your-message placeholder "Webサイトに関するお悩みごとや感じている課題など自由にご記入ください。可能な範囲でより具体的に記入いただけますとスムーズにご提案ができます。"]</label>
▼調整したお問い合わせフォームがこちらです▼
ファイル吹付を追加する
Contact Form 7の管理画面からメッセージ本文の下に4マス分の改行を入れ→3マス目にカーソル合わせて「①ファイル」をクリックします。
「②タグを挿入」をクリックします。
<label>と</label>で基本的に囲む必要があるので「③氏名からコピー」して貼り付けます。
「④氏名」を“吹付ファイル”に変更し→「⑤保存」をクリックしたら完了です。
▼完成したお問い合わせフォームがこちらです▼
メール・メッセージ設定にカスタマイズを反映する
続いてカスタマイズ内容が増えたのでメール・メッセージにも追加項目を反映していきます。
これが終わればメニュー設定は終わりなのでもうひと踏ん張り頑張りましょう。
それぞれの具体的な手順は以下の通りです。
メール設定にカスタマイズを反映する
Contact Form 7の管理画面から「①メール」をクリックします。
メッセージ本文から「②上部」に“下記の通りお問い合わせがありました。”と入力します。
③デフォルトで入力されているコードを全て削除してください。
「④コード」を選択して「⑤本文」に5つ貼り付けます。（例 / 名前：[your-name]）
各コード名の意味（本文で使うタグ）
[your-name]▶名前
[text-○○○]▶フリガナ
[your-email]▶メールアドレス
[select-○○○]▶要件
[your-message]▶メッセージ
[file-○○○]▶吹付ファイル
下にスクロールし「⑥ファイル吹付」にもコードを貼り付け→「⑦保存」をクリックしたら完了です。
メッセージ設定にカスタマイズを反映する
メール（2）の「①上部」に“下記の内容でお問い合わせを承りました。”と入力します。
②デフォルトで入力されているコードを全て削除します。
「③コード」を選択して「④本文」に5つ貼り付けましょう。（例 / 名前：[your-name]）
下にスクロールし「⑤ファイル吹付」にもコードを貼り付け→「⑥保存」をクリックしたら完了です。
念のため、お問い合わせフォームが確認できたらメッセージを送信してみて、もう一度双方に通知が届いているか確認しておきましょう。
Contact Form 7のデザイン設定
基本設定とメニュー追加が終わり、必要な項目がそろったお問い合わせフォームを設置できました。
最後の仕上げとして、デザイン設定から追加のカスタマイズを行いWebサイトらしい見た目に整えていきましょう。
以下がカスタマイズ手順とその流れです。
Contact Form 7のデザイン設定
- AI用プロンプトを作成する
- AIで生成したCSSを入力する
それぞれの手順を見ていきましょう。
AI用プロンプトを作成する
設定の全体像でもお伝えしましたが、Contact Form 7はプラグイン内だけでデザイン調整を完結させることができません。
そのため、AI（ChatGPT）を使ってCSSを生成し、それを貼り付けてカスタマイズしていきます。
整える内容は主に、枠・色み・必須バッジといった見た目の部分になります。
当ブログで実際に使っているプロンプトを下に貼っておくので、参考にしながらCSSを作成してみてください。
CSS作成に使うAIプロンプト
Contact Form 7のデザインCSSを作りたいので、
下の条件でCSSコードだけ作ってください。
【フォーム項目】
・お名前（必須）
・メールアドレス（必須）
・ご相談内容（ドロップ：ブログの相談 / X運用の相談 / その他）
・メッセージ（必須・プレースホルダーつき）
Webサイトに関するお悩みごとや感じている課題など自由にご記入ください。
できる範囲で具体的に記入いただけるとスムーズにご提案できます。
・ファイル添付（任意）
・送信ボタン
【デザイン】
・白＋薄ベージュ＋黄色（#ffc409）
・必須バッジ：赤背景×白文字
・角丸8px、余白多め
・スマホ優先
・AFFINGER6で崩れないCSS
【出力】
CSSコードのみ（説明不要）
※なお、AIは日々アップデートされているため、同じプロンプトを入力しても毎回同じコードが生成されるわけではありせん。その点はご了承ください。
AIで生成したCSSを入力する
「①外観」→「②カスタマイズ」をクリックします。
「③追加CSS」をクリックし→「④お問い合わせフォーム」をクリックします。
AIに生成してもらった「⑤コード」を貼り付け→「⑥公開」をクリックしたら完了です。
▼完成したお問い合わせフォームがこちらです▼
CSSカスタマイズ用コード〈全まとめ〉
それではまとめとして、これまでにデザイン設定で行ってきたけいブログ風のカスタマイズをおさらいしていきます。
▼けいブログ風のCSSコードはこちら▼
/* ================================
Contact Form 7 カスタマイズ
================================ */
/* 入力欄（解答欄） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
width: 100% !important;
padding: 14px !important;
background: #fff8ed !important;
border: 1px solid #dddddd !important;
border-radius: 8px !important;
box-sizing: border-box !important;
font-size: 16px !important;
}
/* フォーカス時 */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
border-color: #e2d7c3 !important;
box-shadow: 0 0 5px rgba(226, 215, 195, 0.6) !important;
}
/* ラベル */
.wpcf7 label {
font-weight: bold !important;
color: #444444 !important;
display: block !important;
margin-bottom: 6px !important;
}
/* ================================
必須バッジ（明るくて落ち着いた中間トーン）
================================ */
.wpcf7 .cf7-required {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #f7b543; /* ← ★最適トーン */
color: #ffffff;
font-size: 11px;
border-radius: 3px;
line-height: 1.4;
}
/* フォーム全体 */
.wpcf7 form {
background: #ffffff !important;
padding: 20px !important;
border-radius: 10px !important;
}
/* ================================
送信ボタン（必須と同じ色）
================================ */
.wpcf7 .wpcf7-submit {
width: 100% !important;
padding: 15px !important;
background: #f7b543 !important; /* ← ★最適トーン */
border: 1px solid #e0a243 !important;
color: #ffffff !important;
border-radius: 30px !important;
font-size: 17px !important;
font-weight: bold !important;
cursor: pointer !important;
transition: 0.2s ease !important;
}
/* ホバー */
.wpcf7 .wpcf7-submit:hover {
background: #eaa53b !important;
}
上記も参考にしつつご自身のカラーコードに置き換えてそのまま使ってみてください。
▼色を変更するためのプロンプトはこちら▼
先ほど作ってもらったCSSの色みを調整したいので、
以下の条件で色だけ変更したCSSを再生成してください。
【変更したい色】
・アクセントカラーを（ここに好きな色コード）に変更
・入力欄の背景色を（ここに好きな色コード）に変更
・必須バッジと送信ボタンの色も統一して変更
【注意】
デザインの構造や余白、角丸などはそのままでお願いします。
CSSコードのみで出力してください。
※なおこちらも、同じプロンプトを入力しても同じコードが生成されるわけではないので何度か試してみることをおすすめします。
まとめ（Contact Form 7で副業の問い合わせ導線を整えよう！）
本記事では、Contact Form 7の設定方法について解説してきました。
最後に、このプラグインを使った「当ブログでの設定・カスタマイズ方法」の要点をまとめて終わりたいと思います。
| Contact Form 7の設定方法 |
|
| Contact Form 7のカスタマイズ方法 |
|
ご紹介した「Contact Form 7の設定・カスタマイズ方法」を参考にすれば、今日からでも読者とつながりやすいブログとして運営していけます。
ぜひ本記事を参考にしながら、この機会にContact Form 7の設定を進めてみてくださいね。
【最後に】
【本編に入る前に】
🎁当サイトでは無料相談を受け付けています🎁
これからブログ運営を始めるのにあたって細かい部分で分かりにくいところもあると思います。
そこで、期間限定特典としてお一人様40分前後の個別無料相談をご用意しました。ぜひご活用ください。
ただし、当サイト経由でWordPressを開設された人のみを対象とさせていただきます。その点についてはご了承ください。
