お問い合わせフォームを無料で作成！おすすめの作り方３選
日々の作業やお勉強、お疲れさまです！
元社畜ゲーマー姉弟のアネオトです。
個人ブログにお問い合わせフォームを
設置する方法をご紹介します。
これらの中からお好みのものを使うといいでしょう！
- 無料のフォーム作成ツールでおすすめのもの
-
『フォームズ』
- WordPressをお使いなら、高機能プラグイン
-
『Contact Form 7』
１つずつ詳しく見ていきます。
もくじ
どんなブログでも使える『フォームズ』
『フォームズ』は無料なのに高機能で、
あらゆる人におすすめのサービスです。
操作方法も直感でわかりやすいですし、
丁寧な作り方ガイドもついています。
▼こんなフォームが作れます。
▼回答はこのようにメールで受信できます。
Googleアカウントで管理できる『Google フォーム』
こちらは本来は「あなたの性別は？」
「この中で興味があるものはどれですか？」など
選択式のアンケートに適したツールなのですが……
メールアドレス入力項目も設定することで、
きちんとお問い合わせフォームの代わりになります。
▼Googleフォームで作った
お問い合わせフォームのサンプル
デザインのカスタマイズは
背景色の変更くらいしかできませんが、
シンプルなので直感的に作成できる
とてもカンタンなフォームです！
- 『Google フォーム』の気になる注意点
-
- 回答はメールでは届かず、管理画面から確認するスタイル
- 回答を送信するとき、確認画面をはさまない
Googleフォームの始め方
まずこちらのページにアクセスします。
下記の画面がでますので
「パーソナル」プランの方から始めます。
その後の操作は、割と直感的にできるので、
あまり困ることはないと思います。
「完成したフォームのURLをどこから見るのか」
が一見わかりにくいのですが……
それはこちらの目玉アイコン
「プレビュー」から見られます。
このプレビュー画面のURLを
お問い合わせフォームへのリンクとして
そのままブログに貼ればOK！
Googleフォームに寄せられた回答の確認方法
届いた回答は「回答」タブから確認できます。
すると「概要」タブがデフォルトで開きますが、
この画面はこれまでに届いた回答を総合した、
集計データ早見表になっています。
（アンケート集計に使うにはかなり便利なのですが、
お問い合わせの回答を見るには超見にくいです笑）
一人一人の回答を見るため、
「個別」タブへ移動しましょう。
「個別」タブに入ると、このように
一人ずつ回答を確認することができます。
まずはご自分でテスト回答してみましょう！
回答の通知をメールで受信する方法
『Google フォーム』では
寄せられた回答は、メール形式では受信できず、
フォームの管理画面から確認することになります。
確認し忘れそうで心配ですよね。
そこで、回答があったらメール通知をする
設定にすることができます。
やり方はまず、
フォームの管理画面から「回答」タブへ。
そして「…（縦）」ボタンメニューから、
「新しい回答についてのメール通知を受け取る」
をクリックすれば完了です。
フォームと同じGoogleアカウントのGmailに
「フォーム「お問い合わせフォーム」に新しい回答があります。」
という件名のメール通知が届くようになります。
WordPressブログなら『Contact Form 7』
「WordPressでブログを作成した人は
たいていコレを使っている！」
それが『Contact Form 7』プラグインです。
当サイトでもこのプラグインで
お問い合わせフォームを使っています！
（当サイトのお問い合わせフォームはこちら）
▼こんなフォームが作れます。
▼回答はこのようにメールで受信できます。
- 『Contact Form 7』の気になる注意点
-
- スパムが届きやすいので、対策が必要
- 回答を送信するとき、確認画面をはさまない
※スパム対策についてはこちら
Contact Form 7の使い方
Contact Form 7を使った
お問い合わせフォームの作り方は
少々複雑なので、順番に説明していきます！
プラグインをインストールしよう
WordPress管理画面より、
プラグイン新規追加メニューで
「Contact Form」と検索します。
一番上に富士山のアイコンが目印の
該当プラグインがヒットしますので、
インストールして有効化します。
有効化したら、管理画面の左サイドバーに
「お問い合わせ」メニューが出現します！
さっそく「お問い合わせ」メニューから
「コンタクトフォーム」をクリック。
ここから、フォームの項目や
自分への通知メールの設定などをしていきます。
フォームの項目を設定しよう
「コンタクトフォーム」をクリックすると、
こんな画面が出てきます。
お問い合わせフォームは複数つくれるのですが、
ここには作ったフォームの一覧が並ぶのです。
とりあえず、まずは１個しか作らないと思うので気にせず……
デフォルトで用意されている「コンタクトフォーム 1」を
クリックして編集していきます。
クリックすると、
「フォーム」「メール」「メッセージ」が
それぞれ編集できます。
（「その他の設定」はとくにいじりません。）
まずは「フォーム」から順に
カスタマイズしていきましょう！
デフォルトではこのように、
「お名前」「メールアドレス」
「題名（件名）」「メッセージ本文」
が項目として設定されています。
項目が多いと、お客さんにとって
お問い合わせのハードルがあがってしまうので、
項目は最低限にしぼるといいです。
（なのでアネオトは「題名」をナシにしました！）
また、スムーズにお問い合わせしやすいように、
（入力で迷いにくいように）
丁寧にご案内してあげるといいです。
たとえば、お名前のところに
「本名じゃなくてハンドルネームでOK」
という旨を添えたり。
メールアドレスのところに
「このメールアドレス宛に返信しますね」
という旨を添えたりです。
というわけで、例ではこんなふうに書き換えました。
※送信前の確認チェックボックスをつけておこう
Contact Form 7 で作ったフォームは、
「送信」ボタンを押した瞬間、
確認画面をはさまずに送信されてしまいます。
ちょっとビックリしちゃうので、
送信前の心の準備＆セルフチェックをしていただくために、
「この内容でよろしければチェックをつけてください」
というワンクッションを入れるのがおすすめです。
「承諾確認」ボタンを押すと作成できます。
図のように、「同意条件」には
「内容確認してOKならチェックつけてね～」の旨を。
そして「オプション」の任意選択はナシにします。
このチェックを外せば、
任意選択ではなく必須選択になります。
つまり「このチェックをつけないと送信できない」
システムにすることができるのです。
というわけで、承諾確認項目を
送信ボタンの直前に挿入してみました。
メールの設定をしよう
次に「メール」タブに移動します。
デフォルトでデータが入っていますが、
一部書き換える必要があるので
確認していきましょう！
| 送信先 | お問い合わせメッセージを受信するための、 自分のメールアドレスを入力します。 |
|---|---|
| 送信元 |
[your-name]を入れれば、実際のメールでは
（<wordpress@~~>の部分は、いじりません） |
| 題名（件名） |
自分に届くメールの件名を自由に設定できます。
「【自分のブログ名】（お客様のお名前）からのお問い合わせ」 |
| 追加ヘッダー |
Reply-to: [your-email]が入っていれば、
つまり、すんなり返信しやすくなります。
（これがないと宛先が空白になるので、 |
| メッセージ本文 |
自分に届くメールの内容を編集できます。
お客様のお名前[your-name]と |
実際に自分でテスト送信してみて、
どんなふうにメールが送られるのか
確認してみましょう！
- この設定は、お客さんにも見られちゃうの？
-
メッセージを送信したお客様には
自動返信メールは届きません。このメール設定で入力した内容は
お客様には見られないので、
自分にとってわかりやすければOKです。ただし、返信するときに
「メッセージ本文」の内容は
引用として入ってしまうので注意！返信時に毎回、引用を消す手もありますが、
面倒なので「メッセージ本文」の内容は
お客様にも見られていい書き方にしておくとラクです。
メッセージの設定をしよう
「メッセージ」タブに移動すると、
お客様が入力するときに表示される
さまざまな文章を編集することができます。
ここはお好みで印象のいい文章にすればOKです。
たとえば、メッセージ送信完了後に出てくる文章には
「ありがとうございます」のお礼といっしょに
「お返事するまで待っててね」という一言を入れるなど、
少しあたたかみを入れるといいですね！
ここまでできたら、設定を保存して完了です。
今までの設定は、「フォーム」を作っただけで、
「ページ」を作ったわけではないんです。
なので最後に、今回作ったフォームを
ブログの固定ページにはりつけて表示させます！
お問い合わせフォームを固定ページに設置しよう
作ったフォームのタイトル下に
ショートコードが表示されるので、
これをコピーします。
そして、フォームを設置したい場所に貼り付けます！
今回の例では、「お問い合わせフォーム」という
新規固定ページを作ってそこに貼り付けますが、
他にも記事やサイドバーなど、任意の場所に貼れます。
さらに、フォームの上下に
案内文や注意事項を添えると親切です。
これで保存すると、
こんな見た目のページができました！
お使いのWordPressテーマによって
フォームの見た目は変わりますが、
CSSを使えばデザインもお好みに編集できます。
迷惑メール（スパムメール）が届くようなら……
英文や中文などのスパムメールが
届くようになってしまったら、
届かないように対策する方法がありますので、
こちらの記事を参考になさってください！
長かったですが、最後までお疲れ様でした！
お問い合わせフォームの
メリットを最大限に活用して、
読者さんの希望になるブログを作りましょう！
最強のお問い合わせフォームの作り方・考え方の
全知識をこちらにまとめてありますので、
あわせて参考にしてみてください。
ライフワークの始め方ガイドを準備中！
あなたにとっての趣味のような仕事
略して「趣味ビジネス」を実際に作ろう！
（オープンまで楽しみにお待ちくださいませ）
