さっきーのSFC修行と旅のまとめ

SFC修行のためのポイントサイトやタイ、カンボジアの情報をお送りします。

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

 さっきーです。

 

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

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

 

 

1.グーグルフォームの設定

1.1 フォームのボタンは?

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

 グーグルの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

1.2 フォームの設定

 

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

f:id:sakky_mile:20170812145932j:plain

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

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

f:id:sakky_mile:20170812145946j:plain

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

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

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

f:id:sakky_mile:20170812150949j:plain

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

 

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

f:id:sakky_mile:20170812151004j:plain

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

f:id:sakky_mile:20170812153536j:plain

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

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

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

 

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

 f:id:sakky_mile:20170812153552j:plain

HTML編集に貼り付けます。

f:id:sakky_mile:20170812221943j:plain

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

2.問い合わせの確認方法

2.1 フォームを使った方法

 

 

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

 フォームを開きます。

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

f:id:sakky_mile:20170812153610j:plain

  回答が入っています。

f:id:sakky_mile:20170812153648j:plain

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

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

2.2 転送設定

 

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

f:id:sakky_mile:20170812155521j:plain

 ここを編集します。

f:id:sakky_mile:20170812155541j:plain

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

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

function sendForm(e){
  var subject = "問い合わせがありました";  //件名
  var body = "問い合わせ内容 ------------------------------------------------------------ ";  //本文
  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() + " ";
     body += itemResponse.getResponse() + " ";
  }
  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

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

 

 

 スポンサーリンク