POTTIRI'S AUTOBIOGRAPHY

ダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

【ブログ運営】Googleフォームを使ってお問い合わせページを作ろう

f:id:pottiri:20201010000042p:plain
お疲れさまです。POTTIRIです。
ブログにお問い合わせフォームを設置する場合、
Googleフォームが簡単で便利です。
便利なのですが・・・
ふと気付いたらこのブログに設置してたお問い合わせページが崩れていました。
直そうと思ったら、あれこうどうやって使うんだっけ・・・😅
ちょっと使わないとすぐ忘れちゃいますね。
使い方を思い出したので備忘録として残してみます。

お問い合わせページを設置する意味

ぶっちゃけて言うと、お問い合わせページはなくても問題はないと思います。
TwitterやInstagramのリンクを付けてるし、コメント欄も解放しています。
コンタクトを取ろうと思ったらこれらを使っていただいて問題ないからですね。
でも、公開の場では言いにくいことだったり、
わざわざSNSまで移動するのも面倒なこともあるかもしれません・・・。
意見をいただく機会を逃すのもどうかなあと思います。
それら踏まえて私が思うのは
お問い合わせページは意見を聞く気があるという意思表示
だと思っています。
使われなくとも問題ない、
まじめにサイトを運営していて意見も聴く気があることを示すのが重要だと考えます。

ちなみにGoogleアドセンスの審査と、
お問い合わせページの関係はよくわかりません。
いつもとりあえず付けてるので付けずに申請したことがないんですよね。

というわけで今日もさっくり付けてみましょう。

Googleフォームを作成する

Google検索で「Googleフォーム」を検索し、サイト開きます。
※Googleにログインしておいてください。

「Googleフォームを使ってみる」をクリックします。

f:id:pottiri:20201010001016p:plain

左端の大きな+をクリックします。

f:id:pottiri:20201010001017p:plain

Googleフォームの作成画面が開きます。
まずは左上のフォームの名前を変更しましょう。
「無題のフォーム」の部分をクリックすると変更できます。
保存は自動でされます。

f:id:pottiri:20201010001047p:plain

f:id:pottiri:20201010001052p:plain

お問い合わせ画面に設置する質問事項を追加します。
最低限必要なのは、返信に必要なメールアドレスと名前、
そして問い合わせ内容ですね。
まずはメールアドレスを追加します。

  1. 右の+ボタンをクリック
  2. タイプを「記述式」にする。
  3. 質問事項の名前をメールアドレスにする。
  4. 質問事項の名前をメールアドレスにすると
    「メールアドレスにすの収集設定を有効にする」が出るのでクリック。

f:id:pottiri:20201010001101p:plain

「設定を変更」をクリック。

f:id:pottiri:20201010001107p:plain

設定ダイアログが出るので、
「回答のコピーを送信」と「常に表示」をチェックして「保存」をクリックします。
これで、お問い合わせを送信するとその内容が送った人にも確認メールが送信されるようになります。
確認メールを送らない場合、お問い合わせを送った側はちゃんと送信されたかイマイチよくわならないので、送った人に確認メールを送るのはとても重要なことだと思います。

同じ要領でお名前・お問い合わせ内容を追加します。
それぞれ右下のスイッチで必須設定をします。
お問い合わせ内容は段落にしておきましょう。
複数行のコメントが入れられるようになります。

f:id:pottiri:20201010001119p:plain

f:id:pottiri:20201010001125p:plain

不要な質問項目はゴミ箱アイコンをクリックして削除しましょう。

f:id:pottiri:20201010001129p:plain

これでお問い合わせ画面は完成です。
ブログに貼り付ける準備をします。
右上の「送信」ボタンをクリックします。

f:id:pottiri:20201010001135p:plain

「フォームを送信」ダイアログが現れます。
「<>」タブをクリックして、埋め込み用のコードをコピーしましょう。

f:id:pottiri:20201010001140p:plain

ブログにGoogleフォームを設置する

はてなブログの場合は固定ページに貼り付けるのがいいですね。

固定ページのURLは「contact」がいいんじゃあないかと思います。
「contact」としているサイトをよく見かけるので。

f:id:pottiri:20201010001146p:plain

固定ページの編集画面で、「HTML編集」タブをクリックします。
HTML編集画面で先程控えたGoogleフォーム画面のURLを貼り付けます。

f:id:pottiri:20201010001150p:plain

これでGoogleフォームの貼付け完了です。
このページのリンクをメニューやサイドバーに貼り付けておきましょう。

f:id:pottiri:20201010001157p:plain

ちなみに高さの設定が合わないと途中で切れてしまうことがあります。

f:id:pottiri:20201010001201p:plain

そういう時は、URLのheightの数値を変えてみましょう。
基本的に伸ばせば途中で切れるのは解消されるはずです。

<iframe src="https://docs.google.com/forms/d/e/フォームのID/viewform?embedded=true" width="640"
height="791" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

回答を見る

Googleフォームから作ったお問い合わせページから送られた内容は、
Googleフォームの回答タブから見ることができます。
※メールも来ますよ。

f:id:pottiri:20201010001208p:plain

おまけ

今回はGoogleフォームを使いましたが、
Wordpressでブログ運営しているならContact Form 7を使用する手がありますね。
一応共有しておきますが、
Contact Form 7とContact Form 7 add Confirm(送信確認画面を付与するプラグイン)を併せて使う場合はちょっとだけ注意してください。
古いiOSだと動かないことがあります。
これは、Contact Form 7とContact Form 7 add Confirmは作った人が別であることに起因します。
どちらも個人が開発されてるので進化を続ける中で意図せず古いものが切り捨てられてしまったんですね。
ご年配の方はOSのアップデートなどほとんどしないので注意が必要です。

ちなみに、「送信の確認画面」を設置するのは日本だけっぽいですね。
意味がほとんどないので海外ではないそうですね。
開発者としては地味に作るのがめんどい機能なので無くなって欲しい文化ではあります。

最後まで読んでいただきありがとうございました。

アフィリエイト 

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本