悩んでいる人 Contact Form 7で「お問い合わせページ」は設置できたけど、デザインとか使いやすさとか、もっと良くしたいな。カスタマイズ方法が知りたい！
こんなお悩みを解決します。
✔本記事の信頼性
プロフィール・ueha-su（@sedorisuta)
ブログ・インスタ・Twitterなど各種媒体を展開中。
自分のブログ内に「お問い合わフォーム」を作ってない方は、【WordPressプラグイン】Contact Form 7の設定方法と使い方を先に読んでくださいね。
お問い合わせフォームを作成したいですか？ 本記事ではお問い合わせフォームの作成方法をお伝えしています。ワードプレスでのお問い合わせフォーム作成にお悩みの場合は本記事をご覧ください。
本記事では、Contact Form 7（コンタクトフォーム セブン）のカスタマイズ方法を解説します。
作業を終えると、以下のお問い合わせページが完成します。
ウエハース 他サイトではスタイリッシュなお問い合わせフォームの作り方を解説しているけど、CSSを編集することになるから大変なんだよね。
「CSSってなに？」という方は、本記事のやり方で作業を行うことを推奨します。
本記事ではCSS不必要ですので、安心してくださいね。
目次【読みたいところだけ読めます】
【コピペでOK】CSS編集なし！Contact Form 7のカスタマイズ方法
初心者の方でも簡単にカスタマイズ出来るように「コピペ」を用意してあります。
自分のサイトに合わせて内容を変えたいという方は、記事の後半で詳しく手順解説していますので参考にしてください。
コピペでカスタマイズ① コンタクトフォームの準備
管理画面の左メニュー『お問い合わせ』⇒『コンタクトフォーム』をクリックします。
もともとある「コンタクトフォーム1」(タイトル変更後:お問い合わせフォーム）を使って、カスタマイズ編集してOKです。
『新規追加』をクリックすると、いくつでもデフォルトのフォームが作れます。
『新規追加』した場合、タイトルを変更し、『保存』をクリックしましょう。
便宜上、「お問い合わせフォーム」というタイトルにしています。
このタイトルはブログに反映されるものではなく、自分の管理用なので、好きなタイトルでOKです。
コピペでカスタマイズ② 『フォーム』タブの編集
『フォーム』タブをクリックします。
デフォルトで入力されているコードをすべて消してください。
以下、青枠内のコードをコピーしてください。
<label> 氏名【必須】
[text* your-name placeholder “例)山田太郎”] </label>
<label> 電話番号【必須】
[text* your-telephone placeholder “例)090-0000-0000”] </label>
<label> メールアドレス【必須】
[email* your-email placeholder “例)abcde@gmail.com”] </label>
ご年齢【必須】
[checkbox* your-age use_label_element exclusive “10代以下” “20代” “30代” “40代” “50代以上”]
生年月日
[date your-birthday min:1921-01-01 max:2070-12-31]
このサイトをどこで知りましたか？
[radio radio-question use_label_element default:1 “検索エンジン” “SNS” “その他”]
<label> あなたのブログ歴(/年) ※ 例:未経験の方は0、1年未満の方は1を選択
[number number-question min:0 max:100 placeholder “年”] </label>
<label> お問い合わせ内容
[select menu-question include_blank “記事問い合わせ” “ライター依頼” “ブログ運営相談” “その他”] </label>
添付ファイル
[file file-upload limit:3145728 filetypes:png|JPEF|PDF]
<label> 題名【必須】
[text* your-subject placeholder “例)○○についての問い合わせ”] </label>
<label> メッセージ本文 【必須】
[textarea* your-message placeholder “1文字以上ご記入ください”] </label>
[acceptance acceptance-supamu] スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。 [/acceptance]
[submit “送信する”]
『フォーム』タブの編集画面に貼り付けてください。
『保存』をクリックしましょう。
ご自身のブログを開いて、「お問い合わせページ」を見てみましょう。
以下の画像と同じお問い合わせフォームが反映されていればOKです。
コピペでカスタマイズ③ 『メール』タブの設定
ブログの読者が問い合わせフォームを送信すると、画像のようにご自身宛にお知らせメールが届きます。
ウエハース カスタマイズで追加したフォームは自分で設定しないと、お知らせメールに反映されないよ！
『メール』タブをクリックしてください。
「メッセージ本文の一部」と「ファイル添付」を編集していきます。
補足
送信先・送信元・題名の設定は、「【WordPressプラグイン】Contact Form 7の設定方法と使い方」で解説しています。
お問い合わせフォームを作成したいですか？ 本記事ではお問い合わせフォームの作成方法をお伝えしています。ワードプレスでのお問い合わせフォーム作成にお悩みの場合は本記事をご覧ください。
メッセージ本文の編集【例：電話番号の反映】
挿入したいところにカーソルを合わせます。
見本では、「電話番号：」と文字を足しています。
画面上にあるフォーム名をコピーしてください。
「電話番号」の場合、[your-telephone]をコピーします。
メッセージ本文の「電話番号：」のあとに[your-telephone]を貼り付けてください。
他のフォーム名も同じ要領でメッセージ本文中に挿入してください。
▼コピペ用▼
電話番号：[your-telephone]
年齢：[your-age]
生年月日：[your-birthday]
このサイトをどこで知りましたか？：[radio-question]
あなたのブログ歴(/年)：[number-question]
お問い合わせ内容：[menu-question]
『保存』をクリックして作業完了です。
ファイル添付の編集
やり方は先ほどと同じです。
『[file-upload]』をコピーしてください。
『ファイル添付』に貼り付けます。
『保存』をクリックして作業完了です。
お知らせメールにカスタマイズ内容が反映されているか確認しましょう。
一度、ご自身でお問い合わせフォームを送信してください。
カスタマイズの手順④ 自動返信メールの設定
問い合わせをくれた方に対して、自動返信メールを送ることができます。
『メール』タブをクリック。
下の『メール (2)を使用』にチェックを入れる。
以下の通りに設定しましょう。
| 送信先 | 問い合わせしてきた方のメールアドレスを反映させます。 |
| 送信元 | 「ウエハースの副業部」のように、あなたのブログ名を入力しておきましょう。 |
| 追加ヘッダー | 相手がもし自動返信メールに対して返信したい場合、私たちの方で送り先を指定することができます。 ご自身のメールアドレスを入れておきましょう。 |
| 題名 | 「お問い合わせありがとうございました」などのように自動返信メールであることが分かる件名を設定します。 |
| メッセージ本文 | 入力した内容がそのまま自動返信メールとして送信されます。 |
メッセージ本文＜例文コピペ＞▼
※このメールはシステムからの自動返信です
[your-name]様
この度はお問い合わせありがとうございます。
折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。
何卒こ了承くださいませ。
━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━
■ お名前 [your-name]
■ メールアドレス [your-email]
■電話番号 [your-telephone]
■お問い合わせ内容：[menu-question]
■ 題名：[your-subject]
[your-message]
———————-
このメールは ウエハースの副業部(https://ueha-su.com) のお問い合わせフォームから送信されました
『保存』をクリックしたら、作業は完了です。
実際にお問い合わせフォームを送信して、自動返信メールがちゃんと届くか確認してみてくださいね！
【詳細解説】プラグインContact Form 7のカスタマイズ方法
自分のサイトに合わせて編集したい方向けに、カスタマイズの詳しい手順を解説していきます。
管理画面の左メニュー『お問い合わせ』⇒『コンタクトフォーム』をクリックします。
ご自身が編集したいフォームのタイトルを選択してください。
『フォーム』タブをクリックしましょう。
青枠の中はデフォルトで入力されているフォームです。
赤枠が追加できるフォームなので、カスタマイズ編集の際に使っていきます。
赤枠の各フォームを解説する前に、基本操作を2つ覚えましょう。
- フォームの追加＋ラベル<label> </label>の追加
- フォームタグ生成の設定
フォームの追加＋ラベルの追加【例:テキスト】
試しに「テキストフォーム」を追加していきます。
編集画面で、テキストフォームを追加したいところにカーソルを合わせます。
フォームの『テキスト』をクリックします。
『フォームタグの生成』画面が表示されますが、細かい設定は後述します。
『タグを挿入』をクリックしましょう。
テキストフォームが編集画面に追加されたら、『保存』をクリックしましょう。
実際に自分のブログから「お問い合わせページ」を見てみましょう。
以下の画像のように反映されているはずです。
入力欄は追加されていますが、ラベルがないので、何を入力する枠なのかが分かりません。
なので、「ラベル」を追加していきます。
ラベルの追加は『<label> </label>』を使います。
ウエハース 編集画面のデフォルトをコピペすると楽ですよ！
[text-XXX]のXXXの部分は、テキストフォームを追加したときに勝手に番号が割り当てられているので、ご自身のものに合わせてください。
編集できたら、『保存』をクリック。
ご自身のブログの「お問い合わせページ」を再度確認しましょう。
これでラベルも表示され、何を入力するのかが分かるようになりました。
フォームタグ生成の設定
各フォームを追加したときの『フォームタグの生成』の設定を解説します。
項目タイプ｜記入必須か任意かを設定する
必須項目にチェックを入れると、空欄のまま「送信ボタン」を押してもフォームが送信されなくなります。
画像のように「必須項目に入力してください。」という警告が表示されます。
必須項目にチェックを入れない場合は、空欄のままでもフォームが送信されます。
名前｜自動設定のままでもOK
ご自身でフォーム名を決めることができます。
他のフォームと重複しない名前にしましょう。
自動的に設定される名前（数字）のままでも問題なければ変更する必要はありません。
ウエハース ここで設定するフォーム名は『メール』タブと連動しているので注意してね！
特にデフォルトで入っている4つのフォーム名を変える場合は、『メール』タブの設定変更も忘れずに行いましょう。
デフォルト値｜プレースホルダーの使用
デフォルト値では、プレースホルダーをつくることができます。
『このテキストを項目のプレースホルダーとして使用する』にチェックを入れると有効になります。
プレースホルダーとは、入力欄に薄く文字が表示される状態のことです。
枠線内に1文字でも入力すると、自動的に文字が消えます。
仮に、プレースホルダーにチェックを入れなかった場合は、枠線内のデフォルト文字が消えません。
入力欄に例文や説明文を入れる場合には、プレースホルダーを使用することが多いです。
Akismet｜スパム対策で使用
『送信者の名前の入力を要求する項目』にチェックを入れるとスパムメールを減らすことができます。
ただし、プラグイン「Akismet」の設定を行う必要があります。（設定は任意です）
チェックをいれなくても、何の問題も起こりませんので安心してくださいね。
ID 属性とクラス属性｜CSS編集で使用
基本的に何も記入しなくてOKです。
CSSを装飾することが多い方は、設定しておくと便利です。
これで基本的な各種設定は以上です。
追加できる各フォームの解説【Contact Form 7のカスタマイズ方法】
追加フォーム（赤枠）について、それぞれ挿入手順を解説します。
テキスト
「氏名」「題名」はデフォルトにありますが、プレースホルダーを使用するために編集しています。
フォーム名のあとに『placeholder “例)山田太郎”』『placeholder “例)○○についての問い合わせ”』と入力すると、プレースホルダーが有効になります。
ラベルを表示させるときは『<label> </label>』で囲ってくださいね。
テキストフォームは、名前や住所など短い文章を入力するときに使うことが多いです。
URL/電話番号
URL専用・電話番号専用の入力欄をつくることができます。
誤った文字列が入力されると、自動的に入力のやり直しを求めるようになっているので便利です。
URL/電話番号フォームの場合、『<label> </label>』で囲わなくてもラベルが表示されます。
ただし、URL/電話番号フォームは、入力欄のデザインが他と異なる場合があります。
デザインが違う理由は、フォームごとのデザインがCSSで設定されているからです。
CSSを変更するのは大変なので、デザインの不統一が気になる方は「テキストフォーム」で作ると良いでしょう。
テキストフォームの場合、誤った文字列が入力されても自動的に入力のやり直しを求める仕様にはなっていませんので、注意してください。
ウエハース 見本の場合、「電話番号」は見栄えを優先してテキストフォームで作っているよ！
メールアドレス
デフォルトにありますが、プレースホルダーを入れたい方は編集しましょう。
『placeholder “例)abcde@gmail.com”』を入れたら、プレースホルダーが適用されます。
『<label> </label>』で囲って、ラベル表示も忘れずに！
数値
スピンボックスとスライダーの2種類から選択できます。
『フォームタグの生成』の設定画面で数値の下限上限を入力しましょう。
「スライダー」の数値を表示させるには、Javascriptを利用しなければなりません。
見本では「スピンボックス」を使用しています。
『<label> </label>』で囲って、ラベル表示させてください。
日付
年月日の入力欄がつくれます。
日付のラベルは、『<label> </label>』で囲わなくても表示されます。
『フォームタグの生成』の設定画面で下限と上限を設定しましょう。
テキストエリア
テキストエリアフォームは、デフォルト「メッセージ本文」で使われています。
見本では、『placeholder “1文字以上ご記入ください”』を入力して編集しています。
『<label> </label>』で囲って、ラベル表示させてください。
テキストエリアフォームは長文入力に適しています。
ドロップダウンメニュー
見本では、「お問い合わせ内容」という入力欄で使用しています。
『フォームタグの生成』の設定画面は以下のとおりです。
選択肢は1行に1こずつ入力してくださいね。
「空の項目を先頭に挿入する」にもチェックを入れています。
タグを挿入したあとは、『<label> </label>』で囲ってラベルも表示させましょう。
チェックボックス
見本では、「年齢」で使用しています。
『フォームタグの生成』の設定は以下のとおりです。
「チェックボックスを排他化」にチェックを入れて、１つしか選択できないようにしています。
チェックを入れない場合は、複数選択できるようになります。
最初から「個々の項目を label 要素で囲む」にチェックが入っていますが、そのままでOKです。
ラベル表示させるときに、『<label> </label>』は必要ありません。
ラジオボタン
見本では、「このサイトをどこで知りましたか？」で使用しています。
ラジオボタンは複数選択ができません。
複数選択を可能にしたい場合は、チェックボックスを使用しましょう。
『フォームタグの生成』の設定は以下のとおりです。
ラベル表示させるときに、『<label> </label>』は必要ありません。
承認確認
利用規約や個人情報の取り扱い規約などの「承諾確認ボタン」を表示することができます。
見本では、「スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。」で使用しています。
『フォームタグの生成』の設定は以下のとおりです。
「チェックボックスを任意選択にする」のチェックを外すと、”チェック必須”になります。
チェックをしないと、送信ボタンは押せません。
承認確認フォームは、ラベルの表示は必要ありません。
ファイル
ファイル添付ができるようになります。
『フォームタグの生成』の設定は以下のとおりです。
| ファイルサイズの上限（バイト） | 空白の場合は、1MBが上限です。添付可能なファイルの上限サイズをご自身で決めてください。 例）
|
| 受け入れ可能なファイル形式 | 添付可能なファイルの形式を指定します。カンマで区切ってください。 見本は「PNG,JPEG,PDF」にしています。 |
ラベル表示させるときに、『<label> </label>』は必要ありません。
手順解説は以上です。
最後に『メール』タブの設定も忘れずに行ってくださいね。
Contact form7のカスタマイズ方法｜まとめ
Contact form7は追加フォームの種類が豊富です。
CSSなどの知識がなくてもカスタマイズ出来るので、ぜひ取り組んでみましょう！
