【初級編】WordPressでお問い合わせフォームをつくる！Contact Form7の使い方を画像付きで解説

WordPressでお問い合わせフォームの作り方がわからず悩んでいませんか？

WordPressでお問い合わせフォームを作る手段はいくつかありますが、もっともおすすめなのは「Contact Form7」プラグインを使うパターンです。

今回は、「Contact Form7」プラグインの使い方の初級編として、簡易的な設定方法について解説します。

「Contact Form7」プラグインは、簡単に使えて便利なプラグインですが、デザイン設定など奥が深いので、まずは簡単なお問い合わせフォームがつくれるレベルまで、この記事で学びましょう。

それでは、本編をどうぞ！

ブログにお問い合わせフォームは必要か？

お問い合わせフォームをつくる前に、「そもそもお問い合わせフォームは必要か」という点について説明します。

結論からいうと、必須です。

お問い合わせフォームがないだけで、かなりの機会損失になる可能性がありますよ。

読者の利便性が上がる

ブログの読者は悩みが深いほど、運営者に自分の悩みを相談したくなります。

しかし、お問い合わせフォームが設置されていないと、連絡手段がわからずに読者に不満を与える可能性があります。

読者の悩みを解決することが、ブログの価値となるため、気軽に相談できる問い合わせフォームの設置は必須といえます。

企業から広告掲載のオファーが来る

ブログのアクセスが増えてくると、お問い合わせフォームからクローズドなアフィリエイト案件の紹介が来たり、広告の掲載・取材依頼など企業からのオファーが舞い込むことがあります。

せっかく興味を持ってくれたASPや企業を、みすみす見逃すのは惜しいので、使い勝手のいいお問い合わせフォームを設置しておくべきでしょう。

Google Adsenceの審査に通りやすくなる

お問い合わせフォームの設置は、Google AdSence（グーグルアドセンス）の審査にも大きく関わります。

近年はアドセンスの審査が厳しくなっており、お問い合わせフォームが設置されていないブログは高確率で審査に落ちます。

問い合わせフォームを常時設置したくない場合でも、アドセンスの審査を通すまでは設置しておきましょう。

お問い合わせフォームは「Contact Form7」プラグインがおすすめ

WordPressでお問い合わせフォームを作る場合、「Contact Form7（コンタクトフォーム７）」を使うのがおすすめです。

「Contact Form 7」は、初心者でも簡単にお問合せフォームが作れるプラグインで、簡易的なフォームであれば10分程度で作成できます。

「Contact Form 7」をインストールすると、次の簡易的なフォームは最初から用意されています。

また、CSSをいじることで、デザインも比較的自由に変えられるため、こだわったお問い合わせフォームも作ることができます。

インターネットビジネスラボの問い合わせフォームも「 Contact Form 7 」で作成しています。

「 Contact Form 7 」のインストール

公式プラグインなので、WordPressの管理画面からインストールできます。

左側メニューの　プラグイン ＞ 新規追加　をクリックし、「キーワード」欄に「 Contact Form 7 」をコピー＆ペーストしてください。検索結果が表示されたら「今すぐインストール」をクリックします。

インストールできたら、「有効化」のボタンに変わりますので、クリックして有効化してください。

「 Contact Form 7 」の初期設定など

手順1. ショートコードを確認、コピーする

WordPressの管理画面の左側メニューに「 お問い合わせ 」メニューが表示されるので、クリックします。

すると、以下のような一覧ページが表示されますので、「コンタクトフォーム1」をクリックします。

「コンタクトフォーム1」の編集画面が開きますので、上部の「ショートコード」と呼ばれる文字の列を選択し、コピーしておいてください。

手順2. 問い合わせページを作成する

次に、お問い合わせページを作成しましょう。

デザインや内容は後で作っていきますので、とりあえず表示できればOKです。

手順3. 問い合わせページを見てみる

ページの上部に「ページを表示」というリンクが表示されます。これから編集ページと公開ページをを見比べながら編集していくので、今、見ている画面とは別に公開ページを開きましょう。

右クリックして表示されるメニューの中に「新しいタブで表示する」のようなメニューがあればクリックしてください。

こんな感じでお問い合わせフォームが作成されました。非常にシンプル！

 Contact Form 7をカスタマイズする

初期設定のお問い合わせフォームは、「お名前（必須）」「メールアドレス（必須）」「題名」「メッセージ本文」の構成となっており、そのままだと使い勝手が悪いです。

たとえば、電話番号を取得したり、チェックボックスやラジオボタンで問い合わせ内容を選択できるようにするなど、目的に合わせて使い勝手の良い問い合わせフォームにカスタマイズするといいでしょう。

追加できるフォーム一覧

Contact Form7に標準搭載されているのは次の13種のフォームで、これらを使ってお問い合わせフォームを作っていきます。

フォームを追加する方法

Contact Form7のカスタマイズ方法はシンプルです。

フォームに追加したい項目を、次の通りフォームタブから選んでクリックします。

すると、次のような設定画面が立ちあげるので、項目の編集をしていきます。

フォームを削除する方法

次の画像の赤枠内が、現在設定されているフォームです。

この例だと、大まかに5つの項目に分類されていることがわかるでしょう。

フォームの中でいらない項目がある場合は、該当する項目の頭から最後まで消すだけで削除できます。

例えば「氏名」の項目が消したい場合、

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

を全て削除すれば項目を消すことができます。

フォームタグの見方

フォームの中で [ ] に囲われているエリアが、お問い合わせフォームの機能を決めるキモとなるフォームタグのエリアです。

先ほど紹介した

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

でいえば、黄色マーカーを引いた部分です。

フォームタグは、半角スペースで区切った複数の要素で構成されています。

先ほどの例、[text* your-name]では「text*」「your-name」が2つの要素です。

まずは、これをベースに解説します。

タイプエリア

[text* your-name]の「text」はタイプエリアです。

「text」はテキスト入力エリア、「email」はメールアドレス入力エリアと、タイプエリアに入力される項目によって、フォームタイプが分類されます。

ポイントとして、タイプエリアに「*（アスタリスク）」がついている場合は、入力や選択が必須の項目となります。

必須の項目を空欄のまま完了しようとしても、次の画像のように「必須項目に入力してください。」とエラーが返ります。

名前エリア

[text* your-name]の「your-name」は名前エリアです。

名前エリアは、お問い合わせフォームから送信されるメールとお問い合わせ内容を紐づけるために必要になります。

次の画像は、Contact Form7のメール設定画面です。

画像の赤枠内に「 お名前：[your-name] 」と書いているのがわかると思います。

この設定で、問い合わせフォームに入力すると、次のような受信メールが届きます。

このように名前エリアに入力した名称により、受信メールと内容を紐づけています。

オプションエリア

オプションエリアとは、フォームをデザインする際に追加するエリアです。

タイプエリアと名前エリアだけあればテキストフォーム等は使用できますが、フォームの見た目にこだわると、一気に本格的な問い合わせフォームになります。

試しに、プレースホルダーテキストを入力するために、「placeholder」オプションを使ってみると、次のように薄いグレーの文字が入りました。

フォームサンプルと設定

簡単なサンプルですが、もし必要ならどんどんコピーして使ってください。ただし、最後に自分のWebサイトできちんと動作するか、テストは行って下さいね。

「テキスト」入力フォーム

テキストは単一行（１行）の入力フォームです。改行ができません。改行したい場合は「テキストエリア」入力フォームを使いましょう。

フォームテンプレート

お名前を入力してください。（必須）
[text* your-name akismet:author placeholder"例：佐藤一郎"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-name等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：佐藤一郎」等です。
Akismet	「送信者の名前の入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。）
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「メールアドレス」入力フォーム

メールアドレスは単一行（１行）の入力フォームです。改行はできません。

フォームテンプレート

メールアドレスを入力してください。（必須）
[email* your-email akismet:author_email placeholder"exsample@hoge.com"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-mail等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：exsample@hoge.com」等です。
Akismet	「送信者のメールアドレスの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。）
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「URL」入力フォーム

フォームテンプレート

URLを入力してください。（必須）
[url* your-url akismet:author_url placeholder"https://hoge.com"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-url等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：https://hoge.com」等です。
Akismet	「送信者のURLの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。）
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「電話番号」入力フォーム

フォームテンプレート

電話番号を入力してください。（必須）
[tel* your-tel placeholder"080-1234-5678"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-tel等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：080-0000-0000」等。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「数値」入力フォーム

フォームテンプレート

数値を入力してください。（必須）
[number* number min:1 max:10 placeholder"5"]

フォーム生成画面・項目解説

項目タイプ	「スピンボックス」「スライダー」から選択します。チェックを入れると必須項目になります。
名前	判別するための名前です。number等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「5」等など。
範囲	下限と上限をそれぞれ設定できます。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「日付」入力フォーム

フォームテンプレート

日付を入力してください。（必須）
[date* your-date min:2019-01-01 max:2019-12-31 class:required "2013-04-01"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。date等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：2019-10-10」等です。
範囲	それぞれ年月日を設定でき、入力範囲を指定できます。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「テキストエリア」入力フォーム

テキストエリアは複数行の入力フォームです。改行も可能です。

フォームテンプレート

お問い合わせ内容を入力してください。（必須）
[textarea* your-message placeholder"こちらにお問い合わせ内容をご入力ください。"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-message等
デフォルト値	入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「お問い合わせ内容をご入力ください」等など。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「ドロップダウン」フォーム

ドロップダウンは準備された選択肢から１つもしくは複数を選択できるフォームです。必須項目にできます。

フォームテンプレート

最も好きな果物は？
ドロップダウンの選択肢から回答を１つ選択して下さい。（必須）
[select* favorite-fruit include_blank "りんご" "みかん" "いちご" "バナナ"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-menue等
オプション	りんご（改行）みかん（改行）いちご　のように入力してください。チェックボックスのチェックで、複数選択可能にすること、先頭に空の項目（空欄）を挿入することができます。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「チェックボックス」入力フォーム

チェックボックスは、準備された選択肢から複数（もしくは１つ）を選択するフォームです。必須項目にできます。

フォームテンプレート

一番好きな果物は？
回答を１つ選択して下さい。（必須）

１、オプションのチェックなし
[checkbox* checkbox label_first use_label_element exclusive "りんご" "みかん" "いちご" "バナナ"]

２、「ラベル絵を前に、チェックボックスを後に配置する」にチェック
[checkbox* checkbox label_first "りんご" "みかん" "いちご" "バナナ"]

３、個々の項目をlabel要素で囲む」にチェックすると選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利！
[checkbox* checkbox use_label_element "りんご" "みかん" "いちご" "バナナ"]

４、「チェックボックスを排他化する」にチェックを入れると、１つだけしか選択できないようになります。りんごを選択後みかんをクリックすると、りんごのチェックが外れます。
[checkbox* checkbox exclusive "りんご" "みかん" "いちご" "バナナ"]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。check-box等
オプション	りんご（改行）みかん（改行）いちご　のように入力してください。チェックボックスについては上のサンプルをご確認ください。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「ラジオボタン」フォーム

ラジオボタンは、準備された選択肢から１つを選択するフォームです。必須項目にはできません。

フォームテンプレート

一番好きな果物は？
回答を選択して下さい。（必須）

１、オプションのチェックなし
[radio radio-256 default:1 "りんご" "みかん" "いちご" "バナナ"]

２、「ラベルを前に、チェックボックスを後に配置する」にチェック
[radio radio-256 label_first default:1 "りんご" "みかん" "いちご" "バナナ"]

３、「個々の項目をlabel要素で囲む」にチェックすると選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利！
[radio radio-256 use_label_element default:1 "りんご" "みかん" "いちご" "バナナ"]

フォーム生成画面・項目解説

名前	判別するための名前です。check-box等
オプション	りんご（改行）みかん（改行）いちご　のように入力してください。チェックボックスについては上のサンプルをご確認ください。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「承諾確認」入力フォーム

プライバシーポリシーへの同意などに使う承諾確認のチェックボックスを表示します。

フォームテンプレート

[acceptance optional] プライバシーポリシーに同意して申し込む場合は、チェックしてください。 [/acceptance]

フォーム生成画面・項目解説

名前	判別するための名前です。acceptance等
同意条件	問い合わせフォームであれば、「プライバシーポリシーに同意します」などとします。
オプション	チェックを入れると任意選択になります。外すとチェックが必須になります。同意条件によって変えてください。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「クイズ」フォーム

クイズに正解することで送信ができるようになります。スパム対策に使うフォームです。

フォームテンプレート

正しい答えを入力し、送信ボタンをクリックしてください。
[quiz capital-quiz "フランスの首都は？|パリ" "日本の首都は？|東京"]

フォーム生成画面・項目解説

名前	判別するための名前です。capital-quiz等
クイズと回答	一行に一対の、パイプで区切られたクイズと答えを入力します。 例：フランスの首都は？|パリ
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

「ファイル」入力フォーム

メールアドレスは単一行（１行）の入力フォームです。改行はできません。

フォームテンプレート

ファイルを添付してください。（必須）
[file* your-file limit:10mb]

フォーム生成画面・項目解説

項目タイプ	チェックを入れると必須項目になります。
名前	判別するための名前です。your-file等
ファイルサイズの上限	添付できるファイルサイズの上限値を設定できます。単位なしの数字が入力された場合バイト（byte）で、キロバイト、メガバイトの単位を付けることもできます。1024kb、1mbなど。指定しない場合は1mbです。
受け入れ可能なファイル形式	ファイル形式はjpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav、wmvから選択し、パイプ（「 | 」←これです。キーボードの右上、￥マーク付近にありませんか？）で区切って指定します。指定しない場合は全て受け入ます。
ID属性	必要に応じて、idを指定できます。
クラス属性	必要に応じて、classを指定できます。

まとめ

Contact Form 7は、日本人が作成したプラグインということもあり、日本語のドキュメントやカスタマイズ事例が多く、初心者でも検索すればたくさんの事例を知ることができます。

また、このプラグインの導入を前提とした「Contact Form 7」の追加機能のプラグインが充実していることも特徴です。

シンプルで有るが故に、とても奥深いプラグインです。

など、幅広く利用できますので、あなたのWebサイトでも導入しておきましょう！