ぱれっとLaBO

乙樹とみのる二人によるイラストのこと趣味のこと、少しでも誰かの役に立てるような事を書いてます。

ぱれっとLaBO

無料はてなブログにお問い合わせフォームを設置する方法

mail icon

 

私のブログ、お問い合わせフォームがなかったので設置してみました。

そのときの設置完了までを備忘録も兼ね、書いておきます。

 

 

 

 

フォームはGoogleのサービスで使える「Googleフォーム」を利用してます。

 

Googleアカウントを持っている。

が前提としてあるので、アカウントをお持ちでない方はまずGoogleアカウントを作るところからスタートです。

 

 

まず、Googleロームから、Googleフォームページへ行きます。

 www.google.com

 

 

 

フォームの新規作成

ページに入ったら、「Googleフォームを使ってみる」から新規作成します。

google form

 

google form

クリックすると、ウィンドウが表示されるので各欄を埋めます。

 

問い合わせフォームを作りたい場合は

上から、お名前、メールアドレス、件名、本文、となるとおもいます。

各項目は「質問を追加」で増やせます。

 

名前やメールアドレス、件名辺りは「記述式」に設定し、

本文は「段落」形式にしておくと良いでしょう。

 

各項目の右下に「必須」ボタンがあるので、必須項目にしたいものはこれをクリックすると印が付き、設定できます。

これでフォームの項目が出来ました。

 

 

設定ウィンドウ

Google form

 

次に右上にある、「設定」(歯車のアイコン)をクリックして

プレゼンテーション」タブの「別の回答を送信するためのリンクを表示」のチェックを外しておきます。

 

確認メッセージ:」は送信後に表示させるメッセージのことです。

「お問い合わせありがとうございました。」などと入れておくと良いでしょう。

最後に保存をクリックして完了です。

Google form

 

 

回答タブ

次に、フォームウィンドウの質問タブ横の「回答」タブを押して

設定ボタン(:点々三つのアイコン)をクリックして「新しい回答についてのメール通知を受け取る」にチェックを入れておくと、問い合わせがあった場合にメールに通知されます。

 

回答はまとめてスプレッドシートで見れたり、ダウンロードができるようになっています。

Google form

 

 

デザインカスタマイズ

Google form

設定ボタンの一番左で、デザインをカスタマイズすることができます。

ヘッダー画像テーマの色背景色フォントスタイル

が編集できます。

 

また、フォームの質問タブ内で画像や動画を追加することができます。

 

問い合わせフォーム以外の使い方をする場合、様々なシチュエーションに合ったフォームを作ることが可能です。

 

 

埋め込みタグ

全て設定し終わったら、

右上の送信ボタンを押すと「フォームを送信」のウィンドウが表示されます。

Google form

< >」のアイコンタブを押すとHTMLの埋め込みタグが出てくるので、

コピーします。

 

サイズなどもここで設定します。

 

コピーした埋め込みタグを、ご自身のブログに張り付けて終わりです。

テスト送信をしてちゃんと動作するか確認しましょう!

 

 

表示させる場所

調べてわかったのですが、

無料はてなブログの場合は記事を固定表示させられないので作ったフォームをどこに設置するか迷いました。

固定表示できるのははてなProのブログです。

 

そこで、はてなブログトップから設定ページへ行き、「基本設定」→「aboutページ編集」内の自由記述欄にHTML埋め込みタグを入れて表示させることにしました。

 

ただ、これだとせっかくのお問い合わせのページがブログ内のアイコンをクリックしてでないと表示できないので見つかりにくくなってしまいます。

 

なのでaboutページサイドバーのモジュールから「リンク」を追加し、そこにaboutページのリンクを張り付けて表示させる方法を取りました。

 

aboutページを書き込んでいるとこの方法は使いにくいかもですが、今のところはこれで使っていこうと思います。

 

 

他にも、記事作成ページで記事内に埋め込みタグを張り付け、過去記事として日付と時間を設定して投稿する。という方法もありだと思います。

これだと新着投稿になりません。

 *後日過去記事作成での設置に変更しました!

 

 

まとめ

以上が、私がお問い合わせフォームを設置するための設定方でした。

Googleフォームは使い方が多様で設定方法も簡単ですので手軽さがあります。

無料で利用でき、難しくないのでおススメします。

 

今回作った当ブログのお問い合わせはこちらです。

なにかございましたら、お気軽にご利用ください。

 

 team-twins.hatenablog.com

 

 

 



 -ストックイラスト-

PIXTA 
PIXTAいつき PIXTAみのる

Shutterstock 
Shutterstockいつき Shutterstockみのる

Adobestock 
Adobestockいつき Adobestockみのる

istock 
istockいつき istockみのる

photolibrary 
フォトライブラリーいつき フォトライブラリーみのる

123RF 
123RFいつき 123RFみほみのる

イラストAC 
イラストACいつき イラストACみほみのる

-Twitter-

Twitter@miho_minoru Twitter@1tsuki__


©2019 ぱれっとLaBO

 お問い合わせ / プライバシーポリシー