ゆるマイラーさっきーの空旅マイル

航空マイルを貯める為のポイントサイトや旅行記をお送りします。

はてなブログにお問い合わせフォームを設置する方法<=作りました。

 さっきーです。

 ブログも色々書いてきましたので、問い合わせしたい人が出てきた場合(居ないと思いますが(笑))の事を考えて、お問い合わせフォームを作ってみる事にしました。

 メアドを貼っておくだけで良いんですけどね。

グーグルフォームの設定

フォームのボタンは?

 今回は、グーグルのフォームという機能を使いたいと思います。

 グーグルのTOP画面から右上のアプリ(四角が沢山あるボタン)をクリック。

f:id:sakky_mile:20170812145452j:plain

「もっと見る」をクリックf:id:sakky_mile:20170812145617j:plain

 

「さらにもっと」をクリック

f:id:sakky_mile:20170812145634j:plain

下の方を見て行くと、フォームがあります。

f:id:sakky_mile:20170812145918j:plain

フォームの設定

フォームの表紙になります。

f:id:sakky_mile:20170812145932j:plain

 グーグルのアカウントが無ければ、ここで作ることになります。持っている人はログイン。

 右下の赤丸のプラスを押して下さい。

f:id:sakky_mile:20170812145946j:plain

項目を+ボタンで足すことが出来ます。

問い合わせ以外は、記述式で良いですね。

各項目毎に必須項目も作れます。

f:id:sakky_mile:20170812150949j:plain

はてなブログ用の送信フォームを作る

 右上の「送信」ボタンをクリック。(送信する訳ではありませんが)

f:id:sakky_mile:20170812151004j:plain

 <>ボタンを押すとHTMLが出てくるので、これをコピー

f:id:sakky_mile:20170812153536j:plain

これをはてなブログの固定ページに貼り付けます。

コピーしたらこのフォームは閉じて構いません。

はてなブログに送信フォームを作る

固定ページをクリック。アドレスを自分で作ります。

 f:id:sakky_mile:20170812153552j:plain

HTML編集に貼り付けます。

f:id:sakky_mile:20170812221943j:plain

プレビューで確認して下さい。

問い合わせの確認方法

フォームを使った方法

 確認の為、自分でホームページのフォームに何か入れて送信して下さい。

 フォームを開きます。

 作ったフォームを開くと、

f:id:sakky_mile:20170812153610j:plain

 回答が入っています。

f:id:sakky_mile:20170812153648j:plain

 しかし、毎回見に行くのは大変ですよね?

 自分のメールに転送される様に設定してみましょう。

転送設定

 右上の点が3つ縦に並んだボタンをクリックして、「スクリプトエディター」を開きます。

f:id:sakky_mile:20170812155521j:plain

 ここを編集します。

f:id:sakky_mile:20170812155541j:plain

 青字の所にあなたのメールアドレスを記載して下さい。

ここから--------------------------------------------------------------

function sendForm(e){
  var subject = "問い合わせがありました";  //件名

  var body = "問い合わせ内容\n------------------------------------------------------------\n \n" ;  //本文

  var to    = "あなたのメールアドレス@xxx.XXX";

 

  var res = e.response;
  var itemResponses = res.getItemResponses();

  for (var j = 0; j < itemResponses.length; j++) {

     var itemResponse = itemResponses[j];

     body += itemResponse.getItem().getTitle() + "\n";

     body += itemResponse.getResponse() + "\n\n";

  }

  MailApp.sendEmail(to, subject, body);   //メールを送信

}

---------------------------------------------------------------ここまで

 以下の様になります。

f:id:sakky_mile:20170812155605j:plain

 編集-現在のプロジェクトのトリガーをクリック

f:id:sakky_mile:20170812225521j:plain

青字をクリック

f:id:sakky_mile:20170812155637j:plain

以下画面が出ますので、保存をクリック

f:id:sakky_mile:20170812155704j:plain

 許可を確認をクリック

f:id:sakky_mile:20170812155716j:plain

以下画面が出ますので、下の方の許可をクリック

f:id:sakky_mile:20170812155931j:plain

 試しに、何か入力して、メールが来るか確認して下さい。

まとめ

 今回は、はてなブログに問い合わせフォームを作ってみました。

 問い合わせ何て来るのかな、なんて思いますが、お気軽にお問い合わせください(笑)