Contact Form 7 とは、WordPress でお問い合わせフォームを簡単に作成できる無料プラグインです。名前・メールアドレス・お問い合わせ内容といった基本的な入力項目はもちろん、ラジオボタンやチェックボックス、ファイル添付などにも対応しており、企業サイトやブログの問い合わせ窓口として幅広く利用されています。
本記事では、WordPress プラグイン「Contact Form 7」の基本的な使い方について、実際の設定例を交えながら解説します。フォームの作成方法から固定ページへの設置、メール送信の確認まで、お問い合わせフォームを公開するまでの一連の手順を順を追って説明します。この記事を読めば、初心者でもフォームを設置できるようになります。
今回は、以下のようなシンプルなお問い合わせフォームを作成します。この完成形を目標に設定を進めていきます。
１．プラグインのインストール
まずは、「プラグインを追加」から、「Contact Form 7」で検索しダウンロードしましょう。
ダウンロードしたら、プラグインを有効化します。
左側のサイドバーに「お問い合わせ」が追加されました。
[コンタクトフォームを追加]をクリックしてください。
２．フォームを作成する
フォームの作成画面が表示されました。既に、初期値が入力されています。
タイトルを入力してください。任意のタイトルで問題ありません。
初期設定の入力欄が
「氏名」「メールアドレス」「題名」「メッセージ本文」
となっています。今回「題名」は不要なため、
<label> 題名
[text* your-subject] </label>は削除します。また今回は、「電話番号」と「選択メニュー」を追加で作成したいため先に外枠としての
<label> </label>
<label> </label>を追加しました。
※labelタグで囲むことで、項目名と入力欄をセットとして扱えます。
[電話番号]をクリックして、電話番号の入力フォームを作成します。
項目タイプ：必須入力にしたいため[必須入力の項目。]にチェックを入れます。
項目名：「your-tel」
[この入力項目には送信者の電話番号が期待される。]にチェックを入れます。
完了したら右下の[タグを挿入]をクリックします。
フォーム画面に
[tel* your-tel autocomplete:tel]が追加されました。
外枠の<label> </label>で挟みます。
次に、[ドロップダウンメニュー]をクリックして、選択式の入力フォームを作成します。
項目タイプ：必須入力にしたいため[必須入力の項目。]にチェックを入れます。
項目名：「inquiry-type」
選択できる値： （1行ずつ入力します）
選択してください
いぬ
ねこ
うさぎ
[最初のアイテムをラベルとして使用する。]にチェックを入れます。
完了したら右下の[タグを挿入]をクリックします。
フォーム画面に
[select* inquiry-type first_as_label "選択してください" "いぬ" "ねこ" "うさぎ"]が追加されました。
外枠の<label> </label>で挟みます。
次に、必須項目の入力欄について、入力者が必須項目であることを判別できるよう「*」マークを付与します。
<span class="required" >*</span>をそれぞれの項目名の横につけてください。
先ほど追加した「電話番号」と「お問い合わせ内容」は項目名も一緒に入力してください。
※必須項目にしたくない「メッセージ本文」については「*」は付けません。
入力者の入力の助けになるように[]の中に「入力例」を付けていきます。
以下をコピーしてそれぞれ張り付けて下さい。
氏名
placeholder "例）山田太郎"メールアドレス
placeholder "mail@example.com"電話番号
placeholder "000-1234-5678"※placeholder は入力例を薄い文字で表示するための属性で、入力内容の補助として使用されます。
【補足】
プレースホルダーは入力フォームを作成する際に入力設定も可能です。
デフォルト値：例を入力
「このテキストをプレースホルダーとして使用する。」にチェックを付けることで設定ができます。
フォームだけだと味気ないため、フォームの一番上にちょっとした文章を添えます。
以下をコピーして張り付けてください。
<div class="form-lead">
<p>以下のフォームに必要事項をご入力の上ご送信ください。<br>
追って、担当者よりご連絡致します。</p>
</div>
フォームの送信ボタンは後からCSSで調整しやすいように<div>で囲みます。
<div class="submit-center">
[submit "送信"]
</div>
すべての入力が完了したら、一番下の[保存]をクリックします。
タイトルの下に青いバーが表示されました。
このショートコードは次章「固定ページに設置する」ために使用しますので、あらかじめコピーしておきましょう。
３．固定ページに設置する
作成したお問い合わせフォームを固定ページに設置していきます。
左側のサイトバーから「固定ページ」に移動して固定ページを追加します。
ブロックから「ショートコード」を選択し追加します。
タイトルは「お問い合わせフォーム」と入力してください。
追加したショートコードに、先ほどコピーしたフォームのショートコードを張り付けます。
入力ができたら固定ページを公開します。右上の[公開]をクリックします。
そのまま[固定ページを表示]をクリックして表ページを確認しに行きましょう。
以下のような状態になっていればOKです。
デフォルト状態では装飾がほとんどないシンプルなフォームが表示されます。
見た目を整えるため、CSSに記述をしていきます。
/* お問い合わせフォーム */
.page-content .wpcf7{
max-width: 600px;
margin: 0 auto;
}
.form-lead{
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.page-content .wpcf7-form p{
margin-bottom: 20px;
}
.page-content .wpcf7-form p{
margin-bottom: 20px;
}
.wpcf7-form-control{
width: 100%;
padding: 12px 14px;
margin-top: 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
}
.submit-center{
text-align: center;
margin-top: 30px;
}
.submit-center input[type="submit"]{
padding: 12px 40px;
border-radius: 6px;
cursor: pointer;
}
.submit-center input[type="submit"]:hover{
filter: brightness(0.9);
}
.required{
color: #FF0000;
}保存して固定ページを更新します。
これでフォームは完成です。
４．メール送信設定
フォームが送信された際に管理者に通知として届くメールの設定をしていきます。
（入力者に確認メールとして届く自動送信メールは後ほど設定します）
左側のサイトバー「お問い合わせ」をクリックし、コンタクトフォームの編集に戻ります。
[メール]をクリックします。
「フォーム」タブで作成したタグが自動反映された状態で入力されています。
このままだとわかりにくいため、少しだけ変更していきます。
以下の2か所を変更してください。
題名：[_site_title] “問い合わせがありました”
メッセージ本文：
本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。
受信内容
名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容：[inquiry-type]
メッセージ本文：[your-message]
――――――――――――
送信元ページ情報
ページタイトル：[_post_title]
送信日時：[_date] [_time]
次に、入力者に確認メールとして届く自動送信メールを設定したいため、
メール（２）を使用にチェックを入れます。
こちらも初期設定である程度入力されています。
これも使いにくいため、少し変更をしていきます。
今回は3か所修正します。
送信元：[_site_title] noreply@ サイトのドメイン
題名：【自動返信】お問い合わせありがとうございます
メッセージ本文：
[your-name] 様
この度はお問い合わせありがとうございます。
内容を確認のうえ、
担当者よりご連絡いたします。
送信内容
お名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容：[inquiry-type]
メッセージ本文：[your-message]
※なお、このメールはシステムより自動配信されています。
返信は受付できませんので、ご了承ください。
――――――――――
[_site_title]
入力できたら、一番下の[保存]をクリックして作業終了です。
※「安全でないメール設定が十分な防御策なく使われている」という警告が表示される場合があります。動作自体に問題はありませんが、本番環境では SMTP 送信などの対策を推奨します。
５．送信テストを行う
きちんとメールが届くかどうか、お問い合わせフォームの入力をしてみましょう。
問い合わせ側と、管理者側のメール内容に問題がないかも確認します。
６．メールが届かないときの原因
迷惑メールフォルダに振り分けられてしまっている可能性があります。迷惑メールボックスを確認しましょう。
送信元がサイトのドメインと同じでないとうまく送信されない可能性があります。
例：http://example.com なら、メールアドレスも xxx@ example.com にすること。（実際に使用されていなくてもOKです）
サーバー側で PHP の mail() 関数が制限されている場合も送信できないことがあります。
７．まとめ
Contact Form 7 は、WordPress でお問い合わせフォームを手軽に設置できる定番プラグインです。ショートコードを固定ページに設置するだけで公開できるため、専門知識がなくてもフォームを導入できます。
一方で、メール送信設定や自動返信メールの設定を正しく行わないと「メールが届かない」といったトラブルが発生しやすい点には注意が必要です。特に送信元メールアドレスのドメイン設定や迷惑メール対策は、公開前に必ず確認しておきましょう。
基本的な設置手順とメール設定を押さえておけば、企業サイトやブログのお問い合わせ窓口として十分に運用できます。まずはシンプルなフォームから作成し、必要に応じて項目追加やデザイン調整を行っていくのがおすすめです。