サイトにgoogleのメールフォームを載せてみた！！ - 365日読書したい！
365日読書したい！
できれば365日読書したい本好きが綴る日々のあれこれ。本の紹介は基本ネタバレ無し。
home
SiteMap
レビュー
読者になる
PageTopへ
ホーム
レビュー記事
小説
手帳関係
自己啓発系
文房具
雑貨
読者登録
SiteMap
トップ > ブログカスタマイズ > サイトにgoogleのメールフォームを載せてみた！！
2019-02-15
サイトにgoogleのメールフォームを載せてみた！！
ブログカスタマイズ
こんにちは！すみれです😊
ブログを始めて2週間とちょっと・・・ようやく何とか基本のキがわかるようになってきたところです。
しかしながら、「記事を書く」以前の様々な設定に何時間も費やされ、検索＆設定に半日費やす状態からまだまだ抜けられていません💧
そんな私の　本日のお題は、ブログに「お問い合わせ」ページを掲載する　です。
ブログの管理者とコンタクトを取る事が出来る、というのは何かと大事なようです。
こんな始めたばかりの初心者に必要かしら？という疑問は一旦置いて・・・。
Googleでお問い合わせフォームを作成する
「お問い合わせフォーム」を自分好みに作ってみよう！！
「お問い合わせ」が送信されたら、自分のGmailに通知をさせる！
はてなブログに貼り付ける
①お問い合わせフォームが出来たら、これをはてなブログに貼付
②お問い合わせフォームの「固定ページ」をブログに貼付
お問い合わせフォームの確認方法
張り切っていってみよ～～！
Googleでお問い合わせフォームを作成する
「Myはてな」からサービス一覧を見ると「メールフォーム」らしきものが見当たらない。あれ？「はてなメールフォーム」みたいなのは無いのかな？？と検索検索。
はてなブログの先人達は、Googleでお問い合わせフォームを作成→ブログに貼り付けしている模様。
Googleが無料でメールフォームのサービスを提供してくれてたんですね！！
知らんかった。
というわけで、早速、Googleアカウントにログインします。
（Googleアカウントを持っている前提で書いてます。）
右上にある、ボタンの集合体みたなところをクリック。
そうすると、アイコンがずらりと並んで、下の方に「もっと見る」と出てきます。
「もっと見る」をクリックすると、「さらにもっと見る」が出てきますので、そちらをクリックします。
すると、
って聞いてきます。
気にせずどんどん下へスクロールしていきます。
結構下の方に「フォーム」というアイコンが出てきますので、こちらをクリック！
「Googleフォームを使う」をクリックすると、フォーム作成画面になります。
「連絡先情報」「イベント出欠確認」など既にテンプレが用意されていましたが
今回私が作成する「お問い合わせフォーム」では
名前（ハンドルネーム可）（必須）
メアド（必須）
URL
お問い合わせ内容（必須）
という内容にしたいので「新しいフォームを作成」から新たに作成する事にしました。
「お問い合わせフォーム」を自分好みに作ってみよう！！
「新しいフォームを作成」をクリックすると、下のような画面が出てきます。
初めてフォームを開いたときは、なんとGoogleさんが順番に最低限の作成方法を教えてくれます。
その説明だけで十分ですが、一応画像内でも補足しました。
背景画像なども可愛いテンプレがあったので、いろいろ試してお好みのものを作成してください😊
特に保存アクションをせずとも、自動的に保存されます。
「お問い合わせ」が送信されたら、自分のGmailに通知をさせる！
作成出来たら、お問い合わせフォームが送信された時に自分のGmailにお知らせメールを送信する設定をします。
スマホにGmailアプリを入れている人は、この設定をしておくとリアルタイムで通知が来ます。「お問い合わせ来てたのに気づかなかった！！」って事を防ぐ為にもこの設定はしておいた方がいいかな、と思います。
①「回答」をクリックして　②団子三兄弟みたいなマークをクリックします。
「新しい回答についてのメール通知を受け取る」にチェックを入れます。
これで、このフォーム作成時にログインしたGoogleアカウントのメールに、通知が来るようになりました。
ほとんどの人は、Googleアカウント＝Gmail　だと思われますが、数年前には、Gmail以外のメールアドレスでGoogleアカウントが作成できた時期があったようですので、要注意です。
はてなブログに貼り付ける
①お問い合わせフォームが出来たら、これをはてなブログに貼付
お問い合わせフォームのウインドウは閉じずに、はてなブログのダッシュボードを開きます。
ダッシュボードから「固定ページ」を開きます。
固定ページは、記事として日付がアップされない便利なページです。
カスタムURLの要領で、URLを指定します。
私は「contact-form」にしましたが
otoiawaseにしたり、mailにしたり、自分のわかりやすいものに指定できます。
URLを入力して「ページを作る」をクリックすると、「記事を書く」時のようなページが開きます。
そこに、先程作成したGoogleフォームを貼り付けます。
お問い合わせフォームに戻り、右上にある「送信」ボタンをクリックします。
このボタンをクリックしただけではどこにも送信されませんので、安心してクリックしてください😁
下の画面が開きますので、
①「＜＞」をクリックします。
②「HTMLを埋め込む」というソースコードをコピーします。
そして、これを先程つくった「固定ページ」の「HTML編集」から貼り付けます。
これで、はてなブログの固定ページに、Googleのお問い合わせフォームが貼り付けされました！！
左下の「公開」というボタンをクリックして保存してください。
一般の記事ではないので、まだこの段階ではどこにも公開されません。
②お問い合わせフォームの「固定ページ」をブログに貼付
あと一歩で完成です！
固定ページを、ブログに貼り付けましょう！！
私は、サイドバーに「365日読書したい！について」というモジュールを作成していますので、そこに貼り付ける事にしました。
プロフィール欄に追加しても良いと思いますし、リンクを利用しても良いと思います。その辺はお好みで。
私はブログアイコンでお手紙マークを前につけて表示させています。
こんな感じ。
参考までにソース載せておきます。
<i class="blogicon-mail"></i> お問い合わせはこちら<br>　<a href=" 自分のお問い合わせフォームURL " style="text-decoration: underline; font-weight: bold; color: mediumaquamarine;"target="_blank">メールフォーム</a>
自分のお問い合わせフォームURLは、
ここで確認して、コピペしてくださいね。
ついでに、アイコンはこちらの記事がとってもわかりやすかったです。
shirokai.hatenablog.com
お問い合わせフォームの確認方法
最後に、お問い合わせが送られてきたらどこから確認するかを載せておきます。
自分のGmailに通知が来る設定をしたので、Gmailから確認できます。
通知設定してないしPCから見たいわ～って場合や、Gmailの画面からじゃなくて直接確認したいって場合は、
Googleのこの画面から入って、自分の作成した「お問い合わせフォーム」 が自動的に保存されているのでクリックします。
「回答」の方に数字が入っています。
1件の回答があるよ、という事なので、「回答」をクリックすると閲覧出来ます。
お疲れさまでした！！
今回は長かったなぁ～💧
いかがでしたでしょうか？お問い合わせフォーム、無事設置出来ましたか？？
皆様も良いブログライフを！！
☆この記事を書いた人☆
すみれ（ID:sumire365books）
できれば365日読書したい本好き。
かわいい雑貨・手帳も大好き。
色々勉強中です♪
sumire365books 2019-02-15 15:30
サイトにgoogleのメールフォームを載せてみた！！
Tweet
関連記事
2020-07-13
読書ノートのススメ！メモを取るくらいの軽い気持ちで♪
今日は、私の「読書ノート」についてかたってみます！！
2019-05-31
【ペントネ】ペンサイズのフィルム付箋は使い方色々♪でも不器用さんには不向き
ずっと気になってた「ペントネ」をゲットしました！けど、不器…
2019-02-28
コピーライト表記について色々調べて見つけた【決定版】
「正しいコピーライト表記」を求めて色々調べました！個人的見…
2019-02-21
【about】ページと【プロフィール】ページ、【はてなのプロフィール】がそれぞれ別物で混乱した話（は…
はてなブログユーザーの皆さん、プロフィール設定してますか？3…
2019-02-09
iPhoneで撮った写真がパソコンで見れない時は拡張子が【.heic】になっているか確認しよう！
iPhone7と7Plus、iPhone8と8Plusを使っている方、写真がPCで見…
もっと読む
コメントを書く
« みんな大好き【ドラえもん】は本を読まな… バレンタインデーがキラキラ輝くような年… »
プロフィール
id:sumire365books はてなブログPro
できれば365日読書したい本好き。
かわいい雑貨、手帳も大好き！
文房具も大好き！
今読んでいるのは
原田マハ
「たゆたえども沈まず」
（2020年11月27日～）
2019年7月
脳腫瘍で開頭手術をしました。
詳細は⇓⇓
【聴神経腫瘍が見つかりました】
よろしくお願いします♪
読者です 読者をやめる 読者になる 読者になる
「365日読書したい！」について
管理人すみれについて
すみれ詳細プロフィール
サイトマップ
「365読書」サイトマップ
お問い合わせはこちら
メールフォーム
プライバシーポリシー・免責事項
プライバシーポリシー
気になるワードを検索♪
ブログ村参加中です
カテゴリー
このブログについて (2)
サイトマップ (1)
ダイエット (3)
ブログカスタマイズ (5)
レビュー (64)
レビュー-オススメ本まとめ (2)
レビュー-マンガ (2)
レビュー-健康 (2)
レビュー-児童書 (1)
レビュー-小説 (14)
レビュー-小説-国内ミステリー (8)
レビュー-小説-海外ミステリー (4)
レビュー-手帳ライフ (7)
レビュー-文房具 (18)
レビュー-絵本 (2)
レビュー-美容・ファッション (11)
レビュー-美術（本） (1)
レビュー-自己啓発 (1)
レビュー-雑貨 (5)
消しゴムはんこ (2)
聴神経腫瘍が見つかりました (8)
花粉症対策 (4)
雑記 (32)
最新記事
2020-12-18
【2021年の手帳】EDiTに戻ってきました♪
レビュー レビュー-手帳ライフ
2020-12-17
サンタさんの正体をどのように打ち明けるか問題について。
雑記
2020-12-16
消しゴムはんこで鬼滅の刃【煉獄さん】
消しゴムはんこ
2020-12-15
消しゴムはんこにハマっています
消しゴムはんこ 雑記
2020-12-14
【mizutama✕モノグラフ】ぶんとぼう柄をゲット♪
レビュー レビュー-文房具
月別アーカイブ（過去ログ）
参加グループ
雑談
ライフスタイル
読書
人気記事
©2019 sumire365books All rights reserved.
はてなブログをはじめよう！
sumire365booksさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？
はてなブログをはじめる（無料）
はてなブログとは
365日読書したい！
Powered by Hatena Blog | ブログを報告する
スターをつけました
引用をストックしました
ストック一覧を見る
閉じる
引用するにはまずログインしてください
ログイン
閉じる
引用をストックできませんでした。再度お試しください
閉じる
限定公開記事のため引用できません。
読者です 読者をやめる 読者になる 読者になる
