![](https://more-field.co.jp/web/wp-content/uploads/2019/10/balloon_002-150x150.jpg)
この記事はWEBサイトに簡単にお問い合わせフォームを作成することができるWordPressプラグイン「Contact Form 7」の使い方とカスタマイズ方法について解説しています。
Contact Form 7は、デフォルトでは下記の4つの項目しか入力項目が表示されません。
- 名前
- メールアドレス
- 題名
- メッセージ本文
しかし、Contact Form 7の編集画面から、htmlやcssの知識がなくても電話番号や住所、メールアドレス、お問い合わせ項目など複数の入力フォームを作成することができます。
お問い合わせをしてもらえるようにするためにも、このフォームテンプレートを活用して、わかりやすいお問い合わせフォームを作成することが大切です。
Contact Form 7の基本的な使い方はこちらの記事で詳しく解説しています。
→お問い合わせフォームを簡単に作成できるContact Form 7の使い方
では、早速Contact Form 7のカスタマイズ方法について見ていきましょう!
Contact Form 7の基本的なカスタマイズ方法
まずはContact Form 7の編集画面を確認しましょう。
こちらがContact Form 7の編集画面です。
青枠の中はデフォルトで入力されているフォームで、赤枠が追加できるフォームです。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-1-1024x948.jpg)
各フォームの詳細については次のセクションで解説するので、ここでは以下の3点について解説します。
- フォームの追加の仕方
- 複数のフォームに共通する設定
- フォームの入力内容を受信する設定
では“テキストフォーム”を実際に追加してみましょう。
フォームの追加の仕方
テキストフォームを入力する箇所にカーソルを合わせます
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-2-1024x920.jpg)
「テキスト」をクリックします。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-3-1024x920.jpg)
「タグを挿入」をクリックします
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-4-1024x882.jpg)
テキストフォームが追加されました
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-5-1024x913.jpg)
出力画面を確認してみましょう。
(使用しているThemeによってデザインは異なります。)
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-8-1024x962.jpg)
ただし、このままではラベルがついていないため、何を入力するフォームなのかがわかりません。
そこで、フォームを「<label> </label>」で囲い、フォームの前に表示させたい“ラベル”を入力します。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-9-1024x904.jpg)
もう一度、出力画面を確認してみましょう!
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-10-1024x974.jpg)
これでラベルが表示され、何を入力するのかが分かるようになりました。
複数のフォームに共通する設定
次は各フォームに共通する設定項目について解説します。
こちらは先ほど“テキストフォーム”を追加する際に表示された画面です。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-11-1024x885.jpg)
ここで様々な設定をすることができます。
項目タイプ
「必須項目」にチェックを入れると 空欄の場合にフォームが送信されなくなります。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-12-1024x884.jpg)
空欄のまま送信ボタンをクリックするとこのような警告が表示されます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-13-1024x681.jpg)
名前
他のフォームと重複しない名前を入力してください。
自動的に設定される名前のままでも問題なければ変更する必要はありません。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-14-1024x882.jpg)
デフォルト値
フォームにデフォルトで入力される値を設定することができます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-15-1024x883.jpg)
また「このテキストを項目のプレースホルダーとして使用する」にチェックを入れるとプレースホルダーとして使用されます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-16-1024x880.jpg)
プレースホルダーは実際の値でありません。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-17-1024x368.jpg)
「例) サンプルテキスト 」など入力してほしい内容の例や、「ここにテキストを入力してください」といった説明文を入れる場合に利用します。
Akismet
Akismetというスパム対策に利用するサービスがあり、Contact Form 7でAkismetを利用する場合はチェックをいれてください。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-18-1024x883.jpg)
ID属性&クラス属性
ここではフォームにIDやクラスを設定することができます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-19-1024x884.jpg)
idやclassを入力しておくことと、CSSで装飾する場合などに便利です!
フォームの入力内容を受信する設定
さて、ここまででフォームの追加、基本的なフォームの設定まで行いましたが、このままでは追加したフォームの入力内容を受信することができません。
「メール」をクリックし、「メッセージ本文」の中に“フォーム名”を入力します。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-20-1024x885.jpg)
フォーム名はここで設定した名前です。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-21-1024x881.jpg)
フォームから確認できます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-22-1024x850.jpg)
Contact Form 7の基本的なカスタマイズの解説は以上です。
Contact Form 7の各フォームの解説
それでは、ここからは以下の7つのフォームについて解説します。
- 数値
- 日付
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承認確認
- ファイル
- テキスト・メールアドレス・URL・電話番号・テキストエリアは前述の基本設定の通りです。
では一つずつ見ていきましょう!
数値
スピンボックスとスライダーの2種類から選択できます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-23-1024x699.jpg)
スライダーは下限と上限を設定しなければ数値をとることができません。また、数値を表示させるにはJavascriptを利用する必要があります。
下限と上限の数値はここに入力します。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-24-1024x891.jpg)
日付
年月日を入力することができます。
「▼」をクリックするとカレンダーが表示され、そこから年月日を指定することもできます。
日付も下限と上限を設定できます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-25-1024x747.jpg)
ドロップダウンメニュー
複数のメニューの中から選択することができます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-26-1024x816.jpg)
メニューは1行に1つずつ入力します。
その下の「複数選択を可能にする」にチェックを入れると、「Ctrlキー」を押しながらメニューをクリックすることで複数のメニューを選択できるようになります。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-27-1024x882.jpg)
チェックボックス
複数の項目をチェックボックスを利用して選択できます。
通常、チェックボックスは複数選択できるのですが、設定メニューから「チェックボックスを排他化」にチェックを入れると、1つしか選択できないようになります。
一つだけ選択して欲しいような場合には、「チェックボックスを排他化」にチェックを入れるといいでしょう。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-28-1024x840.jpg)
「個々の要素をlabelで囲む」というのはファイルのコードを見なければわからないのですが、チェックボックスと項目を”label”タグで囲うようになります。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-29-1024x889.jpg)
これはコーディングや装飾をしやすくするために必要があればチェックをいれてください。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-30-1024x625.jpg)
ラジオボタン
チェックボックスと設定の仕方は基本的に同じです。
ただし、ラジオボタンは1つしか選択することができません。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-31-1024x372.jpg)
承認確認
利用規約やプライバシーポリシーの承認確認用のフォームです。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-32-1024x553.jpg)
「同意条件」にテキストを入力してください。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-33-1024x887.jpg)
ファイル
「ファイルを選択」をクリックすると、ファイルを添付することができるようになります。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-34-1024x529.jpg)
フォーム設定から、カンマ区切りで使用可能なファイル形式を設定できます。
![](https://more-field.co.jp/web/wp-content/uploads/2019/12/contact-form-7-customize-35-1024x878.jpg)
まとめ
![](https://more-field.co.jp/web/wp-content/uploads/2019/10/balloon_002-150x150.jpg)
今回はWEBサイトに簡単にお問い合わせフォームを作成できるWordPressプラグイン「Contact Form 7」のカスタマイズの方法について解説しました。
Contact Form 7は、デフォルトの名前・メールアドレス・題名・メッセージ本文以外にも、自由に入力項目を設定することができます。
分かりやすいお問い合わせフォームを作成するよう心がけてください!
Contact Form 7の基本的な使い方はこちらの記事で詳しく解説しています。
→お問い合わせフォームを簡単に作成できるContact Form 7の使い方
知識ゼロから学べるWordPress入門
WordPress初学者向けに
解説記事を無料公開しています!
「WordPress解説(入門編)」