はてなブログ お問い合わせフォームの作成と設置方法
オーブ足らん、どうもナカニシ（@tssb26）です。
ブログのカスタマイズを日々ちょこちょことしているのですが
何かあったときに私へのコンタクト手段が無いなぁと
無いことはないんです
TwitterのDMでも連絡はできるんですけど、知らない人にはわかりにくいですよね
メールアドレスをばーんと載せるのも時代遅れっぽいしスパムも嫌なので
簡単に作れるサービスがありましたので、メールフォームを作ってみました
「Googleフォーム」で作成
こちらの記事を参考にさせていただきました、ありがとうございました！
尚、Googleアカウントが既にあることを前提として書いてます
作成手順
Google「Googleアプリ」から「Googleフォーム」
Googleにログインして矢印のルービックキューブみたいなマーク「Googleアプリ」をクリック
「もっと見る」と表示がありますので、もっと見てください
さらにもっと見てください
画面が切り替わったら、どんどん下へスクロール
↓この紫の「Googleフォーム」のアイコンを探してクリック
小さい上に地味なアイコンなので、下へスクロールしながら見逃しがち
「Googleフォーム」の設定
フォームの作成です「Googleフォームを使う」をクリック
ってTomって誰やねん（お約束）
画面右下の「＋」マークをクリックして「新規メールフォーム」を作ります
2つ目以降のメールフォームを作る場合もここをクリックで量産可能
タイトル入力
① フォームのタイトル
② 簡単な説明を記述できます
入力項目の追加と設定
① 「＋」ボタンで入力項目を追加できます
② 記述式、ラジオボタン、プルダウンなどの属性選択
③ 入力必須なら右へスライドしてオンにする
④ サブメニューから項目の説明欄の追加ができます
項目削除はゴミ箱ボタン
仕上げ
① 背景色を選べます
② フォームメールのプレビュー
プレビューしながら修正してください
お知らせ設定
タブ「回答」を開いてもらって「新しい回答についてのメール通知を受け取る」のところにチェックを入れることで
問い合わせがあればログインしているアカウントのgmailに通知が届くようになります
埋め込みコード取得
できあがったら右上の「送信」を押して下さい
誰にも送信されませんのでご安心ください
「＜＞ 」（①）を押すと埋め込みコード（②）が表示されますのでまるごとコピー
これでフォームが完成しましたので、あとはブログに貼り付けるだけ
深呼吸してマミー飲んでハッピーターンでも食べておもむろにブリッジでもして休憩してください
あともうちょいです
ブログへ貼り付ける
過去日付で記事を書く
普通に記事を書いて下さい、タイトルは「お問い合わせ」などとして
「HTML編集」モードに切り替えて、先ほど作成したメールフォームの埋め込みコードをペーストしてください
ここで一旦プレビューしていただいて、縦にスクロールバーが出ている場合は下線の「height="数字"」の数字の部分を大きくしてください
（私はスクロールバー出てるのが嫌なので調整しました）
「編集オプション」から投稿日時を過去の日付にして記事を投稿してください
私はブログ開設時の日付にしました
こうすることで、新着ブログとして表示されるのを回避します
こっそりしれーっとアップするんです、あたかも存在したかのように
リンク設定
あとは、投稿した記事のアドレスを好きなところに貼り付けてもらえばいいんですが
私は↓こんな風にサイドバーのプロフィール欄に貼り付けました
この方法でよければ下記コードをコピペして使ってください
[作ったメールフォームのアドレス]に先ほど投稿した問い合わせフォームブログのアドレスを入れて下さい
<p><i class="blogicon-mail"></i> お問い合わせはこちらまで<br />
<a href="[作ったメールフォームのアドレス]" style="text-decoration: underline; font-weight: bold; color: #008080;">メールフォーム</a>
</p>
固定ページを使った方法
はてなブログには、アドレスを固定してページを作成することができる「固定ページ」機能があります
この方法でも同じことができますので、手順を掲載しておきますね
固定ページ作成
場所は「ダッシュボード」→「固定ページ」です
アドレスを決める
固定ページのアドレスを決めます、とりあえず「otoiawase」と入れてみました
この場合、出来上がる固定ページのアドレスが「ドメイン＋otoiawase」になります
当ブログの場合「www.tssb26.com/otoiawase」これが固定ページのアドレスになります
アドレスが決まれば「ページを作る」を押します
ページ作りこみ
いきなりページ作成モードに入ります
作り込みといっても、タイトルは「お問い合わせフォーム」とかにして本文にGoogleフォームのコードを入れるだけです
コードを貼り付ける場合、編集モードをhtmlかmarkdownにして貼り付けて下さい
プレビューとかみながらええ感じになれば下の「公開する」を押してください
完成
こんな感じに、固定ページができました
ここから編集モードに入れます
削除は編集モードに入ると一番下に削除ボタンがあります
あとは、できあがった固定ページのアドレスを貼り付けたいところに貼り付ければOK
ブログの一記事にしてしまうと、関連ページに表示されたりすることもありますので、固定ページでこしらえたほうがいいかもしれません
最後に
お疲れ様でした、一度テスト送信しておくのをお忘れなく
お問い合わせフォームつけよっかなぁと考えてらっしゃる方の参考になればいいかなぁと思います
何かご質問などございましたらこちらのメールフォームまで
ほら、こんな風にさりげなくかっこよくさわやかに案内ができるわけです
「お問い合わせはこちらのメールアドレスまで→abc ※ untara.com（※マークを半角アットマーク＠に変えて下さい）」
この時点でめんどくさくてメール送信やめよっかなと思う人は思うはず
何パーセントかはメール逃してるはず
お仕事依頼だったらもったいない話ですよ
手順はだらだらと長いですが、難しいことはしてませんのでのんびり作ってみてください
ってことで、お仕事依頼お待ちしております
モデル ： 河村友歌｜ぱくたそフリー写真素材
