今すぐ設置可能!Contact Form 7 の使い方を全て解説

ワードプレスでサイトを
運営していく上で
問い合わせができるページは必須です。

「日常を綴ってる
ただの日記だから必要ない」

という人でも、

情報を発信するということは、
それなりに発信した内容に
責任があるものです。

これが、マーケティングなどの目的で
運営しているサイトなら、
なおさら問い合わせがすぐにできる
ページを用意しておきましょう。

ワードプレスでは、
問い合わせページが
簡単に設置できる
「contact form 7」
プラグインがあります。

このプラグインは
目的によって
様々な設定ができます。

その設定方法を
解説していきます。

目次

1.contact form 7とは?
2.contact form 7を設定してみよう
3.プラグインのインストール
4.contact form 7の各種設定
5.編集画面
6.タイトルの入力
7.フォームの設定
8.各設定方法
9.フォーム作成の流れ
10.メールパネルの設定
11.自動返信メール(サンクスメッセージ)の設定
12.お問い合わせフォームを公開する
13.最終確認をしてみる
14.まとめ

1.contact form 7とは?

contact form 7とは、
ワードプレスに
お問い合わせページが
設置できるプラグインです。

お問い合わせフォームはもちろん、
アンケートフォーム、
採用募集フォームなども
作成することができます。

また、迷惑メール(スパムメール)対策も
設定することができます。

2.contact form 7を設定してみよう

contact form 7のプラグインを
インストールしていきます。

3.プラグインのインストール

ワードプレスのダッシュボードを開き、
左側のメニューで、
「プラグイン」を押します。

contact form 7 使い方

その中の「新規追加」ボタンを押します。

そうすると、右上に
検索窓が表示されるので、
「contact form 7」と
入力してください。

contact form 7 使い方

contact form 7のプラグインが出てくるので、
「今すぐインストール」を押します。

contact form 7 使い方

「有効化」ボタンを押します。

contact form 7 使い方

または、左側のメニューから
「インストール済みプラグイン」を押して、
「contact form 7」を探します。

「有効化」を押します。

contact form 7 使い方

有効化が完了すると、
ダッシュボードの
左側のメニューに、
「お問い合わせ」のメニューが出てきます。

contact form 7 使い方

お問い合わせプラグインに
関連する設定などは、
全てここから編集していきます。

4.contact form 7の各種設定

新しくお問い合わせページを
作成していきます。

ダッシュボードの左側の
メニューにある
「お問い合わせ」を押します。

「新規追加」を押します。

contact form 7 使い方

そうすると、コンタクトフォーム
追加画面になり、
新しくお問い合わせフォームを
作成することができます。

contact form 7 使い方

5.編集画面

編集する項目は、パネルで分かれています。

contact form 7 使い方

 

  • フォーム:お問い合わせページの入力項目の設定
  • メール:ユーザーからのお問い合わせ受信に関する設定
  • メッセージ:ユーザーがお問い合わせメッセージを送信した後に表示するメッセージの設定
  • その他の設定:コードを追加して自由にカスタマイズできる設定

では、お問い合わせフォームを
作成していきましょう。

6.タイトルの入力

まずは、タイトルを入力します。

contact form 7 使い方

お問い合わせフォームは、
一つだけではなく目的に合わせて
複数作成することができます。

例えば、ユーザーが
どこから問い合わせしてきたのか
把握できるように、
それぞれ複数のフォームを
設置しておく、

問い合わせの内容を
その都度変更
(アンケート内容を変更する等)して、
作成しておく、

など、様々な使い方ができます。

そのため、それに合わせてわかりやすく
タイトルをつけておきましょう。

今回は、「お問い合わせフォーム」と
入力します。

contact form 7 使い方

タイトルを入力する枠に、
カーソルを持ってきて
クリックすると入力できるようになります。

7.フォームの設定

次に、「フォーム」パネル内の編集です。

contact form 7 使い方

ここでは、
「ユーザーに何を入力してもらって
問い合わせをしてもらうのか」
を設定していきます。

設定できる項目は以下の15項目です。

contact form 7 使い方
  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承諾確認
  • クイズ
  • reCAPTHA
  • ファイル
  • 送信ボタン

デフォルトでは、以下の項目の
問い合わせページになっています。

contact form 7 使い方
  • お名前
  • メールアドレス
  • 題名
  • メッセージ本文
  • 送信ボタン

必要な項目を設定していきましょう。

8.各設定方法

フォームに追加したい項目を
ボタンを押して追加していきます。

なんでも応用ができるのは
「テキスト」ボタンです。

「テキスト」ボタンは
テキスト入力項目を
設置することができます。

住所やメールアドレスなど
必要な項目を入力してもらうエリアが
設定できます。

ただし、
メールアドレスや電話番号など、
ボタンがあらかじめある項目は、
専用の入力項目が設定できるので、
ぜひ活用してください。

専用のボタンを使用して設定すると、
間違った文字列を入力した場合、
自動的にエラーで知らせてくれるので、
間違いが少なくなります。

8-1.テキスト・メールアドレス・URL・電話番号の設定

  • テキスト
  • メールアドレス
  • URL
  • 電話番号

これらの追加設定のやり方は
同じです。

例として、
メールアドレスの入力フォームを
追加してみます。

まず、「メールアドレス」ボタンを
押します。

contact form 7 使い方

このように画面が出てきます。

contact form 7 使い方 contact form 7 使い方

A.項目タイプ:
ユーザーに必ず入力してほしい項目の場合は、
チェックをします。

B.名前:
タグの名前です。
特に変更する必要はありません。

C.デフォルト値:
フォームにあらかじめ入力しておく
テキストになります。

このテキストを項目の
プレースホルダーとして使用する
→ここにチェックを入れると、
ユーザーに何を入力してほしいのかを
すぐに認識してもらえます。

プレースホルダーテキストとは
入力されるまでの間
フィールドの内側に表示される
説明文のことです。

そのフィールドに
入力を始めると消えます。

プレースホルダーテキストは
現在のユーザーインターフェイスでは
一般的に用いられているので、
どこかで見たことがあるはずです。

参考先:プレースホルダーテキストを設定する

例えば、
「メールアドレスを入力してくだい」
「mail@example.com」のように、
ユーザーがメールアドレスを入力する欄だと
認識しやすいようにしておきます。

D.Akismet:
Akismetとは、迷惑コメントなどを
自動的に判定してくれるプラグインです。

「Akismet」プラグインを
利用している場合は、
チェックを入れておくと、
迷惑メールの防止につながります。

E.ID属性:
デザインをcssでカスタマイズする場合は、
任意の文字列を入力します。

F.クラス属性
デザインをcssでカスタマイズする場合は、
任意の文字列を入力します。

※ID属性・クラス属性は、
cssの知識が必要となるため、
ここでは解説しません。

G.タグを挿入
このダグをコピーして、
追加したい場所に貼り付けます。
(ペーストします)

以下、設定項目が同じ内容の場合は、
解説を省略しています。

8-2.数値の設定

数を入力する項目を設定できます。

「数値」ボタンを押します。

contact form 7 使い方 contact form 7 使い方

H.項目タイプ:

  • スピンボックス:クリックして数字を入力するタイプ
  • スライダー:スライダーを動かして数字を入力するタイプ

I.範囲:
入力できる数値の範囲を決められます。

下限:最小の値
上限:最大の値

8-3.日付の設定

contact form 7 使い方

J.範囲

「年」をクリックして
数値を入力するやり方と

下向き三角(▼)を押して、
カレンダーから選択するやり方の
2通りができます。

contact form 7 使い方

8-4.テキストエリアの設定

「テキストエリア」ボタンを押します。

contact form 7 使い方

「テキスト」ボタンは、
1行のテキスト入力のみになりますが
「テキストエリア」ボタンは、
複数行のテキスト入力が可能です。

例えば、質問内容の入力や、
採用応募フォームの場合は、
志望動機の入力のエリアにするなど
活用ができます。

8-5.ドロップダウンメニューの設定

「ドロップダウンメニュー」ボタンを押します。

contact form 7 使い方

これは、選択項目を
入力してほしい場合に使用します。

例えば、都道府県や性別、
質問内容の項目、予約時間などです。

contact form 7 使い方

K.オプション
1行ずつ改行して入力していきます。

・複数選択を可能にする
基本は、一つの項目のみが
選択できる状態です。
「複数選択を可能にする」に
チェックを入れると、
いくつでも選択することができます。

チェックを入れない状態の表示では、
三角ボタン(▲▼)を押して、
選択できるようになります。

contact form 7 使い方

チェックを入れた状態の表示は、
項目が出てくるので、
どれかを選択すると、
このように色が付きます。

contact form 7 使い方

・空の項目を先頭に挿入する
この項目にチェックを入れると、
一番上の項目が、「——」の表示になります。

contact form 7 使い方

8-6.チェックボックス・ラジオボタンの設定

チェックボックス・ラジオボタンの
設定のやり方は同じです。

例として、
チェックボックスの設定を解説します。

「チェックボックス」ボタンを押します。

contact form 7 使い方

オプションには同じように、
1行ずつ項目を入力します。

contact form 7 使い方

表示はこのようになります。

contact form 7 使い方

オプションの設定項目を説明します。

contact form 7 使い方

・ラベルを前に、チェックボックスを後に配置する
ラベルとは、オプションに入力した項目です。

表示は先ほどのものと、
チェックボックスの順番が逆になっています。

contact form 7 使い方

・個々の項目を label 要素で囲む

文字列をクリックしても、
チェックが入るようになります。

表示自体は変わりません。

contact form 7 使い方

・チェックボックスを排他化する
複数のチェックができないようになります。

表示自体は変わりません。

ラジオボタンの設定のやり方も
同じです。

どのように表示されるのかは
このようになっています。

contact form 7 使い方

8-7.承諾確認の設定

この設定を行う場合は、
個人情報の取り扱い規約などの
本人の承諾を得たい場合に使用します。

「承諾確認」ボタンを押します。

contact form 7 使い方

使用するときは、このままでOKですが、
設定が2か所あります。

contact form 7 使い方

・このチェックボックスをデフォルトでチェックされた状態にする

チェックを入れると、
あらかじめ、チェックが入った状態で
表示されます。

・これの挙動を反対にする

チェックボックスにチェックを入れるように
求めるのではなく、
反対にチェックを外すように求める設定です。

8-8.クイズの設定

「クイズ」ボタンを押します。

contact form 7 使い方

この設定は指定したクイズに正解しないと、
メッセージが送れない設定です。

contact form 7 使い方

・クイズと回答

ここに、クイズの問題と答えを入力します。

書き方は「質問|答え」のように
クイズの問題とその正解は
「|」で区切って入力します。

表示はこのようになります。

contact form 7 使い方

8-9.高度なスパム対策reCAPCHAの設定

reCAPTCHAを使用すると、
より高度なスパム対策、
迷惑メール対策になります。

reCAPTCHAはあなたのウェブサイトを
迷惑や悪用から守る無料のサービスです。

reCAPTCHAは、
高度なリスク分析エンジンと
適応型CAPTCHAを使用して、

自動化されたソフトウェアが
あなたのサイトの凶暴な活動に
巻き込まれないようにします。

これは、有効なユーザーが
簡単に通過できるようにするためのものです。

参考先:reCAPTCHAとは何ですか?

この設定を行うと、このような表示が
出るようになります。

contact form 7 使い方

強力なセキュリティーを行いたい場合に、
この設定は便利ですね。

「reCAPTHCA」ボタンを押します。

contact form 7 使い方

設定する場合は、APIキーを
取得する必要があります。

contact form 7 使い方

「reCAPTHCA」を押します。

画面が変わります。

contact form 7 使い方

下にスクロールしていくと、
このような文章が出てきます。

contact form 7 使い方

「GoogleのreCAPTCHA管理ページにアクセスします。」

リンクを押します。

reCAPTHCAのサイトに変わります。

contact form 7 使い方

Label:
わかりやすい半角英数字を入力します。

contact form 7 使い方

入力画面が出てきます。

Choose the type of reCAPTCHA:

・reCAPTHCA V2は、第二世代
「私はロボットではありません」
チェックボックスを表示されます。

・Invisible reCAPTHCAは、第三世代で
バックグラウンドで自動的に認証をします。

Domains:
ドメイン名を入力します。
(http://〇〇 の 〇〇部分のみ)

Accept~:
チェックを入れます。

Send alerts~:
チェックを入れたままでOKです。

入力が終わったら「Register」を押します。

画面が変わるので、
Site keyとSecret keyを
コピーしてメモ帳などに
保存しておきます。

contact form 7 使い方

ここまで出来たら、
ワードプレスの問い合わせ
設定画面に戻ります。

ダッシュボードの
左側のメニューで、
「お問い合わせ」の中にある
「インテグレーション」を押します。

contact form 7 使い方

reCAPTCHAのキーを設定する
画面になります。

「キーを設定する」ボタンを押します。

contact form 7 使い方

先ほど、コピーして保存しておいた
Site keyとSecret keyを
入力します。

contact form 7 使い方

入力後、「保存」を押します。

これで、設定は完了です。

お問い合わせフォームに戻ります。

ダッシュボードの
左側にあるメニューで
「お問い合わせ」を押し、

reCAPTCHAを設定したい
フォームを押します。

今回作成しているタイトルは、
「お問い合わせフォーム」です。

contact form 7 使い方

「reCAPTCHA」ボタンを押すと、
先ほどとは違う設定画面になります。

contact form 7 使い方

デフォルトのままだと
このような表示になります。

contact form 7 使い方

テーマ:
・明るい:背景グレー
・暗い:背景ブラック

サイズ:
・ノーマル:長方形サイズ
・コンパクト:正方形サイズ

テーマ:暗い/サイズ:コンパクトを
選択した場合は
このような表示になります。

contact form 7 使い方

お好みのデザインで表示させてください。

8-10.ファイルの設定

ファイル添付ができる設定です。

「ファイル」ボタンを押します。

contact form 7 使い方

ここでの設定は、
どのくらいのサイズで
どの形式のファイルが添付可能か、
を設定できます。

contact form 7 使い方

・ファイルサイズの上限(バイト)

添付ファイルの上限サイズを設定します。
空欄の場合は、1MBが上限です。

バイト数の参考数値は以下です。

  • 1MB = 1048576
  • 2MB = 2097152
  • 3MB = 3145728

・受け入れ可能なファイル形式

添付ファイルの形式を指定します。

デフォルトのファイル形式(拡張子)は
以下です。

  • jpg
  • jpeg
  • png
  • gif
  • pdf
  • doc
  • docx
  • ppt
  • pptx
  • odt
  • avi
  • ogg
  • m4a
  • mov
  • mp3
  • mp4
  • mpg
  • wav
  • wmv

ファイルの拡張子を指定したい場合は、
「|」で繋げて入力します。

例えば、
「jpg」と「png」形式のファイルのみ
受信したい場合は、

「jpg|png」と入力します。

8-11.送信ボタンの設定

メッセージの最後に設置する
送信ボタンの設定になります。

「送信ボタン」を押します。

contact form 7 使い方

・ラベル:
送信ボタンに表示する文字です。
ここに入力した文字が
そのままボタンとして表示されます。

contact form 7 使い方

以上、フォームパネルの設定でした。

9.フォーム作成の流れ

実際のフォームを作成します。

追加したい項目ボタンを押します。

contact form 7 使い方

「タグを挿入」ボタンが出てきます。

contact form 7 使い方

ここに表示されているコードをコピーして、
任意の場所にペーストする、
または、「タグを挿入」ボタンを押すと、
自動でコードが追加されます。

contact form 7 使い方

必要な項目のコードを追加して
フォームを作成していきましょう。

10.メールパネルの設定

次は、「メール」のタブを押して、
メールパネルの設定をしていきます。

contact form 7 使い方

問い合わせフォームから、
メッセージが送信された場合に、
お知らせを受信するメールの設定になります。

・送信先:
受信するメールアドレスを入力します。
カンマで区切ると、
複数のメールアドレスが設定できます。

・送信元:
どこから送信されたかの表示です。
(変更しなくてもOKです。)

・題名:
受信するメールの表示されるタイトルです。
「wordpressからの問い合わせ」など、
統一しておくと便利です。

・追加ヘッダー:
受け取るメールの返信先を設定します。
「Cc: 」「Bcc:」の設定もできます。

・メッセージ本文:
ここに書かれた内容で、
問い合わせ内容を受信します。
見やすい内容に設定してください。

11.自動返信メール(サンクスメッセージ)の設定

問い合わせフォームから
メッセージを送信した後に、
自動で返信メールを設定することができます。

問い合わせてくれた人に対しての
お礼のメッセージ(サンクスメッセージ)を
送ることができます。

メールパネルをそのまま下に
スクロールしていきます。

contact form 7 使い方

「メール(2)」にチェックを入れます。

contact form 7 使い方

自動返信メールの設定画面になります。

contact form 7 使い方

以下の内容は変更しなくてもOKです。

・送信先:変更してしまうと、自動返信メールが届かなくなります。
・送信元:自分の名前など

・題名:
サンクスメッセージとわかるように
「お問い合わせありがとうございます」などと
入力しておきます。

・メッセージ本文:
メッセージの内容を入力します。
問い合わせに対して、伝えたいメッセージを
入力してください。

全て入力が完了したら
「保存」を押します。

contact form 7 使い方

12.お問い合わせフォームを公開する

ここまで、設定が完了したら、
お問い合わせフォームを
公開していきましょう。

ショートコードが自動で表示されます。

contact form 7 使い方

ショートコード
[contact-form-7 404 "Not Found"]

表示されたショートコードをコピーして
メモ帳などに保存しておきます。

ダッシュボードの左側の
メニューにある
「固定ページ」を押し、
「新規追加」を押します。

contact form 7 使い方

固定ページ内に、先ほどコピーした
ショートコードをそのままペーストします。

ページタイトルは、
わかりやすいように
「お問い合わせ」などと入力しましょう。

contact form 7 使い方

これで完了です。

「公開」を押して、
表示を確認してみてください。

contact form 7 使い方

13.最終確認をしてみる

実際に、お問い合わせができるか、
エラーが出ないかを、
自分でメッセージを入力して
確認してみましょう。

14.まとめ

プラグインcontact form 7の
お問い合わせフォームでは、
用途に合わせて様々な設定が可能です。

単純なお問い合わせだけではなく、
アンケート形式にしたり、
企業の採用募集のページにも対応できます。

ぜひ使いやすいように
設定をして、
問い合わせフォームをつけてみてください。

時間とお金も手に入れシンプルに成功する方法

個人でビジネスを始める方、小さい会社でも大きな利益を出したい方、自由な人生を勝ち取りたい方向けに 合計5本のビデオをプレゼントしております。 さらに期間限定ビデオもプレゼントしておりますので、今すぐ下記のボタンをクリックして詳細をご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ビジネスZEROでは、0からビジネスを作り会社や国に頼らなくても自身で稼ぎ続ける起業、副業、WEBマーケティングノウハウを徹底的に追求し、個人でも稼ぐことが出来るビジネスモデルの作り方やマネタイズの方法等、具体的なノウハウを1から10まで可能な限り、トコトン提供していきます。