- 「WordPressで問い合わせフォームを作りたい」
- 「Contact Form 7の設定方法が知りたい」
そんな方に向けて、この記事では Contact Form 7の使い方と基本設定を解説します。
初心者でも数分で設置できる手順から、便利なカスタマイズまでまとめました。
Contact Form 7とは？
Contact Form 7は、WordPressでお問い合わせフォームを簡単に作成・管理できる無料プラグインです。
特に日本発のプラグインで、世界的にも非常に利用者が多い定番ツールです。
- シンプルにフォーム作成が可能
ショートコードを固定ページや投稿に貼り付けるだけでフォームを表示できます。 - カスタマイズ性が高い
名前、メールアドレス、チェックボックス、ラジオボタン、ドロップダウンなど、自由に入力項目を組み合わせ可能。HTMLを直接編集できる柔軟性もあります。 - スパム対策機能
reCAPTCHAやAkismetとの連携により、迷惑メールを防止できます。 - 追加機能の拡張が豊富
外部アドオン（プラグイン拡張）で、DB保存、ステップフォーム、ファイルアップロード、決済機能なども追加可能。 - 多言語対応
日本語を含む多言語に対応しており、グローバルに利用されています。
まとめると、Contact Form 7は「WordPressサイトに柔軟でシンプルなお問い合わせフォームを導入できる定番プラグイン」と言えます。
Contact Form 7の使い方と基本設定
プラグインの導入
「プラグイン」＞「プラグインを追加」＞「Contact Form 7を入力」＞「インストール」＞「有効化」
新しいフォームの作成
「お問い合わせ」＞「コンタクトフォームを追加」＞「フォーム名を入力」＞「保存」
メール設定
「メール」タブを選択して、上図のように設定します。
下記のようにメール送信先を複数指定する場合は、カンマで区切ります。
mail@gmail.com, mail2@gmail.com, mail3@gmail.com
Gmailのスパム判定を回避
メール設定で行った送信者の箇所に「Gmail」を設定すると、スパム判定されユーザーに届かない可能性があります。
Gmail APIの設定が必要になりますが、「WP Mail SMTP」プラグインを使用する事で、スパム判定されづらくなります。
ショートコードを固定ページに貼り付け
![]()
「カーソルを合わせる」＞「＋ボタンを選択」
「contactで検索」＞「Contact Form 7を選択」＞「作成したフォームを選択」＞「保存」
フォームの確認
実際にフォームが表示されているか、メールの送受信が可能か確認して下さい。
Contact Form 7の簡単カスタマイズ
クラス名を知ろう
各フォーム項目のクラス名を知ることでCSSを使用した見た目の変更が可能になります。
また、Contact Form 7はHTMLの編集が可能なので、ご自身で好きな構造とクラス名を設定できます。
| フォーム項目名 | クラス名 |
|---|---|
| テキスト | wpcf7-form-control wpcf7-text |
| テキストエリア | wpcf7-form-control wpcf7-textarea |
| メールアドレス | wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email |
| 電話番号 | wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel |
| 数値 | wpcf7-form-control wpcf7-number wpcf7-validates-as-number |
| 日付 | wpcf7-form-control wpcf7-date wpcf7-validates-as-date |
| ドロップダウンメニュー | wpcf7-form-control wpcf7-select |
| チェックボックス | wpcf7-form-control wpcf7-checkbox |
| ラジオボタン | wpcf7-form-control wpcf7-radio |
| 承諾確認 | wpcf7-form-control wpcf7-acceptance |
| 送信ボタン | wpcf7-form-control wpcf7-submit |
| 隠し | wpcf7-form-control wpcf7-hidden |
下記は例として枠線の色を変えるコードです。
.wpcf7-email{
border: 2px solid #2b55eb;
}記述方法を知ろう
Contact Form 7のエディターにどのように入力するか、まとめています。
下記の入力例をコピペする事で使用可能です。
| フォーム項目名 | 入力例 |
|---|---|
| テキスト | [text your-text] |
| テキストエリア | [textarea your-textarea] |
| メールアドレス | [email your-email] |
| 電話番号 | [tel your-tel] |
| 数値 | [number your-number] |
| 日付 | [date your-date] |
| ドロップダウンメニュー | [select your-select "1" "2" "3"] |
| チェックボックス | [checkbox your-checkbox "1" "2" "3"] |
| ラジオボタン | [radio your-radio "1" "2" "3"] |
| 承諾確認 | [acceptance your-acceptance "同意する"] |
| 送信ボタン | [submit your-submit "送信する"] |
| 隠し | [hidden your-hidden "非表示"] |
「文字数制限」や「プレースホルダー」の設定方法
「文字数制限」や「プレースホルダー」の設定方法と実際の画像を紹介しています。
<label> 必須あり<br>
[text* your-text1] </label>
<label> 必須なし<br>
[text your-text2] </label>
<label> 最小文字数4<br>
[text your-text3 minlength:4] </label>
<label> 最大文字数5<br>
[text your-text4 maxlength:5] </label>
<label> 初期値あり<br>
[text your-text5 "初期値です。"] </label>
<label> プレースホルダー<br>
[text your-text6 placeholder "プレースホルダーです。"] </label>その他のフォーム項目の設定方法
フォーム名：数値
動作：1回に増加、増減する数
使用場面：発注フォームなどで3の倍数でしか、注文できないようにする時に使用
[number your-number step:3]フォーム名：日付
動作：最小・最大の日付
使用場面：3ヶ月先までの予約しか受けない場合などに使用。
[date your-date max:2025-12-01]Contact Form 7が動作しない、エラーが出る
ラジオボタンのHTMLがそのまま出力される
下記のようにラジオボタンのHTMLが直接表示されている時は、「*」を削除して下さい。
[radio* your-radio “1” “2” “3”]
複数のフォームコントロールが単一の label 要素内に置かれています。
「ラジオボタン」や「チェックボックス」が「<label></label>」内に記述されていると、エラーが出ます。
まとめ
WordPressで会員サイトを構築したい場合、まず始めに検討したいのが「Contact Form 7」になります。
カスタマイズ性や簡易性が高いため、理想のフォームが作れるでしょう。
CSSでのカスタマイズはもちろん、フックも多数用意されているので、予約フォームや発注フォームなどの作成も可能です。
プログラミング不要で見積もりフォームが作成できるプラグインAformsについても解説しています。