アメブロ初心者さんでもわかりやすい！お問い合わせフォームの設置の仕方〜「フォームズ」無料版〜

ブログを始めて、何かを発信していきたい、と思ったときにまず必要となるのが、お問い合わせフォームを設置することですよね。

みんなどうやって
お問い合わせフォームを作っているんだろう？
初心者の私でもできるのかな？

大丈夫ですよ♪
この手順どおりに進んでいけば
立派なお問い合わせフォームが
ブログの記事の中に設置できますよ♪

お問い合わせフォームにはいろいろとあるのですが、ここでは、無料で設置することができて、しかも簡単に作れるのに機能がしっかりしている「フォームズ」のお問い合わせフォームを作ってみましょう。

このとおりに進めていけばできちゃうので、ぜひ、作ってみてください。

仕上がりはこんな感じになります。

素敵ですよね。

スマホでも綺麗に表示されますよ。

ちなみに、「お申し込みフォーム」を作成したい場合は、こちらを参考にしてください。

お問い合わせフォームの作り方

それでは、作っていきましょう。

こちらからフォームズのサイトにアクセスしましょう。

フォームズホームページ

作成画面に入る

トップページからメールアドレスを入力できるようになっていますので

お客様とやりとりをするメールアドレスを入力して、「メールフォームを作る」をクリックしましょう。

そうすると、最初の画面が出てきます。

この画面では、次のことを設定していきます。

するとこんな画面が出てくるので、左上の「フォーム表示」をクリックしてみましょう。

「フォーム表示」をクリックすると、現在作成中のフォームを見ることができます。

この時点では、こんな風になっていて、このままでも即、使うことができます。

要らない項目を消す

このままでも良いのですが、ちょっと調整しましょう。

一番上にある「こちらからメッセージをお送りください。」の文字は消して良さそうですね。

なので、左上、メインメニューの「❶こちらからメッセージをお送りください。」をクリックします。

「削除」ボタンをクリックして消しましょう。

これで、シンプルなお問い合わせフォームの基本の形ができました。

デザインを変更する

もう少し整えましょう。

左の項目から「デザイン設定」をクリックしてみましょう。

続いて「テーマ」をクリックしてみましょう。

いろいろなデザインが出てくるので、好きなデザインを選びましょう。

好きなデザインを選んだら、「現在の設定で更新する」をクリック。

上部に「終了するにはメニュー最後の保存を行います。」と赤い文字が出てくるのですが、その前に、「自動返信メール」の設定をしたい方は、自動返信メールの設定をしてみましょう。
（自動返信メールを設定しなくても良い方は、この項目を飛ばしてオッケーです。）

自動返信メールを設定する

「メインメニュー」をクリックしてメインメニューへ戻りましょう。

「メール設定」→「自動返信メール」をクリック。

「自動返信メールを有効にする」にチェックを入れて

を、普通にメールを送信する時の要領で入力します。

メール本文を入力する時に、「差込キーワード」を使えば、お客様のお名前を表示することができます。

このように「###tkna001###さま」と入力しておくと、お客様に送信されるメールにはちゃんと

その部分に「田中さま」「鈴木さま」と、いただいたお名前が表示されます。

設定しなくても構いませんが、受け取る方は、名前が入っているとなんとなく嬉しいですよね。

差出人名、メール件名、メール本文を入力し終わったら

忘れずに「更新する」ボタンをクリックして変更内容を保存しましょう。

さあ、もうひといきです！

お客様がお問い合わせを送信してくださった瞬間に表示される文面を調整しましょう。

投稿完了ページを作成する

「投稿完了ページ」とは、お客様がお問い合わせのメッセージを送信してくださった時の「受付完了画面」のことです。

この画面の文章は、初期設定では「ありがとうございました。」になっています。

それで良いならば、そのままで大丈夫です。

ちょっとそっけないな、と感じるならば、編集しましょう。

では、編集の仕方です。

「投稿完了/外部連携」→「投稿完了ページ」をクリック。

デフォルト（最初の設定）は「ありがとうございました。」になっていますので

自分の言葉に書き換えましょう。

自動返信メールを使わずに、こちらにお客様へのメッセージを表示してもオッケーだと思います。

投稿完了メッセージを作成し終わったら、忘れずに「更新する」ボタンをクリックして変更内容を保存しましょう。

作成したフォームを保存する

作成したフォームを「保存」するには

メインメニューの最後にある「フォーム保存」ボタンをクリックすることが必要です。

するとこのような画面が出てきますので

「保存する」ボタンをクリック。

これで、作成したフォームが無事に保存できました。

「フォームID」はこのフォームを編集する時に必要になりますので、必ず後からわかるようにメモして控えておきましょう。

「自動振分けURL（レスポンシブ）」のアドレスもコピーしておきましょう。

これでフォームの作成は完了です。

続いて、このフォームを、アメブロに設置していきましょう。

お問い合わせフォームをアメブロに設置する

お問い合わせフォームをアメブロに設置するために必要なのは、記事にフォームのリンクを貼り付けることです。

そのやり方をご説明します。

フォーム保存完了画面の「自動振分けURL（レスポンシブ）」のアドレスをコピーします。

これをアメブロに貼り付けます。

アメブロの「ブログを書く」ページの編集画面に

「お問い合わせフォーム」と書き込みましょう。

その「お問い合わせフォーム」という文字を選択して

選択したまま「リンク」ボタンをクリック。

そうして出てきたポップアップのURL欄に

コピーしておいたフォームのURLを貼り付けて

「リンクを挿入する」をクリック。

これで、リンクを貼ることができました。

公開されたアメブロ記事からリンクをクリックすると

素敵なお問い合わせフォームが開きます。

テストをしてみる

１度、テストをしてみると良いですね。

お客様の立場に立って、自分のアメブロ記事から問い合わせをしてみましょう。

さあ、バッチリでしょうか？

何かうまくいかないことなどあれば、コメントでご連絡くださいね。

うまくいけば、あとは、お客様とメールでやりとりしていくだけです。

しっかりとお客様とコミュニケーションを取ることができますように。

お客様からのお問い合わせがくるのが楽しみですね。

作成済みのフォームを編集したい時は

こうして作成したお問い合わせフォームを編集したい時には

「フォームズ」のトップ画面から「フォーム修正」に入ると修正することができます。

その際、控えていた「フォームID」と最初に入力した「パスワード」が必要です。

一つだけ気をつけたいのは、このお問い合わせフォームは、365日間利用がなければ自動的に削除されてしまうこと。

そこだけ気をつければ、便利に使うことができておすすめです。

お申し込みフォームを作りたい場合はこちらを参考にしてください。

わからないことがあるときは

わからないことなどがあれば、「ブログ初心者のためのアメブロ講座」を行っていますので、お気軽にご連絡くださればと思います。