IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Google / はてなブログにお問い合わせフォーム Google Forms

はてなブログにお問い合わせフォーム Google Forms

2017/05/17 Google, WebTips, はてなブログ

はてなブログにお問い合わせフォームを作ろうと思いググりましたら、やはり欲しいと思われる方が多いようで結構ヒットします。

「Google フォーム」の記事が多いですね。

やってみました。

  • Google フォームにアクセスする
  • フォームを作成する 
  • メールアドレスを収集する
  • 確認メッセージの作成
  • 通知をメールで受け取る
  • Google フォームで回答(問い合わせ)を確認
  • 回答者(問い合わせ者)へのメール
  • はてなブログでの使い方

Google フォームにアクセスする

www.google.com

Google フォームにアクセスします。

フォームを作成する 

指示に従って右下の赤丸プラスをクリックしますと「無題のフォーム」となりますので、タイトル名をクリックして「お問い合わせ」などに変更します。

続いて、一つずつエレメントを作っていきます。上の場合、「無題の質問」に「お名前」と入れますと、右のタイプが自動的に「記述式」となります。変更する場合は、ドロップダウンをクリックして変更できます。画像はドロップダウンをクリックして選択可能なタイプを示しています。

エレメントの追加は、右横のプラスをクリックし同じ作業を続けていきます。

画像が前後しますが、必須にしたい場合は、右下の「必須」をチェックしておきます。

メールアドレスを収集する

フォームのエレメントにメールアドレスを指定する場合は、通常のエレメント追加ではなく、以下の方法が便利です。

右上の設定アイコン歯車をクリックしますと上の画像になりますので、「メールアドレスを収集する」にチェックをしますと自動的にアドレス入力エレメントが作成されます。ただし、この場合、位置は一番上に固定され入れ替えは出来ないようです。

オプションとして「回答のコピーを送信」があり、チェックしますと、フォームの送信者(問い合わせる側)に自分が入力したフォームのコピーがメールされます。コピー送信は、常時または回答者(質問者)リクエストの選択が出来ます。

なお、「回答」という言葉遣いでわかりますように、この Google Forms はアンケートの収集を目的としているのだと思います。

確認メッセージの作成

設定の「プレゼンテーション」では、フォーム送信後の確認メッセージを設定できます。デフォルトでは「回答を記録しました」となりますので、お問い合わせの場合は変更した方がいいでしょう。

通知をメールで受け取る

作成画面に戻り、タブの「回答」をクリックし、右上の3点縦ポッチ(何ていうんでしょう?)をクリックしますと上の画像になりますので、「新しい回答についてのメール通知を受け取る」にチェックを入れておきますと、通知メールが送られてきます。

ただし、この通知には回答(問い合わせ)内容は送られてきません。

この画像が通知メールです。Google Forms へのリンクがありますので実用上は問題ないと思います。

内容付きでメールを受け取る場合は、別途 Google スプレッドシートでスクリプトを書けば可能とありますので、これはまた別記事で。

Google フォームで回答(問い合わせ)を確認

メール通知のリンクをクリックすると回答(お問い合わせ内容)が見られます。

右上のグリーンの Google スプレッドシートアイコンをクリックしますと、初回のみスプレッドシートの選択画面になります。

アンケートの回答をスプレッドシートで集計したりすることを目的にしているのだと思います。

回答者(問い合わせ者)へのメール

問い合わせをした側へはこうしたメールが届きます。

はてなブログでの使い方

完成したフォームの使い方は、作成画面の右上に「送信」がありますのでクリックしますと、「メール」「リンク」「HTMLに埋め込む」が選択できます。

「メール」はフォームをメールで送りますのでブログでは使えません。

「HTMLに埋め込む」は iframe ですので、サイズを調整すればうまくいくかもしれませんが、レスポンシブですとスクロールバーが出てきれいじゃないかもです。

HTML ソースからフォームだけ取り出せばデザインも自分のブログと同じにできるのですが、これは規約違反になりそうですので断念です。

「リンク」で利用しようと思いますが、これも次回ですね。

はてなブログ/検索モジュールをどこに配置しよう? cms-style(6)
はてなブログのホームを他の記事と違うデザインする/ cms-style(7)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com