こしぞーのひとり情シス

Windows/仮想化の小規模環境を運用するリーマンの日々を綴っています。

[画像解説]はてなブログでお問い合わせフォームの作成(Googleフォーム)

f:id:bfx62324:20180805140347p:plain

はてなブログの自身のページにお問い合わせフォームを作成しました

問い合わせフォームは Googleフォーム で作成し、はてなブログの固定ページで 問い合わせフォームの作成 をしています

Googleフォームを使った問い合わせフォームの作成

Googleフォームに接続

Googleフォームでは Googleアカウント を使用します

など状況であればすでにGoogleアカウントは保有している状態なのでOKです

Googleアカウントにログインした状態で、Google検索やGmailなどを開きます
画面右上の アプリケーションランチャー(右上に9個の四角が並んでいるマーク) を選択して「もっと見る」をクリック

f:id:bfx62324:20180805135804p:plain

「さらにもっと」をクリック

f:id:bfx62324:20180805135816p:plain

すると、別のページに移動します
移動先のページを下の方にスクロールします

f:id:bfx62324:20180805135834p:plain

Googleフォーム」をクリック

f:id:bfx62324:20180805135849p:plain

これでGoogleフォームに接続できました

問い合わせフォームの作成

「新しいフォームの作成」から「空白」をクリック

f:id:bfx62324:20180805135906p:plain

「無題のフォーム」となっている部分に「お問い合わせ」と記入

f:id:bfx62324:20180805135916p:plain

質問を一つずつ「記述式」で作っていきます

この調子で

  • 名前(必須)
  • メールアドレス(必須)
  • Webサイトアドレス
  • 質問本文(必須)

を作っていきます
(必須)とした項目は、必須ボタンをオンにします

作っていくとこんな感じになります

f:id:bfx62324:20180805140347p:plain

「回答」タブで、「新しい回答についてのメール通知を受け取る」をオンにする

f:id:bfx62324:20180805135948p:plain

「送信」ボタンをクリック

f:id:bfx62324:20180805135929p:plain

「HTMLを埋め込む」を表示させ、この表示したHTMLコードをコピーします

f:id:bfx62324:20180805140114p:plain

はてなブログで問い合わせページの作成

固定ページ機能(Proのみ)を利用してお問い合わせページを作成します

f:id:bfx62324:20180805140123p:plain

先程コピーしたHTMLコードを貼り付けただけのページを作成します f:id:bfx62324:20180805140131p:plain

そうすると以下のようなページが作成できます

www.hitoriit.com

私はブログのサイドバーに追加しています
「デザイン」ー>「カスタマイズ」ー>「サイドバー」ー>「モジュールを追加」してお問い合わせページを配置

f:id:bfx62324:20180813163037p:plain

以上