初心者向け

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

こんな方に読んでほしい!

  • WordPressで問い合わせフォームを作りたい!
  • 会員登録フォームや申込みフォームを作りたい!
  • Contact Form 7の導入方法を知りたい!

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

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

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

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

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

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

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

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

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

読者の利便性が上がる

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

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

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

お問い合わせフォームを設置すると、ブログの誤字などを指摘してくれる親切な方からの連絡がはいることもあるよ!

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

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

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

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

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

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

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

Google AdSenceの審査に関しては、「合格するための6つの基準!Google Adsense(アドセンス)の審査基準を徹底考察!」をご参考ください。

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

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

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

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

contactform7 問い合わせページ

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

Contact Form7はかなりポピュラーなプラグインなため、「Contact Form7 デザイン」と検索すれば、コピペできるデザイン案が沢山出てきますよ。

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

contactform7_07_問い合わせフォーム事例

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

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

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

contactform7_01_インストール

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

contactform7_02_有効化

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

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

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

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

contactform7_03_プラグイン_コンタクトフォーム一覧

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

contactform7_04_プラグイン_コンタクトフォーム編集

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

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

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

contactform7_05_問い合わせページ作成

① 左側メニューの固定ページ > 新規追加をクリックします。

② あとあと使えるお問い合わせページを作るので、タイトルは「お問い合わせ」などにしてください。

③ タイトル入力後、マウスで別の場所をクリックするとパーマリンクが表示されますので、「contact」などとしてください。

④ さきほどコピーしたショートコードは、本文に貼り付けてください。

⑤ 最後に公開(更新)をクリックします。

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

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

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

contactform7_06_問い合わせページ公開

ここに注意!

使っているブラウザでメニュー名が異なりますので、それっぽいのを選んで下さい。

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

contactform7_06_問い合わせページ公開ページ

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

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

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

追加できるフォーム一覧

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

  1. テキスト入力フォーム
  2. メールアドレス入力フォーム
  3. URL入力フォーム
  4. 電話番号入力フォーム
  5. 数値入力フォーム
  6. 日付入力フォーム
  7. テキストエリア入力フォーム
  8. ドロップダウンメニュー
  9. チェックボックス
  10. ラジオボタン
  11. 承諾確認
  12. クイズ
  13. ファイル
追加プラグインをいれることで項目を増やすことができます。例えば「郵便番号を入力すると、住所が自動的に入力される」なんてものも、比較的簡単に作れます。

フォームを追加する方法

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

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

CF7_item_01_項目

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

編集の仕方は後ほど解説します。

CF7_item_02_テキスト入力フォーム項目

フォームを削除する方法

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

フォーム 編集エリア

この例だと、大まかに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:テキスト入力エリア
  • email:メールアドレス入力エリア
  • tel:電話番号入力エリア
  • checkbox:チェックボックスエリア
  • radio:ラジオボタンエリア

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

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

テキスト入力エリア以外でも、「*」をつけたら必須項目になります!

フォーム 必須

名前エリア

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

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

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

フォーム メール

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

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

フォーム メール2

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

オプションエリア

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

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

オプションエリアの使い方(例)

  • テキストエリアに薄いグレーの文字(プレースホルダーテキストといいます。)を表示する
  • フォームの横幅を画面100%にする
  • 入力する文字のサイズを変える

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

フォーム メール3

オプションエリアは複数並べられるので、好きなようにデザインしてみてね!

フォームサンプルと設定

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

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

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

フォームテンプレート

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

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

CF7_item_02_テキスト入力フォーム項目

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

参考

「akismet」オプションを使うには「Akismet Anti-Spam」プラグインとAPI連携する必要があります。やり方に関しては、「WordPressのスパム対策ならまずこれ!プラグイン「Akismet Anti-Spam」の設定方法を解説!」にて解説しています。

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

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

フォームテンプレート

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

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

CF7_item_03_メールアドレス入力フォーム項目

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

「URL」入力フォーム

フォームテンプレート

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

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

CF7_item_04_URL入力フォーム項目

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

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

フォームテンプレート

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

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

CF7_item_05_電話番号入力フォーム項目

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

「数値」入力フォーム

フォームテンプレート

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

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

CF7_item_06_数値入力フォーム項目

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

さらに詳しく!

CF7_item_17_数値フォームスピンボックス&スライダー

スピンボックスとは、入力欄の右側のアップダウンボタンで数値を増減させて指定する入力フォームです。

スライダーとは、スライダーを左右に動かして数値を指定する入力フォームです。(スライダーは数値を表示するのにひと手間かかるので、オススメしません。)

「日付」入力フォーム

フォームテンプレート

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

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

CF7_item_07_日付入力フォーム項目

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

ここに注意!

デフォルト値の年月日はハイフン「-」でつないでください。スラッシュ「/」でつなぐと表示されません。

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

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

フォームテンプレート

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

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

CF7_item_08_テキストエリア入力フォーム項目

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

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

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

フォームテンプレート

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

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

CF7_item_09_ドロップダウン項目

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

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

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

フォームテンプレート

一番好きな果物は?
回答を1つ選択して下さい。(必須)

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

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

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

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

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

CF7_item_10_チェックボックス項目

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

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

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

フォームテンプレート

一番好きな果物は?
回答を選択して下さい。(必須)

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

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

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

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

CF7_item_11_ラジオボタン項目

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

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

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

フォームテンプレート

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

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

CF7_item_12_承諾確認項目

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

「クイズ」フォーム

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

フォームテンプレート

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

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

CF7_item_13_クイズ項目

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

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

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

フォームテンプレート

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

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

CF7_item_14_ファイル項目

項目タイプ チェックを入れると必須項目になります。
名前 判別するための名前です。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サイトでも導入しておきましょう!

-初心者向け
-