こんにちは、テツです！
最近着々とブログのデザインなどカスタマイズを進めています。
その中でブログ内にお問い合わせフォームを作成したのでその方法を公開していきます！私がはてなブログを使っているのでタイトルにはてなブログと入れましたが他のブログでも同じように出来ると思います。
そして方法を公開といっても私も人様のブログを参考に作っただけなので難しいことは何もしていません。したくても出来ません。笑
ちなみに参考にしたのはこちらのブログです。
この方も私と同じで「てつ」というお名前のようです！めっちゃ親近感！！
Googleフォーム
お問い合わせフォームを作成するにはGoogleフォームというものを使います。
これを使うとお問い合わせフォーム以外に質問フォームやアンケートフォームなんかも作成する事が出来ます。
「Googleフォーム」で検索すれば見つけることができます。この画面からスタートします！
「Googleフォームを使う」を押すと画面右下に「＋」ボタンが出てくるのでそこをクリックしてフォームの作成を開始します。
質問という画面が出てくるので質問したい内容などをここで作成します。
タイトルは「お問い合わせ」でいいと思います。質問項目はお名前、メールアドレス、お問い合わせ内容が普通だと思います。右側の「＋」を押せば質問項目を追加することができます。
ラジオボタンと書かれているところはクリックして記述式に変更します。ラジオボタンとは例えば「男性、女性」のように選択式にする場合に使用します。よく選択式のアンケートに出てくるクリックしていくやつですね。
右下の「必須」とは入力を必須にしたい場合に使用します。名前やメールアドレスやお問い合わせ内容は必須になると思うのでクリックしておきましょう。
出来たのがこちら。
タイトルの下に説明文を入れることも可能です。
これで問題がなければあとは簡単な調整をします。
画面右上に出ているメニューを使って色とお問い合わせしてもらった時に出る最後のメッセージを決めます。
色は一番左のパレットのマークです。私が作ったものは青色です。好きな色を選びましょう。
その右の目のマークはプレビューです。実際に表示される様子を見ることができます。
その右の歯車のマークはお問い合わせ最後に出てくるメッセージの設定を変更するのに使います。初期設定だと「回答を記録しました」です。これだとお問い合わせフォームなのにおかしな感じになってしまいます。
私はこんな感じに設定しました。
歯車マーク→プレゼンテーション→確認メッセージで変更ができます。
ここまでやれば作成は終了です！
あとは自分のブログに貼り付けていきましょう！貼り付けも簡単です。
同じく右上のメニューから「送信」ボタンをクリックしてください。
フォームの送信と出てきたら「＜＞」ボタンを押して下に出てくるコードをコピーします。
あとは、記事を書く→HTML編集→コピーしたコードを貼り付け→公開と行うだけです。
ただそのまま公開すると新着の記事として扱われてしまうので一工夫します。
編集オプションの投稿日時のところで今より過去の日付を入力して、すぐに公開するを選択します。
過去の日付を入れたら指定日時で予約投稿するを選択したくなりますがこれを選択すると未来の日付を入力してくださいと出てきて投稿出来ません。
なので、過去の日付→すぐに公開する、です！
これで今まで書いてきた記事の中に埋もれて新着記事としては出て来ません。
あとはサイドバーなど自分の好きな場所へ貼り付けます。
こんな感じで完成です！
お問い合わせがあった時にメールで通知する
やはりお問い合わせがあった時にすぐに対応できるようメールで内容の通知がほしいですよね！
って事で、その設定もしていきます！もちろんこれもお力をお借りしました！
こちらからコードをコピーさせて頂きました。
上から４行目の「yourmail@example.com」の部分を自分のアドレスに書き換えます。
そして上から２行目にある「お問い合わせがありました」に自分のブログ名を追加してわかりやすくしました。
普段から使ってるアドレスだし、いきなりお問い合わせがありましたって連絡来てもびっくりしそうだったので。
送信右側のボタンからメニューを出し、スクリプトエディタ…をクリックしてさきほどのコードを貼り付けます。
貼り付けたら、編集→現在のプロジェクトのトリガーと進みます。
そうしたら、赤枠部分を確認して同じであれば保存で終了！最初はなにも存在しないかもしれないのでその場合は新しいトリガーを追加してください。
これですべて完了です！！お疲れ様です！
お問い合わせがあるとこんな感じにメールが届きます。
まとめ
私のブログにもついにお問い合わせフォームが追加されました！一気にブロガー感が出てきましたね！笑
まだまだやりたいことがたくさんあるので１つずつ作っていきたいと思います！
それでは♪
コメントを残す