すーまにあ

楽しいセミリタイアを目指すあなたを応援するブログ

だれでも簡単!はてなブログにお問い合わせフォームを作成・設置しよう!

f:id:su-man:20181231182311j:plain

 こんにちは、兼業投資家すーまんです。

 はてなブログに、お問い合わせフォームを設置したいけど、簡単に作成・設置する方法ないかしら?と、お悩みのあなたに、簡単に作成・設置する方法を紹介したいと思います。

 その前に、Googleアカウントで事前にログインしておいてくれよな!( ˘•ω•˘ )

おすすめのお問い合わせフォームは

 無料かつ簡単に作成・設置できる、Googleフォームをおすすめします。

 というか、これしかわからないから何も聞かないでくれ!( ˘•ω•˘ )

www.google.com

お問い合わせフォームを作成しよう!

 Googleフォームを使うを選択すると、下の画面になるので①空白を選択する。

f:id:su-man:20190209172723p:plain

(出典)Google

タイトルと説明分を入力しよう!

 下の画面になるので、①無題のフォームに問い合わせと入力します。

 ②フォームの説明には、にかありましたらこちらからこちらからご連絡ください。とでも入力しましょう。

 単なる、お問い合わせフォームの説明なので、わかればいいぞ( ˘•ω•˘ )

f:id:su-man:20190209182720p:plain

(出典)Google

名前入力欄を作成しよう!

 次は、①無題の質問に名前入力し、②ラジオボタンを選択、記述式に変更します

 右下の③必須を選択したら、④コピーを作成を選択しましょう。

 ここから先は、ほぼコピペ作業が続くからサクッと終わらせよう!( ˘•ω•˘ )

f:id:su-man:20190209183108p:plain

(出典)Google

メールアドレス入力欄を作成しよう!

 次は、①お名前にメールアドレスと入力し、②右下の点を選択、その中の回答の検証を選択します。

 ③をテキストに変更し、④をメールアドレスに変更したら、⑤コピーを作成を選択しましょう。

f:id:su-man:20190209185151p:plain

(出典)Google

件名入力欄を作成しよう!

 次は、①メールアドレスに件名と入力し、②右下の点を選択、回答の検証のチェックを外します。

 チェックを外したら、また③コピーを作成する。

f:id:su-man:20190209201546p:plain

(出典)Google

本文入力欄を作成しよう!

 次は、①件名に本文と入力し、②記述式を選択、段落に変更します。

f:id:su-man:20190209203123p:plain

(出典)Google

メールの通知設定をしよう!

 ①回答タブを選択し、②右の点を選択、新しい回答についてのメール通知を受け取るを選択する。

 最初は、メール通知設定してなくて送信テストしても届くはずもなく、途方に暮れて悩んだのもいい思い出さ…。( ˘•ω•˘ )設定し忘れ注意だよ!

f:id:su-man:20190209205305p:plain

(出典)Google

残りの設定もしよう!

 ①右上の点を選択、設定を選択し②プレゼンテーションを選択します。

 ③のチェックを外し、④確認メッセージにはお問い合わせありがとうございました。とでも入力しておきましょう。

 この確認メッセージとは、メールを送ったときに表示されるメッセージのことな!( ˘•ω•˘ )

 すべて終わったら、⑤保存して作成完了です。

f:id:su-man:20190209211546p:plain

(出典)Google

ブログに貼り付けよう!

 送信方法から①右上の紙飛行機を選択、②を選択し③URLを短縮にチェックをいれて、URLを④コピーする。

 3つある送信方法から右のやつを選択すると、HTMLコードも取得できるけど面倒なので、今回はやめておくよ!( ˘•ω•˘ )

f:id:su-man:20190209223405p:plain

(出典)Google

 はてなブログから、デザイン→⑤カスタマイズ⑥サイドバー⑦リンクの編集画面にする。

 ⑧タイトルはお問い合わせと入力し、さっきコピーした⑨URLを貼り付けて⑩適用する。

 最後に、⑪変更を保存するを選択して設置完了です。

f:id:su-man:20190209231257p:plain

(出典)Google

おわりに

 今回は、リンク欄にお問い合わせを貼ったけど、こだわる方はグローバルメニューに貼るとより、スッキリとしておすすめです。

 その他にも、記事としてHTMLをHTML編集で貼り付けるのもいいかもしれません。

 また、わかりやすく説明方法にもこだわってみましたが、いかがだったでしょうか?

 この記事が生活向上の参考になれば幸いです。