ワードプレスの運営において
お問い合わせフォームの
設置は欠かせないですよね。
ワードプレスではプラグインの
「Contact Form 7」
を使うことで
お問い合わせフォームを簡単に
作ることができます。
本記事では…
- Contact Form 7の設定方法
- Contact Form 7の使い方
- ワードプレスのお問い合わせフォームの作成方法
- Contact Form 7でのエラーなどの対応
上記について画像付きで説明します。
サクサク設定できる人はよいですが
あまり得意でなかったり、まだはじめた
ばかりで、ワードプレスに慣れていない方は
壁にぶつかる部分です。
ワードプレスの扱いに慣れていなくても
Contact Form 7でお問い合わせフォームの
作成が理解できるように説明してますので
ぜひ参考にしてください。
マーケターHIROよくある”設定エラー”と”その対処法”も合わせてご紹介しますので、 この記事を見ながら設定すれば悩まないはずです^^
ワードプレスのお問い合わせフォーム『Contact Form 7』の導入方法
まずは、ワードプレスで
お問い合わせフォームを設置するための
プラグイン『Contact Form 7』
をインストールします。
マーケターHIROWordPressの左サイドにあるメニューから「プラグイン」を選択して、そして次に「新規追加」を選択してください。
マーケターHIRO右上の検索窓に、「Contact Form 7」と入力してください。富士山のマークのアイコンが目印です。インストールをクリックします。
マーケターHIROContact Form 7を「有効化」にします。
マーケターHIROすると左側のメニューに「お問い合わせ」という欄ができました。
マーケターHIROこれでお問い合わせを設置する「Contact Form 7」のインストールは完了です。
【画像付】『Contact Form 7』でWordpressにお問い合わせフォームを作るやり方
それでは早速「Contact Form 7」で
ワードプレスにお問い合わせフォーム
を作成しましょう！
マーケターHIRO左のメニューから「お問い合わせ」を開き、新規追加をクリックします。
マーケターHIROこのような画面が出てきました。
マーケターHIROそれではContact Form 7のお問い合わせの設置についてひとつずつ説明していきます。
（※初めから入力されているテンプレートは削除してしまって構いません。）
１、テキスト
テキストはその名の通り、お問い合わせで
文字を入力する欄を作成できます。
マーケターHIROテキストをクリックするとこのようなタグの生成画面が出てきます。
| ①項目タイプ | 必須項目にチェックを入れると、入力必須に設定できます。 |
|---|---|
| ②名前 | わかりやすい名前を半角英数字で入力してください。このままでもOKです。 |
| ③デフォルト値 | 入力欄に初めから入力されているサンプルの文字が入力できます。特に設定は不要です。 |
| ④Akismet | スパム対策ができます。 ワードプレスに初めからある『Akismet』と連携する必要があるので、 使用する際はプラグイン『Akismet』も有効化しておいてください。 |
| ⑤ID 属性 | 特に設定する必要はありません。 |
| ⑥クラス属性 | 特に設定する必要はありません。 |
マーケターHIRO例として名前を入力する項目を作成していきましょう。必須項目にチェックを入れて「タグを挿入」をクリックし、挿入されたタグの上に「名前」と入力しましょう。
マーケターHIROContact Form 7で、ワードプレス上に下記のようなお問い合わせの入力欄ができました。
２、メールアドレス
お問い合わせの”メールアドレスを入力する欄”
をContact Form 7で作成するための設定方法は
テキストと同様です。
マーケターHIROここで注意点！メールアドレスは”必須項目”にチェックを入れてください。ここにチェックが入っていない場合、エラーが出ます。
３、URL
URLを入力する欄の作成ですが、設定方法はテキストと同様です。
マーケターHIROこのようにContact Form 7なら、お問い合わせの設定が簡単にできるので初心者にもすぐに作ることができます^^
４、電話番号
”電話番号”を入力する欄の作成についても
設定方法はテキストと同様となっています。
Contact Form 7は便利ですね。
マーケターHIRO解説の手を抜いてるワケではありませんのであしからず。笑
５、数値
数値を入力する欄を作成できます。
テキストと異なる設定箇所の説明だけ
しておきましょう。
| 項目タイプ | 「スピンボックス」と「スライダー」を選択できます。 |
|---|---|
| 範囲 | 選択できる数値の範囲を設定できます。 |
マーケターHIROContact Form 7の「スピンボックス」と「スライダー」のサンプルは下記の通りです。
６、日付
”日付を入力する欄”を作成できます。
「範囲」以外の設定方法はテキストと同様です。
| 範囲 | 選択できる年の範囲を設定できます。 |
|---|
マーケターHIROサンプルは下記の通りです。
７、テキストエリア
”複数行のテキストを入力する欄”を
作成できます。
設定方法はテキストと同様です。
８、ドロップダウンメニュー
ドロップダウンメニューを作成できます。
”オプション”以外の設定方法はテキストと
同様です。
| オプション | 選択項目を設定できます |
|---|
マーケターHIRO「複数選択を可能にする」と「空の項目を先頭に挿入する」のサンプルは下記の通りです。
９、チェックボックス
お問い合わせのチェックボックスを
Contact Form 7で作成する時は
オプション以外の設定方法は
テキストと同様です。
これ↓↓↓
マーケターHIRO「ラベルを前に、チェックボックスを後に配置する」「個々の項目を label 要素で囲む」「チェックボックスを排他化する」のサンプルは下記の通りです。
１０、ラジオボタン
お問い合わせフォームにラジオボタンを
作成することができて、Contact Form 7の
設定方法はチェックボックスと同様です。
チェックボックスとの違いは
「ひとつしか選択できない」
という点ですね。
ラジオボタンのサンプルはこんな感じです。
１１、承諾確認
お問い合わせフォームに承諾確認のための
「同意します」の項目を作ることができます。
マーケターHIROContact Form 7で設定したお問い合わせフォームの使い方は下記の通りです。
見え方です。
１２、クイズ
Contact Form 7では
お問い合わせフォームに
クイズを作成することができます。
よくある正しい答えを
入力しないと送信できないあの仕組みです^^
”質問→答え”といった形式で作成します。
マーケターHIRO正解した場合のサンプルは、このような感じです^^
マーケターHIROそして、こちらが不正解の場合のサンプルです。
１３、reCAPTCHA
ワードプレスでは
Contact Form 7で
「ロボットではありません」
というチェック欄も簡単に
作成できます。
ワードプレスで連携する作業があるので
Contact Form 7のお問い合わせと併せて
手順から説明していきますね♪
マーケターHIROまずは、reCAPTCHAをクリックするとこんな画面が出てくるので、リンク先に飛びましょう。
マーケターHIROさらに読んでいくと「GoogleのreCAPTCHA管理者ページにアクセスしてください。」とリンクがあるので、リンク先へ飛びます。ラベル名は好きな名前を、そして一番上のタイプを選択してください。
マーケターHIROドメインを入力する欄が出てくるので、自分のブログのドメインを入力しましょう。
マーケターHIRO下に同意のチェックを入れ、「Registar」をクリック。設定キーが発行されます！次にワードプレズ側の設定をしていきます。「お問い合わせ>インテグレーション」を選択。
マーケターHIRO「キーを設定する」を選択。
マーケターHIRO先ほど発行されたサイトキーとシークレットキーをここに入力し、保存します。
コピペしましょう。
マーケターHIROこれでreCAPTCHAが設定できるようになりました！フォーム作成画面に戻って「reCAPTCHA」を選択すると、Contact Form 7でお問い合わせフォームに、このようなものが設定できるようになっているはずです。
マーケターHIROそれぞれのサンプルは下記の通りです。
１４、ファイル
お問い合わせで任意のファイルを
添付してもらう設定もContact Form 7で
作ることができます。
| ファイルサイズの上限 (バイト) | 接尾に「KB」「MB」とつけることも可能です。 |
|---|---|
| 受け入れ可能なファイル形式 | 複数許可する場合は「|」で区切ります。 |
マーケターHIRO例えばこんな設定のサンプルは下記の通りです。
マーケターHIROワードプレス上でお問い合わせフォームは以下のように表示されます。
１５、送信ボタン
Contact Form 7で送信ボタンを
お問い合わせフォーム上に作成できます。
こちらは、一番最後に貼りましょう。
ワードプレスで『Contact Form 7』のメール設定を行う方法
ワードプレスでお問い合わせフォームが
完成してもメール設定をきちんと設定
していないとメールが届きません。
今回は、このお問い合わせフォームを例に
Contact Form 7の設定方法を確認しましょう。
マーケターHIROこのような表示になります。
送信先・送信元・題名の設定
Contact Form 7の初期設定のままで
構いません。
お問い合わせフォームの題名はわかりやすく
変更してもOKです！
追加ヘッダーの設定
「Reply-To: （ここにメールタグ）」
を入力しましょう。
マーケターHIROメールアドレスが必須項目になっていないと、ここでエラーが発生するので注意してください。
メッセージ本文の設定
ここではファイルタグ以外のタグを
全部入力しておくことを強くお勧めします。
上に表示されているタグを入力していないと、
せっかくお問い合わせがあっても
内容がわからなくなってしまうのです。
見てすぐわかりやすいように、
フォームと同じ形式で作ると良いですね。
マーケターHIROContact Form 7でこのように設定すると、お問い合わせから実際に送られてくるメールはこうなります。
ファイル添付の設定
ファイル添付には、
ファイルタグを入力しましょう。
『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対処法は、labelタグを外すだけでOK。
labelタグがなくても
問題なくメールは送信されます！
私も、お問い合わせの設定で、大分
Contact Form 7のエラーに悩まされていましたが
たったこれだけで解決できました。笑
ワードプレスでお問い合わせフォーム『Contact Form 7』を設置する具体的な方法まとめ
ワードプレスでブログ運営をしている方なら
お問い合わせフォームプラグイン
『Contact Form 7』で簡単に
お問い合わせフォームが作成できます。
導入〜作成方法〜メール設定まで
詳しく説明いたしましたので
ぜひ設定してみてください。
また、お問い合わせフォームは
ブログで稼ぐための土台に過ぎません。
土台が出来上がったら
ガンガン記事を執筆して集客と
コンバージョンに力を入れないと
いけません。
プラグインの設定くらいは
ひょいひょいとやってのけないと
この先はかなり厳しい道のりです。
他のプラグインの設定についても
画像付きで解説してます。
＞＞＞ワードプレスで表を作る為のプラグインTablePressの使い方
＞＞＞ワードプレスで目次を作る方法とは?プラグインを使えば超簡単!
マーケターHIROSEOブログで通算３億円の売上に貢献できた方法や本来有料にしている専門書籍のプレゼントはLINEでお受け取りください。LINEメルマガでも役に立つ情報を配信していきますので、宜しくお願い致します♪
【法人限定】今すぐSEO対策の相談をしたい方はLINEで！
【タイピングで３億円】右手腱鞘炎webライターが最も力を入れる無料講座【副業希望者限定】
SUKETお勧めのwebツール３点
【コーチ・コンサルタント向け】プロモ型web集客の相談は無料
▼SEOブログの売上実績を公開▼
＊弊社管理ブログから売上2955万円を達成（約1年）
（ブログ→LINEステップのフローを組んで2018年から自動集客）
（平均して3000万円ほどの売上を出せるLPを常時運転）
＊見にくいと思うので、Googleスプレッドシートに実績を公開しています。
※弊社取引先ブログの実績です。信じるか信じないかはあなた次第です。笑
