お問い合わせフォームを無料で作成!おすすめの作り方3選

Pocket

無料ブログでもWordPressでも、無料でカンタンに作るお問い合わせフォーム

 

日々の作業やお勉強、お疲れさまです!

元社畜ゲーマー姉弟のアネオトです。

 

 

個人ブログにお問い合わせフォームを
設置する方法をご紹介します。

 

 

これらの中からお好みのものを使うといいでしょう!

 

 

icon-check-square-o 無料のフォーム作成ツールでおすすめのもの

フォームズ

Google フォーム

 

 

icon-check-square-o WordPressをお使いなら、高機能プラグイン

『Contact Form 7』

 

 

1つずつ詳しく見ていきます。

 

どんなブログでも使える『フォームズ』

 

フォームズ』は無料なのに高機能で、
あらゆる人におすすめのサービスです。

 

 

操作方法も直感でわかりやすいですし、
丁寧な作り方ガイドもついています。

 

 

 

▼こんなフォームが作れます。

 

 

フォームズで作ったお問い合わせフォームのサンプル

 

 

 

▼回答はこのようにメールで受信できます。

 

 

フォームズに送られた回答をメールで受信したときのサンプル

 

 

 

 

 

Googleアカウントで管理できる『Google フォーム』

 

こちらは本来は「あなたの性別は?」
「この中で興味があるものはどれですか?」など
選択式のアンケートに適したツールなのですが……

 

 

メールアドレス入力項目も設定することで、
きちんとお問い合わせフォームの代わりになります。

 

 

 

▼Googleフォームで作った
お問い合わせフォームのサンプル

 

 

Googleフォームで作ったお問い合わせフォームのサンプル

 

 

デザインのカスタマイズは
背景色の変更くらいしかできませんが、
シンプルなので直感的に作成できる
とてもカンタンなフォームです!

 

 

 

icon-exclamation-triangle 『Google フォーム』の気になる注意点
  • 回答はメールでは届かず、管理画面から確認するスタイル
  • 回答を送信するとき、確認画面をはさまない

 

 

 

 

 

Googleフォームの始め方

 

まずこちらのページにアクセスします。

 

 

下記の画面がでますので
「パーソナル」プランの方から始めます。

 

 

Googleフォーム新規作成は、パーソナルプランを選ぼう

 

 

その後の操作は、割と直感的にできるので、
あまり困ることはないと思います。

 

 

 

「完成したフォームのURLをどこから見るのか」
が一見わかりにくいのですが……

 

 

それはこちらの目玉アイコン
「プレビュー」から見られます。

 

Googleフォームで作ったフォームの見方は、この目玉アイコンからプレビューすればOK

 

 

このプレビュー画面のURLを
お問い合わせフォームへのリンクとして
そのままブログに貼ればOK!

 

 

 

 

 

Googleフォームに寄せられた回答の確認方法

 

届いた回答は「回答」タブから確認できます。

 

 

すると「概要」タブがデフォルトで開きますが、
この画面はこれまでに届いた回答を総合した、
集計データ早見表になっています。

 

 

(アンケート集計に使うにはかなり便利なのですが、
お問い合わせの回答を見るには超見にくいです笑)

 

 

 

一人一人の回答を見るため、
「個別」タブへ移動しましょう。

 

 

Googleフォームに寄せられた回答は、個別タブから見よう

 

 

「個別」タブに入ると、このように
一人ずつ回答を確認することができます。

 

 

Googleフォームに寄せられた回答のサンプル

 

 

まずはご自分でテスト回答してみましょう!

 

 

 

 

回答の通知をメールで受信する方法

 

『Google フォーム』では
寄せられた回答は、メール形式では受信できず、
フォームの管理画面から確認することになります。

 

確認し忘れそうで心配ですよね。

 

 

そこで、回答があったらメール通知をする
設定にすることができます。

 

 

 

やり方はまず、
フォームの管理画面から「回答」タブへ。

 

 

そして「…(縦)」ボタンメニューから、
「新しい回答についてのメール通知を受け取る」
をクリックすれば完了です。

 

 

Googleフォームに回答があったときは、新しい回答についてのメールを通知するボタンをクリック

 

 

フォームと同じGoogleアカウントのGmailに
「フォーム「お問い合わせフォーム」に新しい回答があります。」
という件名のメール通知が届くようになります。

 

 

 

 

 

WordPressブログなら『Contact Form 7』

 

「WordPressでブログを作成した人は
たいていコレを使っている!」

 

それが『Contact Form 7』プラグインです。

 

 

当サイトでもこのプラグインで
お問い合わせフォームを使っています!

 

(当サイトのお問い合わせフォームはこちら

 

 

 

▼こんなフォームが作れます。

 

 

Contact Form 7プラグインを使って作ったお問い合わせフォーム

 

 

 

▼回答はこのようにメールで受信できます。

 

 

Contact Form 7プラグインを使って作ったお問い合わせフォームからのテストメール送信

 

 

 

icon-exclamation-triangle 『Contact Form 7』の気になる注意点
  • スパムが届きやすいので、対策が必要
  • 回答を送信するとき、確認画面をはさまない

 

 

 

※スパム対策についてはこちら

 

 

 

 

 

 

Contact Form 7の使い方

 

Contact Form 7を使った
お問い合わせフォームの作り方は
少々複雑なので、順番に説明していきます!

 

 

 

 

プラグインをインストールしよう

 

WordPress管理画面より、
プラグイン新規追加メニューで
「Contact Form」と検索します。

 

 icon-arrow-circle-down 

 

一番上に富士山のアイコンが目印の
該当プラグインがヒットしますので、
インストールして有効化します。

 

 icon-arrow-circle-down 

 

Contact Form 7をプラグイン一覧から検索して有効化し、設定メニューへ

 

有効化したら、管理画面の左サイドバーに
「お問い合わせ」メニューが出現します!

 

 icon-arrow-circle-down 

 

さっそく「お問い合わせ」メニューから
「コンタクトフォーム」をクリック。

 

 

ここから、フォームの項目や
自分への通知メールの設定などをしていきます。

 

 

 

 

フォームの項目を設定しよう

 

「コンタクトフォーム」をクリックすると、
こんな画面が出てきます。

 

 

Contact Form 7のコンタクトフォーム管理画面

 

 

お問い合わせフォームは複数つくれるのですが、
ここには作ったフォームの一覧が並ぶのです。

 

 

とりあえず、まずは1個しか作らないと思うので気にせず……

 

 icon-arrow-circle-down 

 

デフォルトで用意されている「コンタクトフォーム 1」を
クリックして編集していきます。

 

 icon-arrow-circle-down 

 

クリックすると、
「フォーム」「メール」「メッセージ」が
それぞれ編集できます。

 

(「その他の設定」はとくにいじりません。)

 

 

まずは「フォーム」から順に
カスタマイズしていきましょう!

 

 icon-arrow-circle-down 

 

Contact Form 7の編集画面、フォームの項目のデフォルト状態

 

 

デフォルトではこのように、
「お名前」「メールアドレス」
「題名(件名)」「メッセージ本文」
が項目として設定されています。

 

 

項目が多いと、お客さんにとって
お問い合わせのハードルがあがってしまうので、
項目は最低限にしぼるといいです。

 

(なのでアネオトは「題名」をナシにしました!)

 

 icon-arrow-circle-down 

 

また、スムーズにお問い合わせしやすいように、
(入力で迷いにくいように)
丁寧にご案内してあげるといいです。

 

 

たとえば、お名前のところに
「本名じゃなくてハンドルネームでOK」
という旨を添えたり。

 

 

メールアドレスのところに
「このメールアドレス宛に返信しますね」
という旨を添えたりです。

 

 

というわけで、例ではこんなふうに書き換えました。

 

 

Contact Form 7の編集画面の、フォームの項目をカスタマイズ

 

 

 

 

※送信前の確認チェックボックスをつけておこう

 

Contact Form 7 で作ったフォームは、
「送信」ボタンを押した瞬間、
確認画面をはさまずに送信されてしまいます。

 

 

ちょっとビックリしちゃうので、
送信前の心の準備&セルフチェックをしていただくために、
「この内容でよろしければチェックをつけてください」
というワンクッションを入れるのがおすすめです。

 

 

「承諾確認」ボタンを押すと作成できます。

 

 icon-arrow-circle-down 

 

Contact Form 7の編集画面の、フォームの項目に確認ボタンを追加

 

図のように、「同意条件」には
「内容確認してOKならチェックつけてね~」の旨を。

 

 

そして「オプション」の任意選択はナシにします。

 

このチェックを外せば、
任意選択ではなく必須選択になります。

 

つまり「このチェックをつけないと送信できない」
システムにすることができるのです。

 

 icon-arrow-circle-down 

 

というわけで、承諾確認項目を
送信ボタンの直前に挿入してみました。

 

 

Contact Form 7の編集画面の、フォームの項目に確認ボタンを追加したあとの画面

 

 

 

 

メールの設定をしよう

 

次に「メール」タブに移動します。

 

 

デフォルトでデータが入っていますが、
一部書き換える必要があるので
確認していきましょう!

 

 

Contact Form 7のメール送信設定

 

 

送信先 お問い合わせメッセージを受信するための、
自分のメールアドレスを入力します。
送信元

[your-name]を入れれば、実際のメールでは
そこがお客様のお名前に変わります。

 

(<wordpress@~~>の部分は、いじりません)

題名(件名)

自分に届くメールの件名を自由に設定できます。

 

「【自分のブログ名】(お客様のお名前)からのお問い合わせ」
など「あ!ブログにお問い合わせきた!」と
自分にとってわかりやすい件名にしておきます。

追加ヘッダー

Reply-to: [your-email]が入っていれば、
実際に届いたメールに返信をするとき、
お客様のメールアドレスが自動で宛先に入ります。

 

つまり、すんなり返信しやすくなります。

 

(これがないと宛先が空白になるので、
お客様のメールアドレスをコピペで
宛先に入れて返信しないといけません)

メッセージ本文

自分に届くメールの内容を編集できます。

 

お客様のお名前[your-name]
お客様のメールアドレス[your-email]
お客様からのメッセージ内容[your-message]
自分にとって見やすいように書けばOK!

 

 

実際に自分でテスト送信してみて、
どんなふうにメールが送られるのか
確認してみましょう!

 

 

 

icon-question-circle この設定は、お客さんにも見られちゃうの?

メッセージを送信したお客様には
自動返信メールは届きません。

 

 

このメール設定で入力した内容は
お客様には見られないので、
自分にとってわかりやすければOKです。

 

 

ただし、返信するときに
「メッセージ本文」の内容は
引用として入ってしまうので注意!

 

 

返信時に毎回、引用を消す手もありますが、
面倒なので「メッセージ本文」の内容は
お客様にも見られていい書き方にしておくとラクです。

 

 

 

 

メッセージの設定をしよう

 

「メッセージ」タブに移動すると、
お客様が入力するときに表示される
さまざまな文章を編集することができます。

 

 

ここはお好みで印象のいい文章にすればOKです。

 

 

たとえば、メッセージ送信完了後に出てくる文章には
「ありがとうございます」のお礼といっしょに
「お返事するまで待っててね」という一言を入れる
など、
少しあたたかみを入れるといいですね!

 

 

Contact Form 7のメッセージ表示設定

 

 icon-arrow-circle-down 

 

ここまでできたら、設定を保存して完了です。

 

 

 

今までの設定は、「フォーム」を作っただけで、
「ページ」を作ったわけではないんです。

 

 

なので最後に、今回作ったフォームを
ブログの固定ページにはりつけて表示させます!

 

 

 

 

お問い合わせフォームを固定ページに設置しよう

 

作ったフォームのタイトル下に
ショートコードが表示されるので、
これをコピーします。

 

 

Contact Form 7のタグをコピーペースト

 

 icon-arrow-circle-down 

 

そして、フォームを設置したい場所に貼り付けます!

 

 

今回の例では、「お問い合わせフォーム」という
新規固定ページを作ってそこに貼り付けますが、
他にも記事やサイドバーなど、任意の場所に貼れます。

 

 

Contact Form 7のタグをお問い合わせフォーム用の固定ページに貼り付け

 

 icon-arrow-circle-down 

 

さらに、フォームの上下に
案内文や注意事項を添えると親切です。

 

 

お問い合わせフォームの上下に案内文をいれた図

 

 icon-arrow-circle-down 

 

これで保存すると、
こんな見た目のページができました!

 

 

お問い合わせフォームの上下に案内文をいれた図

 

お問い合わせフォームの上下に案内文をいれた図

 

 

お使いのWordPressテーマによって
フォームの見た目は変わりますが、
CSSを使えばデザインもお好みに編集できます。

 

 

 

 

 

迷惑メール(スパムメール)が届くようなら……

 

英文や中文などのスパムメールが
届くようになってしまったら、
届かないように対策する方法がありますので、
こちらの記事を参考になさってください!

 

 

 

 

 

 

長かったですが、最後までお疲れ様でした!

 

 

お問い合わせフォームの
メリットを最大限に活用して、
読者さんの希望になるブログを作りましょう!

 

 

 

最強のお問い合わせフォームの作り方・考え方の
全知識をこちらにまとめてありますので、
あわせて参考にしてみてください。

 

こっそりプレゼントをお渡ししてます!
(無料メール講座)

 

 

  • 好きなことを我慢して、やりたくないことばかりの日々
  • 昔憧れた大人にはほど遠く、人生を諦めかけてる
  • 挑戦したいことがあっても「どうせ私には……」と手が出せない
  • 毎日すり減っていくような感覚、とにかく人生を軌道修正したい
  • 放課後のような自由な時間を手に入れたい!

 

 

そんなあなたのために、
3万円相当の【趣味×ネットでお金を生み出すガイドブック】
特別に無料でこっそりプレゼント中です!

 

 

心も体も社畜に染まっていたアネオトでしたが、
『趣味』や『興味』を活かして
ネット上で自動で収入が入る仕組みを作りました。

 

 

「会社にも行かない」
「自由なタイミングで仕事をする」
「それ以外は好きなことを楽しむ」
「むしろ好きなことが仕事の代わりになる」

 

そんな自由なライフスタイルへ切り替えられたので、
その方法をすべてお伝えします!

 

 

このメール講座をしっかり読んで行動に移していけば、
人知れずこっそり現実的に夢を叶えていけますので、
ぜひ参考にしてみてください。

 

 

下の画像をクリックで詳しい内容をご覧いただけます↓

自由化メール講座(無料)はこちら。趣味や好きなことをお金に変えるひでんワザをお届け!特別限定3万円相当のプレゼントつき!今から理想の人生に軌道修正していくやり方すべてお伝えします!

こちらからでも無料講座に登録できます

※icloud、hotmail、携帯メール(au、softbank、docomo)は
スパム判定が厳しいため、メールが届かないことが多いようです。

この記事が参考になったら、
こちらのボタンをクリックしていただけると
「いいね」の代わりとなり、励みになります!

▼ 両方クリック ▼

人気ブログランキング
にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村

また、こちらのランキングに参加中の
他のお役立ちブログも覗いてみると参考になりますよ♪

Pocket

あわせて読みたい