hatoのゼロから始める副業ノートブック

仕事とプライベートの合間で稼ぐ「副業・小遣い稼ぎ」に関しての備忘録

30分で完成 はてなブログにお問合せフォーム設置 解説-hato

こんばんは。

 

 

hatoです。

 

 

本日は「お問合せフォーム」を作成した後ブログサイトに設置していきます。

 

この記事は「Googleフォーム」で「問い合わせフォーム作成」後、

はてなブログに設置するよう画像付きで解説しています。

所要時間:30分

 

 

 

 

お問合せフォームとは

これからブログ運営をしていくにあたって
読者の方や企業の方から連絡をいただくときに


こちらで用意した項目に入力してもらいメールで連絡をしていただくというものです。

 

「Googleアドセンス」審査基準の一つですので

 

アフィリエイトをするなら用意必須になります。

 

 

 

 

 

お問合せフォームの作成

1、作成する前に用意するもの

  • 「Googleアカウント」

    Googleアカウント作成はこちらで作れます。

    所要時間:5分程度

    お問合せフォーム用のメールは不特定の方から受け付けることになるので

    スパム対策として別のアカウントを用意することをおススメします。

 

 

  • 「Google Chrome ウェブブラウザ」

    Google Chrome ウェブブラウザはこちらからダウンロードできます。

    所要時間:5分程度

     お問合せフォームは「Google Chromeウェブブラウザ」上で作成するのですが、

    それ以外のブラウザで作成したときに、表示がずれる可能性があるそうです。

 

 

 

2、作成手順の解説

 ①「Google Chromeウェブブラウザ」上から

  こちら⇒「Googleフォーム」

 

 ②「Googleフォームを使う」をクリックします。

f:id:hato4268:20190803185837p:plain

 

  ③新しいフォーム作成の「空白(+)」をクリックします。

f:id:hato4268:20190803190220p:plain

 

 ④フォーム名「無題のフォーム」 ⇒ 「お問い合わせ」に変更します。

f:id:hato4268:20190803190832p:plain

 

 ⑤「無題の質問」⇒ 「お名前」に変更します。

 次に「ラジオボタン」をクリックして一覧が出てくる中から「記述式」を選択します。

 右下の「必須」に関して、入力必須にしたい場合はチェックを入れます。

f:id:hato4268:20190803191638p:plain

f:id:hato4268:20190803192046p:plain

f:id:hato4268:20190803193230p:plain

 

 ⑥ ⑤と同様に「メールアドレス」「件名」「本文」の項目を追加していきます。

  項目追加したら右上の「歯車(設定)」をクリックします。

 注意点:「本文」を作成するときは「段落」を選択する様にお願いします。

f:id:hato4268:20190803194227p:plain

f:id:hato4268:20190803194947p:plain


 ⑦設定していきます。

  まずは「プレゼンテーション」のタグをクリックします。

  次に「別の回答を送信するためのリンクを表示」に入っているチェックを外します。

  最後に「確認メッセージ」を入力します。

  メッセージを送信した際にお返しするメッセージになります。

  「お問い合わせいただきありがとうございました」など

 

  設定が終わったら右下の「保存」をクリックします。

f:id:hato4268:20190803195810p:plain

f:id:hato4268:20190803200055p:plain

 

ここまでで「お問い合わせフォーム」が完成しました。

 

このまま利用してもよろしいのですが、

以下の方法で「背景色」や「フォント」などの変更ができますのでこちらもご覧ください。

 

 

3、作成した「お問い合わせフォーム」のテーマを変更する

 ①右上の「パレットマーク(テーマ)」の中から

  「背景色」「フォント」を変更することが出来ます。

  ご自身のブログに合わせた「お問い合わせフォーム」変更しましょう。

f:id:hato4268:20190803201341p:plain

f:id:hato4268:20190803202348p:plain

 

 

4、「回答設定」方法の解説

 ①回答のタグを選択します。

f:id:hato4268:20190803203726p:plain

 

 ②画像右上の「点3つ」部分をクリックします。

f:id:hato4268:20190803204315p:plain

 

 ③「新しい回答についてのメール通知を受け取る」をクリックします。

f:id:hato4268:20190803204556p:plain

 

これで「回答があった場合メール通知を受けることが出来るようになりました。」

 

 

 

 

 

 

はてなブログに設置する方法の解説

 今度ははてなブログに「お問い合わせフォーム」を設置する方法です。

 

1、「HTMLを埋め込む」コードをコピーします。

 右上の「送信」をクリックします。

 「< >」のタグをクリックします。

 最後にコピーをクリックすることで「HTML埋め込み」コードをコピーすることができます。

f:id:hato4268:20190803211032p:plain

 

2、はてなブログの「お問い合わせ」ページの作成

 ①「ダッシュボード」>>「固定ページ」を選択

  • ページを作るの空白に「contact」を入力します。
  • 「ページを作る」をクリックします。

 ②タイトルに「お問い合わせ」を入力します。

  • 「HTML」のタグを選択します。
  • コピーしたHTMLコードを貼り付けします。
  • 最後に左下の「公開する」をクリックして完了です。

   ※カスタムURLに入力することで「お問い合わせ」ページは

    固定ページとして作成されます。

f:id:hato4268:20190803222831p:plain

f:id:hato4268:20190803223609p:plain



 

これで「はてなブログの固定ページに「お問い合わせフォーム」を設置することが

できました。

あと設置させる位置は「グローバルメニュー」「フッター」「サイドメニュー」

ご自身のサイトにふさわしい場所に設置してください。

 

 

 

ブログ運営するなかで「お問い合わせフォーム」の他に

「プライバシーポリシー・免責事項」などの設置も必要となるので

 

こちらも是非合わせてお読みください。

www.hatonotebook.com

 

 

最後まで記事を読んでいただきありがとうございました。