くま太君簡単にできる！
お問い合わせフォームの作り方完全マップだよ！
ブログ運営をするのなら、必ず必要になるお問い合わせフォーム。
今回は日本語対応で、余計なコード作成もなく簡単操作で人気の、クマのアイコンが目印、Contact Form by WPFormsで、お問い合わせフォームを作っていきます。
くま太君基本の完成形はコレ！
1番簡単にできるお問い合わせフォームで、今回はコレを作るよ。
図をふんだんに使って、1から初めてContact Form by WPFormsを触る方向けに、解説していきます。
くま太君この他にもContact Form by WPFormsについての記事を公開中！
よかったら一緒に参考にしてね！
まずはお問い合わせフォームの作成手順を確認しておこう
STEPの順序は前後してもOK！
では次から、Contact Form by WPFormsのでお問い合わせフォームを作成する手順を、1つ1つ丁寧に見ていきます。
くま太君では、さっそくお問い合わせフォームを作っていこう！
STEP１ Contact Form by WPFormsをインストール
くま太君まずはWordPressに、Contact Form by WPFormsをインストールしよう。
くま太君Contact Form by WPForms をコピペで検索ボックスに入力したら、楽チンだよ。
くま太君クマのアイコンが目印だよ。
少し待って、インストールが終了すると、自動で「有効化」のボタンに変化します。
くま太君お疲れ様でした！
Contact Form by WPFormsのインストールは終了！
ここまでで、Contact Form by WPFormsプラグインのインストールが完了です。
プラグインのインストール方法は、どれも同じなので、よかったら参考にしてください。
次は、Contact Form by WPFormsでお問い合わせフォームをレイアウトしていきます。
STEP２ お問い合わせフォームをレイアウト
くま太君1番簡単な方法で作っていくね。
もちろん、自分で色々カスタマイズしてもOK！
先ほどのContact Form by WPFormsプラグインのインストール完了した画面から、続けていきます。
画面をスクロールすると、下の方に「最新のフォームを作成」ボタンがあります。
そちらをクリックします。
空欄のボックスの中に、お問い合わせフォームに付ける名前を入力します。
私は今回「お問い合わせ」と付けました。
ほとんどの方が「お問い合わせ」と名付けると思いますが、「質問箱」でも「inquiry」でも、何でも名付けられます。
くま太君自分で必要な名前を付けてあげてね。
「簡単なお問い合わせフォーム」の「テンプレート」をクリック
まず、ブログで使うお問い合わせフォームで、最低限必要な項目は以下です。
- 名前
- メールアドレス
- 問い合わせ内容
今回はこの内容に合わせて、お問い合わせフォームを作っていきます。
「簡単なお問い合わせフォーム」テンプレートから「テンプレート」をクリックしてください。
ちなみに、テンプレートボタンの右側にある「デモを表示」をクリックすると、
このように各テンプレートのデモを表示できます。
Contact Form by WPFormsでは、英語表記ではありますが無料版でも多彩なテンプレートが用意されています。
お問い合わせフォーム以外にも、例えばアンケートフォームや申込フォームなども色々作れます。
参考までにいろいろデモをチェックしてみると、楽しいかもしれません。
くま太君もう出来てる！
ここからちょっとそれらしく、体裁を整えていくよ。
下記図を見ると、もうお問い合わせフォームができたも同然ですよね。
もし下記図の右側②を見て、このままで良ければ、③の保存をクリックして出来上がり！でも問題ありません。
ですがもうちょっとブロガーのお問い合わせフォームらしく、整えていきます。
上記図の左側①が、無料版Contact Form by WPFormsで使用できる、部品です。
①の下側は薄い色になっていてクリックできないのですが、有料版にアップグレードすれば、もっと様々な機能が利用できるようになります。
くま太君では、名前・メールアドレス・コメント部分のれぞれについて、カスタマイズしていこう！
「名前」のブロックをカスタマイズ
右側の「名前」ブロックの辺りにカーソルを持っていくと、点線で囲まれるので、そのままクリックします。
すると下記図のように編集画面が変わります。
くま太君1つづつ説明するよ。
①のラベルの部分に現在は「名前」と入っています。
これを「氏名」と修正したら、画面右側の赤枠内部の表記も「氏名」と変更されます。
ここのメニューでは、画面右側のボックスの形状を変えられます。
現状は姓と名を別々で入力するようになっています（ボックスが2つ）。
ボックスを分けずに、１行で入力する形にもできます。
現状は名前は必ず入力するよう設定されています。
名前入力を必須項目にしないならば、ボタンを押しOFFにすればOKです。
必須項目になっていれば、フォーム上で入力されていないとアラートが表示されます。
逆に必須項目がOFFになっていれば、名前入力をしていなくてもフォームを送信することが可能です。
名前ボックスの下に名と姓と表記されています。
これはサブラベルと言われるもので、Contact Form by WPFormsは海外プラグインのため、通常の日本語表記と異なる記載がされてしまいます。
これを修正するには、コツがいるので、下記の記事を参考にしてみてください。
今回はサブラベルを使わない簡単な方法で、お問い合わせフォームを作っていきます。
名と姓のサブラベルを何とかしたいので、「高度な設定」で手を加えます。
⑤高度な設定をクリックした後の画面は以下です。
くま太君今回ここでのメインは2つ！
- 名と姓（サブラベル）を消す
- サブラベルがないと、ただのボックスだけで不親切なので、プレースフォルダーを付ける
下記記事のように、修正済の場合は、ここは飛ばしてOKです。
名前ボックスの下にある名と姓の表記（サブラベル）を消し、プレースホルダ―を使って、何のボックスなのか分かるように表示させます。
くま太君適宜、右上にある「保存」をクリックして、フォームを保存しながら作業を進めてね。
上記図③の「サブラベルを非表示」をONにすると、画面右側の名前ボックスの下にある、名と姓（サブラベル）が消えます。
これで不自然な名・姓の順番の表記がなくなりましたね。
ただし、これだとただボックスがあるだけで、不親切です。
ボックスの内容を示せるように、手を加えていきます。
下記図のように画面左側のプレースホルダーの、名と姓のボックスに、それぞれ「姓」と「名」を入力します。
すると、画面右側の名前ボックス内に、それぞれ「姓」と「名」がうっすら表示されました。
これがあれば、ここに何を入力したらいいかが、わかりますよね。
今回は「姓」と「名」で表記しましたが、たまにフォームで見かける、「山田」と「太郎」など仮名を入力しておくのでもOKです。
くま太君ボックスの長さは、お好みで！
ここではボックスの長さを修正します。
名前はメールアドレス程長くなることはないので、このままでOKですが、見栄えを他のボックスと揃えるために、修正しました。
これで画面右側のように、名前ボックスが長くなりました。
くま太君これで、名前ボックスのできあがり！
メールアドレスとコメントまたはメッセージ部分は、もっと簡単だから、サクッといこう！
くま太君画面右上の「保存」をしておいてね。
メールアドレスのブロックをカスタマイズ
メールアドレスのブロックでは、「メールアドレスの確認」ボックスを追加していきます。
デフォルトのままでもいいのですが、メールアドレスの確認をしておいた方が、万が一間違っていて連絡がつかないというケースを減らせるので、おすすめです。
メールアドレスブロックが選択されて、編集できるようになります。
「メールでの確認を有効化」をONにすることで、メールアドレスを確認ボックスが追加されました。
メールアドレスが長い方もいるので、ここでボックスのサイズを長く修正します。
これで画面右側のように、メールアドレスボックスが長くなりました。
くま太君メールアドレスの修正は終わり！
最後のボックス修正に行くよ！
コメントまたはメッセージブロックをカスタマイズ
ここはこのままでよければ、スルーでOKです。
くま太君もし「コメントまたはメッセージ」の文言を修正したければ、続きを見てね。
コメントまたはメッセージのブロックが選択されます。
デフォルトではコメントまたはメッセージと入力されています。
この部分にご自分で記載したい文言を入力しなおします。
今回は「お問い合わせ内容」と入力しました。
画面左側の記載内容が修正されました。
ここでは、「コメント」でも「お問い合わせ内容を記入してください」でもOkです。
くま太君これでお問い合わせフォームのレイアウトが終了！
右上の「保存」をクリックして、保存してね。
お疲れ様でした！
これでContact Form by WPFormsのお問い合わせフォームのレイアウトが終了しました。
出来栄えを確認したい時は、右上の「保存」をクリックした後に、「プレビュー」で見ることができます。
STEP３ 固定ページにお問い合わせフォームを埋め込む
Contact Form by WPFormsの設定画面でお問い合わせフォームをレイアウトしただけだと、WEBページとして公開することができません。
作成したお問い合わせフォームを固定ページに埋め込み、この固定ページをWEBページとして公開することで、お問い合わせフォームとして使うことができます。
くま太君固定ページへのフォームの埋め込み方法を見ていこう！
固定ページへの埋め込み方法はいくつかありますが、レイアウト作業の流れのままで、解説していきます。
ボックスの中に、固定ページのページ名を入力します。
今回は「お問い合わせ」と入力しました。
入力後、右側の「行きましょう」をクリックします。
自動で下記図のように、お問い合わせフォームが埋め込まれた固定ページが開きます。
編集メニューの「リンク」に公開用のスラッグを付けて、公開ボタンをクリックし、お問い合わせフォームの埋め込みを完了させます。
ここは実際のフォーム作りとはあまり関係ありませんが、WordPressの左側メニューの固定ページをクリックしてみてください。
今作成した「お問い合わせ」ページが追加されています。
この固定ページのURLを使って、ブログにリンクさせて公開します。
これでお問い合わせフォームの体裁が整いました。
次からは、お問い合わせ送信後の確認設定をしていきます。
STEP４ お問い合わせ送信後の確認設定
くま太君ここでは、フォームを送信した直後に表示される、確認設定をしていくよ。
送信後の確認メッセージのカスタマイズ
まず無料版のContact Form by WPFormsでは、確認画面はありません。
確認画面とは、送信をクリックする前に、入力情報を吐き出し確認できる専用の画面のことですね。
くま太君ちなみに有料版のContact Form by WPFormsには、確認画面を作ることができるよ。
無料版のContact Form by WPFormsでも作れないことはないですが、少々知識と技術が必要になります。
ここでいう確認とは、下記図のような送信後の送信完了メッセージのことです。
デフォルトのままでもOKですが、ここでは修正方法をご案内します。
「確認メッセージ」を修正する
確認メッセージのテキストを、任意のメッセージに修正し、保存をクリックします。
「確認」の修正はこれで完了です！
試しに、デフォルトの文言を改行だけしてみました。
STEP５ お問い合わせの通知メール設定
くま太君ここが少し難しく感じるかも。
1つずつ設定していこう！
上記確認メッセージ設定の続きから進めていきます。
くま太君この通知メール設定だけに特化した、詳細ページを作ったよ！
項目の意味や、エラーがあった時の対処法など、詳しく解説！
通知メール設定のカスタマイズ
本来通知メッセージは、お問い合わせした側と、管理者（ブログ運営者）側それぞれに、違うメッセージを記載して送信されるケースが多いものです。
ですが無料版のContact Form by WPFormsでは、フォーム1つにつき、通知メールを1つしか設定できません。
くま太君有料版のContact Form by WPFormsでは、1つのフォームで複数の通知メールを設定できるよ。
問い合わせ側に返信通知がないと、本当に問合せができたのか不安に思うでしょう。
また管理者（ブログ運営者）にも通知があった方が、問い合わせの漏れを防ぐことができます。
これらのことから、双方に返信通知を自動返信しておいた方が、スマートです。
無料版のContact Form by WPFormsでは、通知設定を1つしかできないので、通知メール本文の内容は問い合わせ側に合わせて記載しておく方が、親切です。
この辺りのことを踏まえて、通知メール設定をしていきます。
くま太君では通知メールの設定をしていこう。
くま太君1つ1つ丁寧に見ていくね。
この送信先メールアドレスは、通知メールが届く宛先になります。
今回は管理者（ブログ運営者）と相手側（問い合わせ側）と両者に通知メールを送るように設定します。
スマートタグをクリックして、「メールアドレス」を選択します。
自動で相手方のメールアドレスを取得できるコードが入力されます。
もっと詳しく通知メール設定を知りたいなら、図解｜Contact Form by WPFormsの自動返信メールの設定方法を徹底解説！をご覧ください。
ここでは任意の文言を入力します。
送信者名（ブログ名）を入力しておくと、わかりやすいです。
もっと詳しく通知メール設定を知りたいなら、図解｜Contact Form by WPFormsの自動返信メールの設定方法を徹底解説！をご覧ください。
ここには任意の文言を入力します。
送信者名（ブログ名）を入力しておくと、わかりやすいです。
もっと詳しく通知メール設定を知りたいなら、図解｜Contact Form by WPFormsの自動返信メールの設定方法を徹底解説！をご覧ください。
ここの文言は任意です。
試しにこんな感じで、入力してみました。
もっと詳しく通知メール設定を知りたいなら、図解｜Contact Form by WPFormsの自動返信メールの設定方法を徹底解説！をご覧ください。
Reply-Toは今回は未使用にしたいので、削除してボックス内は空欄にしておきましょう。
もっと詳しく通知メール設定を知りたいなら、図解｜Contact Form by WPFormsの自動返信メールの設定方法を徹底解説！をご覧ください。
適宜、右上の保存ボタンを押して作業してください。
これで一連のお問い合わせ通知、通知メール設定のカスタマイズは終了です。
お疲れ様でした。
例えばこの通知メール設定でエラーがでていたり、もっと詳しい内容が気になる場合は、下記の記事で詳細に解説しました。
よろしければ参考にしてみてください。
STEP６ スパム対策設定
くま太君いよいよラスト設定！
もうちょっとで完成だよ！
ファイト！
最後に残ったのは、このスパム設定です。
GoogleのreCAPTCHAを利用して、有害なメール、迷惑メールをブロックしていきます。
くま太君ではラスト、スパム対策設定をしていこう！
もうちょっとで完成だよ！
頑張ろう！
reCAPTCHAを作成するサイトに行き、reCAPTCHAの設定に必要なキーコードを入手します。
v3 Admin Consoleをクリックして、先に進めます。
下記の必要箇所に入力し、「送信」をクリックします。
くま太君reCAPTCHAでの設定が終了すると、サイトキーとシークレットキーが発行されるよ！
下記の赤枠の部分をクリックすると、右枠内のコードがコピーできるので、それぞれ控えておきます。
この2つのキーコードを、Contact Form by WPFormsへ登録していきます。
WordPressの左側メニューのWPForms→「設定」を選択
「タイプ」ではreCAPTCHA v3を選択します。
先に控えて置いた「サイトキー」と「シークレットキー」をそれぞれ入力し、左下の「設定を保存」をクリックします。
reCAPTCHAマークが有効にチェックが入った状態で出現します。
これで保存しておけば、スパム設定は終了です。
これで全行程終了です。
お疲れ様でした。
お問い合わせフォームを作ったら、動作確認を忘れずに！
くま太君作ったら、確認！
お問い合わせフォームだけでなく、見直しは大事だよ。
Contact Form by WPFormsでお問い合わせフォームを作ったら、必ず確認作業をしていきましよう。
- お問い合わせフォームの表記に誤字脱字がないか
- 送信後の確認メッセージ（画面上に表示されるもの）に誤りがないか
- 通知の自動返信メールが、設定したアドレスに届くか
- 届いたメールの内容に誤りがないか
自分で実際にお問い合わせフォームで送信テストをし、最低でも上記項目に間違いが無いか、正常に稼働しているかを確認しましょう。
これで問題がなければ、お問い合わせフォームは完成です。
グローバルメニューやフッターなど、入口をどこに設定するか決め、リンクを貼っていきます。
ちなみに当ブログではフッターに設定しています。
当ブログでは、実際にお問い合わせをいただくこともあるので、フッターでも区分けがきちんとしていれば、掲載箇所としては問題ないのかなと思っています。
Contact Form by WPFormsのお問い合わせフォームを、もっとおしゃれに！
Contact Form by WPFormsのお問い合わせフォームを、そのまま使うと少々そっけない感じがしなくもありません。
くま太君シンプルだ！
CSSの知識があれば、CSSでおシャレにデザインをし直すこともできますが、知識や技術がないと少し敷居が高いです。
そんなときは、以下を使うとデザインを簡単にカスタマイズすることが可能です。
- 有料版のContact Form by WPFormsを使う
- WordPressプラグインの「Styler for WPForms」（無料）を使う
有料版はどうしても料金が掛かってしまうので、WordPressプラグインの「Styler for WPForms」（無料）を使う方が簡単で便利です。
そうはいってもブロガーさんの神髄は、記事を書くことですよね。
Contact Form by WPFormsのお問い合わせフォームは、シンプルで見やすいともいえるので、あまり時間のかかるカスタマイズは、ほどほどに。
今回のまとめ。Contact Form by WPFormsのお問い合わせフォームは、簡単シンプルでおすすめ！
WordPressのプラグインを利用して、お問い合わせフォームを作るなら、Contact Form by WPFormsの利用はおすすめです。
必要な項目をドラッグ＆ドロップすれば、必要な項目を並べられるので、簡単でしたね。
無料版のContact Form by WPFormsでは、確認画面を作成できないところが気になりますが（作りこめばできなくはない）、ブログのお問い合わせフォームであれば、これで必要十分であると考えます。
またContact Form by WPFormsと並んで、ブログでよく利用されているWordPressのプラグインで、Contact form 7というフォームもあります。
Contact form 7も簡単にお問い合わせフォームを作成できますが、フォームがコード表記なので、尻込みしてしまう方もいらっしゃるかもしれません。
（最初から必要最小限のコードが記載されているので、そのまま使えばOKだったりしますが）
Contact form 7では確認画面を作成することができるので、コード表記に抵抗がなければ、挑戦してもよいのではないでしょうか。
お問い合わせフォームは、ブログでは大事な部分ではありますが、これに時間を費やすのはもったいないです。
サクッと完成させて、ブログ生活へ一歩踏み出していきましょう！
最後までお読みいただき、ありがとうございました。
＼ 【広告】SWELLだと、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！