こんにちは!

ブログ集客コンサルタントのひろです。

 

ブログ集客において、お問い合わせフォームの

設置は欠かせないですが、ワードプレスでは

プラグインのContactFormを使うことで、

お問い合わせフォームを作ることができます。

 

ただ恐らく、この記事を読んでいるあなたは、

すでにその必要性を知っているとは思いますが、

もしかしたら”設置の方法”や”具体的な使い方”

悩んでいるのではないでしょうか?

 

サクサク設定できる人はよいですが、

あまり得意でなかったり、まだはじめた

ばかりで、ワードプレスに慣れていない人は、

壁にぶつかる部分です。

 

ここからは、画像で解説する

ので、あなたもワードプレスを一緒に開いて

そのまま真似すれば、ContactFormでお問い

合わせフォームをすぐに設置できるでしょう。

 

ひろぽんひろぽん

また、よくある”設定エラー”と”その対処法”も合わせてご紹介しますので、 この記事を見ながら設定すれば悩まないはずです^^

ワードプレスのお問い合わせフォームプラグイン『ContactForm7』の導入方法

まずは、ワードプレスでお問い合わせフォームを

設置するためのプラグイン、『ContactForm7』

をインストールします。

 

ひろぽんひろぽん

WordPressの左サイドにあるメニューから「プラグイン」を選択して、そして次に「新規追加」を選択してください。

プラグインから新規追加を選択

 

ひろぽんひろぽん

右上の検索窓に、「ContactForm7」と入力してください。富士山のマークのアイコンが目印です。インストールをクリックします。

ContactForm7と入力、インストール

 

ひろぽんひろぽん

「有効化」を選択します。

有効化

 

ひろぽんひろぽん

すると左側のメニューに「お問い合わせ」という欄ができました。

お問い合わせという欄が誕生

 

ひろぽんひろぽん

これでお問い合わせを設置する「ContactForm7」のインストールは完了です。

『ContactForm7』でWordpressにお問い合わせフォームを作るやり方

それでは早速、contactformで

お問い合わせフォームを作成しましょう!

 

ひろぽんひろぽん

左のメニューから「お問い合わせ」を開き、新規追加をクリックします。

新規追加

 

ひろぽんひろぽん

このような画面が出てきました。

お問い合わせフォーム作成

 

ひろぽんひろぽん

それでは、contactformのお問い合わせの設置についてひとつずつ説明していきます。

(※初めから入力されている
テンプレートは削除してしまって構いません。)

 

1、テキスト

 

テキストはその名の通り、お問い合わせで

文字を入力する欄を作成できます。

「テキスト」のサンプル

 

ひろぽんひろぽん

テキストをクリックするとこのようなタグの生成画面が出てきます。

テキストで設定できる項目

①項目タイプ 必須項目にチェックを入れると、入力必須に設定できます。
②名前 わかりやすい名前を半角英数字で入力してください。このままでもOKです。
③デフォルト値 入力欄に初めから入力されているサンプルの文字が入力できます。特に設定は不要です。
④Akismet スパム対策ができます。
ワードプレスに初めからある『Akismet』と連携する必要があるので、
使用する際はプラグイン『Akismet』も有効化しておいてください。
⑤ID 属性 特に設定する必要はありません。
⑥クラス属性 特に設定する必要はありません。

 

ひろぽんひろぽん

例として名前を入力する項目を作成していきましょう。必須項目にチェックを入れて「タグを挿入」をクリックし、挿入されたタグの上に「名前」と入力しましょう。

sample

 

ひろぽんひろぽん

contactformで、下記のようなお問い合わせの入力欄ができました。

sample

 

2、メールアドレス

 

お問い合わせの”メールアドレスを入力する欄

をcontactformで作成するための設定方法は

テキストと同様です。

 

ひろぽんひろぽん

ここで注意点!メールアドレスは”必須項目”にチェックを入れてください。ここにチェックが入っていない場合、エラーが出ます。

3、URL

 

URLを入力する欄を作成ですが、設定方法はテキストと同様です。

ひろぽんひろぽん

このようにcontactformなら、お問い合わせの設定が簡単にできるので初心者にもすぐに作ることができます^^

4、電話番号

 

電話番号”を入力する欄の作成についても設定方法はテキストと同様となっています。

 

5、数値

 

数値を入力する欄を作成できます。

テキストと異なる設定箇所の説明だけ

しておきましょう。

数値設定

項目タイプ 「スピンボックス」と「スライダー」を選択できます。
範囲 選択できる数値の範囲を設定できます。

 

ひろぽんひろぽん

「スピンボックス」と「スライダー」のサンプルは下記の通りです。

sample

 

6、日付

 

”日付を入力する欄”を作成できます。

「範囲」以外の設定方法はテキストと同様です。

日付の設定

範囲 選択できる年の範囲を設定できます。

 

ひろぽんひろぽん

サンプルは下記の通りです。

sample

 

7、テキストエリア

 

複数行のテキストを入力する欄”を

作成できます。設定方法はテキストと同様です。

 

8、ドロップダウンメニュー

 

ドロップダウンメニューを作成できます。

”オプション”以外の設定方法はテキストと

同様です。

ドロップダウンメニュー作成

オプション 選択項目を設定できます

 

ひろぽんひろぽん

「複数選択を可能にする」と「空の項目を先頭に挿入する」のサンプルは下記の通りです。

sample

 

9、チェックボックス

 

お問い合わせのチェックボックスを

contactformで作成する時は、オプション

以外の設定方法はテキストと同様です。

チェックボックスの設定

これ↓↓↓

ひろぽんひろぽん

「ラベルを前に、チェックボックスを後に配置する」「個々の項目を label 要素で囲む」「チェックボックスを排他化する」のサンプルは下記の通りです。

sample

 

10、ラジオボタン

 

お問い合わせフォームにラジオボタンを

作成することができて、contactformの

設定方法はチェックボックスと同様です。

 

チェックボックスとの違いは

ひとつしか選択できない」という点ですね。

 

ラジオボタンのサンプルはこんな感じです。

sample

 

11、承諾確認

 

お問い合わせフォームに承諾確認のための

「同意します」の項目を作ることができます。

承諾確認

 

ひろぽんひろぽん

contactformで設定したお問い合わせフォームの使い方は下記の通りです。

入力欄sample

sample

12、クイズ

 

contactformでは、お問い合わせフォームに

クイズを作成することができます。

 

よくある正しい答えを

入力しないと送信できないあの仕組みです^^

 

質問→答え”といった形式で作成します。

クイズ作成

 

ひろぽんひろぽん

正解した場合のサンプルは、このような感じです^^

正解サンプル

 

ひろぽんひろぽん

そして、こちらが不正解の場合のサンプルです。

不正解サンプル

 

13、reCAPTCHA

 

reCAPTCHAは「ロボットではありませんよ

というチェック欄が作成できます。

 

あと、ワードプレスで連携する作業があるので、

contactformのお問い合わせとそちらも併せて

手順から説明していきますね♪

 

ひろぽんひろぽん

まずは、reCAPTCHAをクリックするとこんな画面が出てくるので、リンク先に飛びましょう。

reCAPTCHAの設定

 

ひろぽんひろぽん

さらに読んでいくと「GoogleのreCAPTCHA管理者ページにアクセスしてください。」とリンクがあるので、リンク先へ飛びます。ラベル名は好きな名前を、そして一番上のタイプを選択してください。

reCAPTCHAの設定

 

ひろぽんひろぽん

ドメインを入力する欄が出てくるので、自分のブログのドメインを入力しましょう。

reCAPTCHAの設定

 

ひろぽんひろぽん

下に同意のチェックを入れ、「Registar」をクリック。設定キーが発行されます!次にワードプレズ側の設定をしていきます。「お問い合わせ>インテグレーション」を選択。

reCAPTCHAの設定

 

ひろぽんひろぽん

「キーを設定する」を選択。

reCAPTCHAの設定

 

ひろぽんひろぽん

先ほど発行されたサイトキーとシークレットキーをここに入力し、保存します。

reCAPTCHAの設定

reCAPTCHAの設定

 

ひろぽんひろぽん

これでreCAPTCHAが設定できるようになりました!フォーム作成画面に戻って「reCAPTCHA」を選択すると、contactformでお問い合わせフォームに、このようなものが設定できるようになっているはずです。

reCAPTCHAの設定

 

ひろぽんひろぽん

それぞれのサンプルは下記の通りです。

 

14、ファイル

 

お問い合わせで任意のファイルを

添付してもらう設定もcontactformで

作ることができます。

ファイルサイズの上限 (バイト) 接尾に「KB」「MB」とつけることも可能です。
受け入れ可能なファイル形式 複数許可する場合は「|」で区切ります。

 

ひろぽんひろぽん

例えばこんな設定のサンプルは下記の通りです。

sample

 

ひろぽんひろぽん

お問い合わせフォームにこのように表示されます。

sample

 

15、送信ボタン

 

contactform7で送信ボタンを

お問い合わせフォーム上に作成できます。

 

こちらは、一番最後に貼りましょう。

 

《必須》Wordpressで作る、『ContactForm7』のメール設定方法

 

WordPressでお問い合わせフォームが

完成してもメール設定をきちんと設定

していないとメールが届きません。

 

今回は、このお問い合わせフォームを例に

contactform7の設定方法を確認しましょう。

sample

 

ひろぽんひろぽん

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

sample

 

送信先・送信元・題名

メール送信設定

 

contactformの初期設定のままで構わないので。

お問い合わせフォームの題名はわかりやすく

変更してもOKです!

 

追加ヘッダー

メール送信設定

「Reply-To: (ここにメールタグ)」

を入力しましょう。

 

ひろぽんひろぽん

メールアドレスが必須項目になっていないと、ここでエラーが発生するので注意してください。

メッセージ本文

 

ここではファイルタグ以外のタグを

全部入力しておくことを強くお勧めします。

 

上に表示されているタグを入力していないと、

せっかくお問い合わせがあっても

内容がわからなくなってしまうのです。

 

見てすぐわかりやすいように、

フォームと同じ形式で作ると良いですね。

メール送信設定

 

ひろぽんひろぽん

contactformでこのように設定すると、お問い合わせから実際に送られてくるメールはこうなります。

sample

 

ファイル添付

メール送信設定

 

ファイル添付には、

ファイルタグを入力しましょう。

 

『ContactForm7』のメッセージ方法

 

ここでは、お問い合わせの送信完了後に

お問い合わせで表示されるメッセージなどが

contactformで編集できます。

 

入力漏れのエラーの際に表示される文章なども

もちろん編集可能です。

 

contactform7の初期設定のままでも

構わないと思います。

 

「複数のフォームコントロールが単一の label 要素内に置かれています。」というエラーが出た時の対処法

 

チェックボックスやラジオボタンを設定した

時に、labelタグで囲んでいると、「複数の

フォームコントロールが単一の label 要素内に

置かれています。」というエラーが出ます。

エラーの原因

 

ひろぽんひろぽん

対処法は、labelタグを外すだけでOK。

エラーの対処法

 

labelタグがなくても、

問題なくメールは送信されます!

 

私も、お問い合わせの設定で、大分

contactformのエラーに悩まされていましたが、

たったこれだけで解決できました。笑

 

おわりに

 

ワードプレスでブログ運営をしている方なら、

お問い合わせフォームプラグイン

『ContactForm7』で簡単に

お問い合わせフォームが作成できます。

 

導入〜作成方法〜メール設定まで、

詳しく説明いたしましたので、

ぜひ設定してみてください。

 

ひろぽんひろぽん

メルマガでもブログ運営でSEOで重要なプラグインについてお伝えしています。メールで届くので、忙しくてこちらの記事を読む時間がない方はぜひ登録してみてください。