365日読書したい!

できれば365日読書したい本好きが綴る日々のあれこれ。本の紹介は基本ネタバレ無し。

サイトにgoogleのメールフォームを載せてみた!!

こんにちは!すみれです😊

ブログを始めて2週間とちょっと・・・ようやく何とか基本のキがわかるようになってきたところです。

しかしながら、「記事を書く」以前の様々な設定に何時間も費やされ、検索&設定に半日費やす状態からまだまだ抜けられていません💧 

 

そんな私の 本日のお題は、ブログに「お問い合わせ」ページを掲載する です。

ブログの管理者とコンタクトを取る事が出来る、というのは何かと大事なようです。

こんな始めたばかりの初心者に必要かしら?という疑問は一旦置いて・・・。

 

 

張り切っていってみよ~~!

 

Googleでお問い合わせフォームを作成する

「Myはてな」からサービス一覧を見ると「メールフォーム」らしきものが見当たらない。あれ?「はてなメールフォーム」みたいなのは無いのかな??と検索検索。

はてなブログの先人達は、Googleでお問い合わせフォームを作成→ブログに貼り付けしている模様。

Googleが無料でメールフォームのサービスを提供してくれてたんですね!!

知らんかった。

 

というわけで、早速、Googleアカウントにログインします。

(Googleアカウントを持っている前提で書いてます。)

右上にある、ボタンの集合体みたなところをクリック。

2019-02-15googleでメールフォーム1

 そうすると、アイコンがずらりと並んで、下の方に「もっと見る」と出てきます。

 

2019-02-15googleでメールフォーム2

「もっと見る」をクリックすると、「さらにもっと見る」が出てきますので、そちらをクリックします。

すると、

2019-02-15googleでメールフォーム3

って聞いてきます。

気にせずどんどん下へスクロールしていきます。

 

2019-02-15googleでメールフォーム4

結構下の方に「フォーム」というアイコンが出てきますので、こちらをクリック!

 

2019-02-15googleでメールフォーム5

「Googleフォームを使う」をクリックすると、フォーム作成画面になります。

 

2019-02-15googleでメールフォーム6

「連絡先情報」「イベント出欠確認」など既にテンプレが用意されていましたが

今回私が作成する「お問い合わせフォーム」では

  • 名前(ハンドルネーム可)(必須)
  • メアド(必須)
  • URL
  • お問い合わせ内容(必須)

という内容にしたいので「新しいフォームを作成」から新たに作成する事にしました。

 

「お問い合わせフォーム」を自分好みに作ってみよう!!

「新しいフォームを作成」をクリックすると、下のような画面が出てきます。

2019-02-15googleでメールフォーム7

初めてフォームを開いたときは、なんとGoogleさんが順番に最低限の作成方法を教えてくれます。

その説明だけで十分ですが、一応画像内でも補足しました。

背景画像なども可愛いテンプレがあったので、いろいろ試してお好みのものを作成してください😊

 

特に保存アクションをせずとも、自動的に保存されます。

 

「お問い合わせ」が送信されたら、自分のGmailに通知をさせる!

作成出来たら、お問い合わせフォームが送信された時に自分のGmailにお知らせメールを送信する設定をします。

 

スマホにGmailアプリを入れている人は、この設定をしておくとリアルタイムで通知が来ます。「お問い合わせ来てたのに気づかなかった!!」って事を防ぐ為にもこの設定はしておいた方がいいかな、と思います。

 

①「回答」をクリックして ②団子三兄弟みたいなマークをクリックします。

2019-02-15googleでメールフォーム8

 

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

2019-02-15googleでメールフォーム9

これで、このフォーム作成時にログインしたGoogleアカウントのメールに、通知が来るようになりました。

 

ほとんどの人は、Googleアカウント=Gmail だと思われますが、数年前には、Gmail以外のメールアドレスでGoogleアカウントが作成できた時期があったようですので、要注意です。

 

はてなブログに貼り付ける

①お問い合わせフォームが出来たら、これをはてなブログに貼付

お問い合わせフォームのウインドウは閉じずに、はてなブログのダッシュボードを開きます。 

 

ダッシュボードから「固定ページ」を開きます。

 固定ページは、記事として日付がアップされない便利なページです。 

2019-02-15固定ページに貼付3

カスタムURLの要領で、URLを指定します。

私は「contact-form」にしましたが

otoiawaseにしたり、mailにしたり、自分のわかりやすいものに指定できます。

 

URLを入力して「ページを作る」をクリックすると、「記事を書く」時のようなページが開きます。

そこに、先程作成したGoogleフォームを貼り付けます。

 

お問い合わせフォームに戻り、右上にある「送信」ボタンをクリックします。

このボタンをクリックしただけではどこにも送信されませんので、安心してクリックしてください😁

2019-02-15固定ページに貼付1

 

下の画面が開きますので、

①「<>」をクリックします。

②「HTMLを埋め込む」というソースコードをコピーします。 

2019-02-15固定ページに貼付2

そして、これを先程つくった「固定ページ」の「HTML編集」から貼り付けます。

これで、はてなブログの固定ページに、Googleのお問い合わせフォームが貼り付けされました!!

 

左下の「公開」というボタンをクリックして保存してください。

一般の記事ではないので、まだこの段階ではどこにも公開されません。

 

②お問い合わせフォームの「固定ページ」をブログに貼付

あと一歩で完成です!

固定ページを、ブログに貼り付けましょう!!

私は、サイドバーに「365日読書したい!について」というモジュールを作成していますので、そこに貼り付ける事にしました。

 

プロフィール欄に追加しても良いと思いますし、リンクを利用しても良いと思います。その辺はお好みで。

 

私はブログアイコンでお手紙マークを前につけて表示させています。

2019-02-15貼り付け

こんな感じ。

 

参考までにソース載せておきます。

 <i class="blogicon-mail"></i> お問い合わせはこちら<br> <a href=" 自分のお問い合わせフォームURL " style="text-decoration: underline; font-weight: bold; color: mediumaquamarine;"target="_blank">メールフォーム</a>

 

自分のお問い合わせフォームURLは、

2019-02-15リンクURL

ここで確認して、コピペしてくださいね。

 

ついでに、アイコンはこちらの記事がとってもわかりやすかったです。

shirokai.hatenablog.com

 

お問い合わせフォームの確認方法 

最後に、お問い合わせが送られてきたらどこから確認するかを載せておきます。

自分のGmailに通知が来る設定をしたので、Gmailから確認できます。

 

通知設定してないしPCから見たいわ~って場合や、Gmailの画面からじゃなくて直接確認したいって場合は、

2019-02-15googleでメールフォーム5

Googleのこの画面から入って、自分の作成した「お問い合わせフォーム」 が自動的に保存されているのでクリックします。 

2019-02-15googleでメールフォーム10

 

「回答」の方に数字が入っています。

2019-02-15確認

1件の回答があるよ、という事なので、「回答」をクリックすると閲覧出来ます。

 

 

 

お疲れさまでした!!

今回は長かったなぁ~💧

いかがでしたでしょうか?お問い合わせフォーム、無事設置出来ましたか??

 

皆様も良いブログライフを!!

 

 

☆この記事を書いた人☆
すみれのプロフィール すみれ(ID:sumire365books)
できれば365日読書したい本好き。
かわいい雑貨・手帳も大好き。
色々勉強中です♪