【WordPress】Contact Form 7の基本的な使い方を紹介!

【WordPress】Contact Form 7の基本的な使い方を紹介!
目次

Contact Form 7とは?

Contact Form 7とは、WordPressで使用できるお問い合わせプラグインのことです。

2025年09月現在で、既に1000万以上インストールされており

コーディングを知らなくても、感覚的な操作でお問い合わせフォームを簡単に作ることができます。

WordPressを利用する人にとっては、なくてはならないプラグインと言えますね。

Contact Form 7の基本的な使い方

ここからは、Contact Form 7の基本的な使い方について解説していきます。

①プラグインを検索しインストール、有効化する

まずは、プラグインのインストールと有効化をしていきましょう。

「ブラグインの追加」から検索フォームにて「Contact Form 7」と打ち込み、インストールをしましょう。

インストールができたら、有効化をすれば管理画面上に、メールのマークが付いている「お問い合わせ」という項目が表示されます。

実際のお問い合わせフォームを作っていったり、設定をするときはこの「お問い合わせ」から行なっていくようにしましょう。

②フォームを作る

「お問い合わせフォームを追加」を選択すると、フォームの追加ができます。

フォームの名前を指定してから、

どんなお問い合わせフォームでも、最低限必要になる項目としては

①名前(氏名)

②メールアドレス

③題名(件名、タイトル)

④お問い合わせ内容

⑤送信ボタン

かと思いますので、今回はこの3つの項目を実装していきましょう。

ただ、実はこの5つの項目はお問い合わせフォームを新規で作成する際でも

既に設定されているので、それでいいならフォーム名を付ければ完成してしまいます。

フォームの構成としては、本来ならformタグとinputタグで囲まれている項目が

labelタグの中に囲まれています。

(例えば、氏名の欄なら、「氏名」というテキストは本来formタグに入っており、氏名を記入する欄もinputタグで形成する)

ということで、

記載項目:そのまま日本語で記述

記入するフォーム:[]の中に記述をしていく

という感じで構成されています。

フォームの方は、ショートコードのような形になっていますね。

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

・氏名、題名などのテキスト情報の欄は[text]

・お問い合わせ本文の欄は[textarea]

・メールアドレスの欄は[email]

・送信ボタンは[submit]

という感じで構成されています。

また、必須項目にはアスタリスク「*」を付けます。

氏名やメールアドレスの項目も、[text*]、[email*]という感じでアスタリスクが入っていますね。

他にも追加したい項目があったら、フォームの上に項目があるので

クリックしてみましょう。

例えば、電話番号の項目を追加したいなら「電話番号」を押します。

項目名を変更したい場合やクラス属性を指定したい場合は、値を変更したり入力していきますが

特に項目名を変更しなくてもいいかなと思います。

(この後話しますが、クラス名もほとんどの場合は追加する必要はないと思います。)

デフォルト値を設定する項目もあり、プレイスホルダーとして設定もできますが

プレイスホルダーの意味と実装の仕方はこの後に解説します。

設定した項目で問題ない場合は、「タグを挿入」をクリックすると

左に出ているタグが挿入されます。

お問い合わせフォームができたら、上の方にショートコードが記載されているので、固定ページでお問い合わせ用のページを作り、そのショートコードを貼り付けましょう。

ショートコードを貼り付けるには、ブロックエディターの「+」を押して「ショートコード」と検索し、出てきた項目を選択しましょう。

下の画像のような状態で、固定ページを公開すれば

Contact Form 7のフォームが実装されているはずです。

メールの設定

次に、メールの設定を紹介していきます。

デフォルトの状態では、お問い合わせフォームがあった際に

管理者のメールアドレス宛に送られてくる内容しか設定されていません。

もし、お問い合わせをくれたお客様に対して「お問い合わせを受け付けました。」というような自動返信をしたい場合は

もう1つ項目を追加する必要があります。

管理者のメールアドレス宛に送られてくる内容の設定

管理者のメールアドレス宛に送られてくる内容は、先ほど話した通り

最初のメール設定でいじることができます。

このブログのお問い合わせ通知メールは、上のようになっています。

ですが、デフォルトの設定でもそこまで問題はありません(画像のフォームでは、「題名」と「メッセージ本文」の内容を変更しています。)。

お問い合わせをくれたお客様に対して自動返信をしたい場合

お問い合わせをくれたお客様に対して、「お問い合わせを受け付けました。」というような自動返信をしたい場合は

メール項目を1つ追加する必要があります。

サイト管理者にメールを送る設定の時と同じで、内容はあまり変えなくても大丈夫ですが

メッセージ本文は少し堅苦しい感じなので、下のように直しておいた方がいいでしょう(題名に関しても直してあります)。

ただし、お客様に対して自動返信をしたい場合は、Google reCaptureを導入していないとエラーが出ることがあるので

設定しておきましょう。

Contact Form 7の応用方法(カスタマイズ)

ここまでで、Contact Form 7を利用した最低限のフォームを公開できたと思います。

ここからは、フォームをカスタマイズしたい人向けの応用テクニックをご紹介します。

プレイスホルダーを付ける

Contact Form 7ではプレイスホルダーを付けることもできます。

プレイスホルダーとは、通常はinputタグの中にある例文を表示するための機能です。

1度は下のような表記を見たことがあるのではないでしょうか?

「山田太郎」という部分が、プレイスホルダーです。

氏名だけでなく、メールアドレスやお問い合わせ内容などにもプレイスホルダーを入れることができます。

Contact Form 7で実装したい場合は、下のように

[placeholder “入力した内容”]

という感じで入れていきます。

<label> 氏名*
    [text* your-name placeholder "例:山田太郎"]</label>

<label> 氏名(カナ)*
    [text* your-kana placeholder "例:ヤマダタロウ"]</label>

<label> メールアドレス*
    [email* your-email placeholder "例:abc@gmail.com"]</label>

クラス名を付ける

Contact Form 7で作るお問い合わせフォームには、クラス名を付けることもできます。

付け方は

[class: name]

のように、付けたいclass名を、class: の後ろに記載します。

<label> 氏名*
    [text* your-name class:name01]</label>

<label> 氏名(カナ)*
    [text* your-kana class:name02]</label>

<label> メールアドレス*
    [email* your-email class:email]</label>

しかし、WordPressで作成した要素には、WordPress側の設定で自動的にclass名が付けられるようになっているので

使用する頻度はそんなに多くないと思います。

長さを調整する

Contact Form 7では、フォームの長さも簡単に実装することができます。

方法としては、タグに

[minlength:x maxlength:y]

という感じで、上限の下限の長さを指定するだけ。

例えば、メールアドレスの入力フォームの長さの上限を500、下限を200にしたい時は

以下のように設定できます。

<label> メールアドレス
    [email email-587 minlength:200 maxlength:500]</label>

また、フォームタグジェネレーターでも簡単に変更することができます。

Contact Form 7でお問い合わせフォームを設置したらやっておきたいこと

Contact Form 7でお問い合わせフォームを設置したらやっておきたいこと、というよりやっておかなければいけないことがあります。

それは、「スパムメールや迷惑メールの対策」です。

こういったメールの対策をしておかないと、普通のお客さんから問い合わせが埋まってしまって気付けなくなってしまったり

うっかりスパムメール内に記載してあるリンクを踏んでしまって、ウイルスに感染をしてしまうなどのリスクがあります。

別の記事で、スパムメールの対策法を解説しています。

Google reCAPTCHAを導入する方法と、コーディングを利用してfunctions.phpに記載する方法を解説しています。

特に、Google reCAPTCHAの設定をしていない人がいたら今すぐに設定することをお勧めします。

ご自身でも設定はできますが、実装方法が難しいと感じたら、Web制作会社やフリーランスにお願いして実装してもらいましょう(僕にやってもらわなくてもいいですが、僕も実装できます)。

あわせて読みたい
Contact Form 7に英語の迷惑メールが来る人必見!スパムメールの対処法を教えます! どうも、わいです。 WordPressのセキュリティ対策をおろそかにしていると、たまに外国人から大量に迷惑・スパムメールが来ることがあります。 中には、数分に1回のペー...

最後に

というわけで、今回はお問い合わせフォームの定番プラグインであるContact Form 7の基本的な使い方を紹介してきましたが、いかがでしたでしょうか?

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

わい

記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ!

\ 最新情報をチェック /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

コメント

コメントする

CAPTCHA


目次