[Web]Googleフォームによるフォームの作成

Googleフォームの利点と欠点

• 手軽に作れる
• googleのデザイン、セキュリティが担保できる
• powers by googleになる(セルフコントロールしていない印象)

流れ

1. googleドライブにログイン
2. 新規フォームを作成
3. 入力フィールドを作成(メールアドレス入力フィールドを作ること)
4. スプレットシートと紐付け
5. スプレッドシートを作成、保存、トリガーを設定
6. 埋め込みを取得してサイトに貼り付け

フォーム作成後

• 「回答を表示」で回答先を制作、新しいスプレッドシートを選択して紐付ける。

スプレッドシートの制作

• ツール→スクリプトエディタ
• スクリプトを新しくコピーペースト

引用元：d.hatena.ne.jp

function myFunction() {
//------------------------------------------------------------
// 設定エリアここから
//------------------------------------------------------------
 
// 件名、本文、フッター
var subject = "【お問い合わせ】お問い合わせ完了通知メール";
var body
    = "この度は、お問い合わせいただきましてありがとうございます。\n\n"
    + "以下の内容にてお問い合わせいただきましたのでご連絡いたします。\n"
    + "---------------------------------------------------------------------------------\n";
var footer
    = "---------------------------------------------------------------------------------\n\n"
    + "何かご不明な点がございましたら、\n"
    + "本メールへの返信にてご連絡をお願い致します。\n\n"
    + "====================================================\n"
    + "クライアントの名前\n"
    + "クライアントの郵便番号\n"
    + "クライアントの住所\n"
    + "クライアントの電話番号\n"
    + "====================================================\n"
    + "====================================================\n"
    + "このメールに心当たりがない場合、\n"
    + "どなたかが誤って貴方様のメールアドレスを登録された可能性がございます。\n\n"
    + "大変お手数ですが、このメールの中身を消さず、\n"
    + "「このメールに心当たりがない」旨を最上部に記してご返信ください。\n"
    + "登録内容を削除させていただきます。\n"
    + "====================================================\n";
 
 
// 入力カラム名の指定
var NAME_COL_NAME = 'お名前';
var MAIL_COL_NAME = 'メールアドレス';
var TIMESTAMP_LABEL = 'タイムスタンプ';
 
// メール送信先
var admin = "管理者のGmailアドレス"; // 管理者（必須）
var cc    = "";    // Cc:
var bcc   = admin + ",test@test.com"; // Bcc:
var reply = admin; // Reply-To:
var to    = "";    // To: （入力者のアドレスが自動で入ります）
 
//------------------------------------------------------------
// 設定エリアここまで
//------------------------------------------------------------
 
try{
    // スプレッドシートの操作
    var sh   = SpreadsheetApp.getActiveSheet();
    var rows = sh.getLastRow();
    var cols = sh.getLastColumn();
    var rg   = sh.getDataRange();
    Logger.log("rows="+rows+" cols="+cols);
 
    // メール件名・本文作成と送信先メールアドレス取得
    for (var j = 1; j <= cols; j++ ) {
        var col_name  = rg.getCell(1, j).getValue();    // カラム名
        var col_value = rg.getCell(rows, j).getValue(); // 入力値
      　
        if ( col_name === NAME_COL_NAME ) {　　//メール本文の最初に名前を入れる
            body = col_value+" 様\n\n"+body;
        }
        if ( col_name === MAIL_COL_NAME ) {　　//メールアドレス
            to = col_value;
        }
      　if ( col_name === TIMESTAMP_LABEL ) {　//タイムスタンプ⇒申込日時
            col_name = '申込日時';
        }
        body += "【"+col_name+"】\n";
        body += col_value + "\n\n";
    }
    body += footer;
 
    // 送信先オプション
    var options = {};
    if ( cc )    options.cc      = cc;
    if ( bcc )   options.bcc     = bcc;
    if ( reply ) options.replyTo = reply;
 
    // メール送信
    if ( to ) {
        MailApp.sendEmail(to, subject, body, options);
    }else{
        MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
    }
}catch(e){
    MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
}
}

• ！メール送信先の管理者メールアドレスを設定しておくこと

スプレッドシートのトリガーについて

• トリガー（どのタイミングで動かすか？）
• イベントを「スプレッドシートから」「フォーム送信時」に設定
• 許可を承認する

テストする

• 実際のフォームを表示

サイトに埋め込む

• フォーム画面最下部「フォームを送信」
• ソースコードを取得できる
• htmlドキュメントにソースコード貼り付け
• サーバアップロードで使用できる

「【失敗】Googleフォームにメールアドレスが指定されていません」と出るとき…

• フォーム作成時にメールアドレス入力欄を作っていない
• または質問のタイトルの文章内容が「メールアドレス」でない 「スプレッドシートから」「フォーム送信時」
• メールに関する変数のエラー