(2記事あるよ)ブログのカスタマイズを若干しました!~お問合せフォームの設置編~
こんにちは!
今日は撮影の後に、時間があったのでブログを若干カスタマイズしました!
実装内容
・お問合せフォームの設置
・最上部に戻るボタンの設置(スマホ・PC両方)
となっています♪
ユーザー様が使いやすい画面、連絡をしやすい環境を整備しました♪
(使ってくれると面白いなぁ)
さて、機能を追加するにあたって行った作業を備忘録として残します♪
、、、ですが、文量が多かったので2分割することにしました!
この記事ともう一つの記事を合わせて読んでできることは、
お問い合わせフォームと最上部に戻るボタンの配置です♪
※この記事はお問合せフォームの設置に関する記事です。
お問い合わせフォーム
さて、まずはお問い合わせフォームから。
その前になぜお問い合わせフォームが必要なのかを簡単に。
運営しているブログが有名になってくると、企業からの広告や取材依頼、ユーザー様からの相談など、コメント欄以上に連絡を密に取りたいという状況が生まれてくるようです。その際、しっかりとメールにて連絡を1:1で取れるようにフォームを設置するということです♪めんどくさかったら要らないかもw
今回はGoogleフォームをつかいました!理由は、元々学生団体時代に使っていたので、手っ取り早く作れるからです!爆笑
ざっくり手順だけ書きますね!
作業手順
- Googleアカウントを作るor既存で使ってもいいアカウントを用意
- アプリ→ドライブを選択
- 新規作成→その他→Googleフォームを作成。
- 質問事項を用意する。
- 送信→「< >」HTMLを選択→生成されたコードをコピー
- ブログ内のHTML記述欄にペースト(サイドバーやフッターなど)
↑これでひとまず、フォームの作成自体はOKです。
しかし、このままでは、通知が来ないので、お問合せの内容が記録されているか確認が遅れてしまいます。(なる早で返したいですよね(笑)
というわけで、通知が来るようにする必要があります♪
作業手順その2
- ドライブ→作成したフォームを開く。
- フォームの回答を選択→スプレッドシートを作成。
- 新しいスプレッドシートを作成。(名前は任意)
- ツール→通知ルール→「フォームが送信されたとき」&「頻度」を設定
- 送信後、シートに問い合わせ内容が反映され、メール通知が来るかチェック。
↑これで、フォームを通して送信された問い合わせの内容がシートに記載され、送信されたことを使用したアカウントにメールで通知が飛んできます。
これで完成!
まとめ
- 使用するGmailアカウントを決める
- Googleドライブにてフォームを新規作成
- 送信を押して、HTMLコードを生成
- ブログの表示したい部分のHTML記述欄にコードを貼る
- 作成したフォームから、通知用のシートを作成
- 動作チェックをする
これでお問合せフォームの設置はばっちり!
最上部ボタンの設置編へ続く
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ
- 作者: 相澤裕介
- 出版社/メーカー: カットシステム
- 発売日: 2016/10
- メディア: 単行本
- この商品を含むブログを見る
IKEMSKY