ワードプレスの運営において

お問い合わせフォームの

設置は欠かせないですよね。

 

ワードプレスではプラグインの

Contact Form 7」

を使うことで

お問い合わせフォームを簡単に

作ることができます。

 

本記事では…

 

  • Contact Form 7の設定方法
  • Contact Form 7の使い方
  • ワードプレスのお問い合わせフォームの作成方法
  • Contact Form 7でのエラーなどの対応

 

上記について画像付きで説明します。

 

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

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

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

壁にぶつかる部分です。

 

ワードプレスの扱いに慣れていなくても

Contact Form 7でお問い合わせフォームの

作成が理解できるように説明してますので

ぜひ参考にしてください。

 

マーケターHIROマーケターHIRO

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

mail-sp

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

 

まずは、ワードプレスで

お問い合わせフォームを設置するための

プラグイン『Contact Form 7』

をインストールします。

 

マーケターHIROマーケターHIRO

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

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

 

マーケターHIROマーケターHIRO

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

ContactForm7と入力、インストール

 

マーケターHIROマーケターHIRO

Contact Form 7を「有効化」にします。

有効化

 

マーケターHIROマーケターHIRO

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

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

 

マーケターHIROマーケターHIRO

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

【画像付】『Contact Form 7』でWordpressにお問い合わせフォームを作るやり方

 

それでは早速「Contact Form 7」で

ワードプレスにお問い合わせフォーム

を作成しましょう!

 

マーケターHIROマーケターHIRO

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

新規追加

 

マーケターHIROマーケターHIRO

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

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

 

マーケターHIROマーケターHIRO

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

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

1、テキスト

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

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

 

「テキスト」のサンプル

 

マーケターHIROマーケターHIRO

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

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

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

 

マーケターHIROマーケターHIRO

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

sample

 

マーケターHIROマーケターHIRO

Contact Form 7で、ワードプレス上に下記のようなお問い合わせの入力欄ができました。

sample

 

2、メールアドレス

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

をContact Form 7で作成するための設定方法は

テキストと同様です。

 

マーケターHIROマーケターHIRO

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

3、URL

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

マーケターHIROマーケターHIRO

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

4、電話番号

電話番号”を入力する欄の作成についても

設定方法はテキストと同様となっています。

 

Contact Form 7は便利ですね。

 

マーケターHIROマーケターHIRO

解説の手を抜いてるワケではありませんのであしからず。笑

5、数値

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

 

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

しておきましょう。

 

数値設定

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

 

マーケターHIROマーケターHIRO

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

sample

 

6、日付

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

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

 

日付の設定

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

 

マーケターHIROマーケターHIRO

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

sample

 

7、テキストエリア

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

作成できます。

 

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

 

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

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

 

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

同様です。

 

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

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

 

マーケターHIROマーケターHIRO

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

sample

 

9、チェックボックス

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

Contact Form 7で作成する時は

オプション以外の設定方法

テキストと同様です。

 

チェックボックスの設定

 

これ↓↓↓

マーケターHIROマーケターHIRO

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

sample

 

10、ラジオボタン

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

作成することができて、Contact Form 7の

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

 

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

ひとつしか選択できない

という点ですね。

 

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

sample

 

11、承諾確認

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

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

 

承諾確認

 

マーケターHIROマーケターHIRO

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

入力欄sample

 

見え方です。

 

sample

12、クイズ

Contact Form 7では

お問い合わせフォームに

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

 

よくある正しい答えを

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

 

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

 

クイズ作成

 

マーケターHIROマーケターHIRO

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

正解サンプル

 

マーケターHIROマーケターHIRO

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

不正解サンプル

 

13、reCAPTCHA

ワードプレスでは

Contact Form 7で

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

というチェック欄も簡単に

作成できます。

 

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

Contact Form 7のお問い合わせと併せて

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

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

コピペしましょう。

 

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

reCAPTCHAの設定

 

マーケターHIROマーケターHIRO

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

 

14、ファイル

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

添付してもらう設定もContact Form 7で

作ることができます。

 

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

 

マーケターHIROマーケターHIRO

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

sample

 

マーケターHIROマーケターHIRO

ワードプレス上でお問い合わせフォームは以下のように表示されます。

sample

 

15、送信ボタン

Contact Form 7で送信ボタンを

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

 

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

 

ワードプレスで『Contact Form 7』のメール設定を行う方法

 

ワードプレスでお問い合わせフォームが

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

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

 

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

Contact Form 7の設定方法を確認しましょう。

 

sample

 

マーケターHIROマーケターHIRO

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

sample

 

送信先・送信元・題名の設定

メール送信設定

 

Contact Form 7の初期設定のままで

構いません。

 

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

変更してもOKです!

 

追加ヘッダーの設定

メール送信設定

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

を入力しましょう。

 

マーケターHIROマーケターHIRO

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

メッセージ本文の設定

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

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

 

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

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

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

 

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

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

メール送信設定

 

マーケターHIROマーケターHIRO

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

sample

 

ファイル添付の設定

メール送信設定

 

ファイル添付には、

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

 

『Contact Form 7』の問い合わせメッセージの設定

 

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

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

Contact Form 7編集方法をご案内します。

 

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

もちろん編集可能です。

 

Contact Form 7の初期設定のままでも

構わないと思います。

 

Contact Form 7のエラー対応について

Contact Form 7を使用するなかで

対処に困りやすいエラーについて

対応方法を紹介します。

 

現時点でエラーがなくても

Contact Form 7を使い続ける中で

出くわす可能性が高いので

知っておいてください。

 

ワードプレスではエラーが発生すると

その対応に追われて記事執筆どころでは

なくなりますので。

 

Contact Form 7のエラー①「複数のフォームコントロールが単一のlabel要素内に置かれています。」

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

時に、labelタグで囲んでいる

 

複数のフォームコントロールが

単一の label 要素内に置かれています。

 

というエラーが出ます。

 

エラーの原因

 

マーケターHIROマーケターHIRO

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

エラーの対処法

 

labelタグがなくても

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

 

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

Contact Form 7のエラーに悩まされていましたが

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

 

ワードプレスでお問い合わせフォーム『Contact Form 7』を設置する具体的な方法まとめ

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

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

『Contact Form 7』で簡単に

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

 

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

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

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

 

また、お問い合わせフォームは

ブログで稼ぐための土台に過ぎません。

 

土台が出来上がったら

ガンガン記事を執筆して集客と

コンバージョンに力を入れないと

いけません。

 

プラグインの設定くらいは

ひょいひょいとやってのけないと

この先はかなり厳しい道のりです。

 

他のプラグインの設定についても

画像付きで解説してます。

>>>ワードプレスで表を作る為のプラグインTablePressの使い方

>>>ワードプレスで目次を作る方法とは?プラグインを使えば超簡単!

 

マーケターHIROマーケターHIRO

もしブログ運営や集客で困ったらぜひLINEよりご相談ください。60分の無料相談会を実施中です♪

   

2.7億円の価値!?SEO攻略本&Wordpress集客術をセットで先着100名様にプレゼント!

suket-banner

SUKETお勧めの情報発信ツール3点セット

  1. emanon
emanon

web集客に特化した「売れる仕組み」がお手軽に作れるwordpressテーマ。

  1. Dangan
dangan

ボタン操作で誰でもカンタンにLP制作可能。多機能かつデザイン面も◉。

  1. Cyfons
cyfons

会員サイト・メルマガ配信システムが作れます。初心者でも半日で立ち上げ可能。

WEB集客のご相談はお気軽にどうぞ!

suket-ban

SUKETの集客の特徴はSEOに強いブログを軸に、濃い見込み客を安定的に集めて、LINEステップやZoomセミナーで販売することです。

そしてその仕組みは、一度作ってしまえば、半永久的に売上を上げ続けることが可能です。もし、貴社でWEB集客の仕組みを一から構築されたいということでしたら、お気軽に無料でご相談ください。

今すぐお申し込みをする!