さっきーです。
ブログも色々書いてきましたので、問い合わせしたい人が出てきた場合(居ないと思いますが(笑))の事を考えて、お問い合わせフォームを作ってみる事にしました。
メアドを貼っておくだけで良いんですけどね。
グーグルフォームの設定
フォームのボタンは?
今回は、グーグルのフォームという機能を使いたいと思います。
グーグルのTOP画面から右上のアプリ(四角が沢山あるボタン)をクリック。
「もっと見る」をクリック
「さらにもっと」をクリック
下の方を見て行くと、フォームがあります。
フォームの設定
フォームの表紙になります。
グーグルのアカウントが無ければ、ここで作ることになります。持っている人はログイン。
右下の赤丸のプラスを押して下さい。
項目を+ボタンで足すことが出来ます。
問い合わせ以外は、記述式で良いですね。
各項目毎に必須項目も作れます。
はてなブログ用の送信フォームを作る
右上の「送信」ボタンをクリック。(送信する訳ではありませんが)
<>ボタンを押すとHTMLが出てくるので、これをコピー
これをはてなブログの固定ページに貼り付けます。
コピーしたらこのフォームは閉じて構いません。
はてなブログに送信フォームを作る
固定ページをクリック。アドレスを自分で作ります。
HTML編集に貼り付けます。
プレビューで確認して下さい。
問い合わせの確認方法
フォームを使った方法
確認の為、自分でホームページのフォームに何か入れて送信して下さい。
フォームを開きます。
作ったフォームを開くと、
回答が入っています。
しかし、毎回見に行くのは大変ですよね?
自分のメールに転送される様に設定してみましょう。
転送設定
右上の点が3つ縦に並んだボタンをクリックして、「スクリプトエディター」を開きます。
ここを編集します。
青字の所にあなたのメールアドレスを記載して下さい。
ここから--------------------------------------------------------------
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); //メールを送信
}
---------------------------------------------------------------ここまで
以下の様になります。
編集-現在のプロジェクトのトリガーをクリック
青字をクリック
以下画面が出ますので、保存をクリック
許可を確認をクリック
以下画面が出ますので、下の方の許可をクリック
試しに、何か入力して、メールが来るか確認して下さい。
まとめ
今回は、はてなブログに問い合わせフォームを作ってみました。
問い合わせ何て来るのかな、なんて思いますが、お気軽にお問い合わせください(笑)