【図解】はてなブログに問い合わせフォームを設置

こんにちは。ちゃん@cha076085です。

 

このブログにも問い合わせフォームを設置したので、やり方を図解で紹介します!

 

とっても簡単に作成できるので、まだ設置されていない方はオススメです!

グーグルフォームについて

今回はグーグルフォームというサービスを利用します!

  • 無料で利用可能
  • 品質の高い問い合わせフォームが作成可能
  • 問い合わせの受付時にはメールでもお知らせ

非常に使いやすい問い合わせフォームが簡単に作成できます! 


グーグルフォームを利用するにはグーグルアカウントの取得が必要です。

グーグルの様々なサービスを活用するためにはアカウントが必須です!取得は無料ででき、必ず活用できるのでまだ登録されていない方は登録を済ませておきましょう。


実際に作ってみよう

こちらからグーグルフォームにアクセスしてください。

www.google.com

画面中央の「Googleフォームを使う」をクリックします。

f:id:chan076085:20190709125910p:plain


「新しいフォームを作成」より「空白」をクリックします。

f:id:chan076085:20190709130350p:plain

画面中央の「無題のフォーム」となっている部分を「お問い合わせ」に変更します。

f:id:chan076085:20190709130505p:plain

 

1.画面中央右側の「ラジオボタン」となっている部分をクリックして、一番上にある「記述式」を選択します。

f:id:chan076085:20190709130615p:plain

3.画面中央左側の「無題の質問」となっている部分を「お名前」に変更 します。

4.右下の「必須」をクリックしましょう。

f:id:chan076085:20190709130809p:plain

 「必須」にチェックを入れることで回答の必須項目となります。

 

4.右側プラスマークをクリック(質問の追加)します。

f:id:chan076085:20190709131010p:plain

上記1~4の繰り返しで質問を追加することができます。

 

「お問い合わせ内容」は「記述式」ではなく「段落」に設定するのをお忘れなく!!

段落に設定することで長文の入力が可能となります。

f:id:chan076085:20190709131105p:plain

最小限の問い合わせフォームであれば、「お名前」「メールアドレス」「お問い合わせ内容」の3点で大丈夫です! 

その他追加項目として

  • ブログURL
  • メールアドレス(確認用)など自由に追加できます。
色に関する設定

f:id:chan076085:20190709131549p:plain

右上のパレットマークから色の変更ができます!自分のブログにあったカラーに変更しておきましょう。

回答受付メッセージの設定

右上の設定アイコンをクリックし、中央の「プレゼンテーション」をクリックします。

f:id:chan076085:20190709131721p:plain

「確認メッセージ」欄にメッセージを入力し、保存をクリックします。

f:id:chan076085:20190709131747p:plain

今回は「お問い合わせいただきありがとうございました」と入力しました。

「確認後回答させていただきます」

「◯日以内に回答させていただきます」などにしておきましょう。

問い合わせがあった時にメールで通知を受け取る

回答をクリックし、右上のスプレッドシートの作成(緑色のマーク)をクリックします。

f:id:chan076085:20190709132119p:plain

 スプレッドシートが自動で作成されますので「ツール」から「通知ルール」を選択します。

f:id:chan076085:20190709140024p:plain
「ユーザーがフォームを送信したとき」と通知回数を選択し、保存をクリックして閉じます。

これでお問い合わせがあった場合にメールで通知を受け取ることができます。

 

プレビューで最終チェック

右上中央、目のアイコンをクリックしプレビューできます。

f:id:chan076085:20190709132813p:plain

誤字等がないか確認しておきましょう!

 フォーム自体はこれで完成しました!次はブログに貼り付けていきます。

ブログに貼り付け

右上の送信をクリックし「< >」このマークを選択します。

f:id:chan076085:20190709133050p:plain

 コードが表示されますので、右下のコピーをクリックし、コピーします。

 

はてなブログに移動し「ダッシュボード」ページの左側「固定ページ」をクリックします。

表示された「ページを作る」のURL入力欄に「contact」と入力し「ページを作る」をクリックします。

f:id:chan076085:20190709133501p:plain

 いつもの記事投稿画面が表示されると思いますので、タイトルに「お問い合わせ」を入力します。

その後、上側「HTML編集」に移動し、先ほどコピーしたHTMLを貼り付けます。

 

プレビューに移動し、フォームが作られていることを確認してから左下「公開する」をクリックしましょう。

f:id:chan076085:20190709133650p:plain

公開したお問い合わせフォームページのリンクをコピーしておきましょう。

お問い合わせページをサイドバーに表示する 

※使用しているブログデザインにより設定を適用できない場合があります。

「ダッシュボード」画面から「デザイン」、工具マークの「カスタマイズ」・「サイドバー」をクリックします。

f:id:chan076085:20190709134134p:plain
「モジュールを追加」をクリックし左側から「リンク集」を選択します。

 

タイトル欄「このサイト(ブログ)について」

リンク欄(左)「お問い合わせ」

以上2点を入力し、先ほど公開した「お問い合わせ」のURLを貼り付けます。

 

左下の「適用」を押すと、ブログのサイドバーに「お問い合わせ」欄が出現します!

f:id:chan076085:20190709134350p:plain

 これで作業は終了です!!プライバシーポリシーについてもサイドバーに追加してみました。

 

こちらのページを参考に作業しました。非常にわかりやすい解説です!!!

setsuyakufufu.hatenadiary.jp

uxirisu.tokyo

 

サイトに関する意見を受け付ける場合や、収益化の場合、スポンサー依頼など、問い合わせフォームは様々なところで活用できます。

作っておいて損はありませんので、まだ作っていない方はぜひ作ってみてください。

 

お読みいただきありがとうございました。

にほんブログ村 ライフスタイルブログへ
にほんブログ村