Googleフォームの機能に独自フォームの融合方法（初心者向け）

目次

・googleフォーム作成
・htmlフォームの作成
・gasについて知ろう
・gasのコードを書く
・通知をメールで受け取ろう

googleフォームの作成

・googleフォームのサイトへ

フォームを作ってみるを押す。

今回は連絡先情報を押す。

今回は名前とメールアドレスとコメントだけを使っていきます。

右上のネジマークを押すとこの画面にいき、回答を1回に制限するのチェックを外す。保存を押す。

先ほどの画面に戻り、回答を押す。そして、スプレッドシートのアイコンを押す。

今回は新しいスプレッドシートを使います。連絡先情報のところはお好きな名前でも大丈夫です。

HTMLフォーム作成

今回はこれを使っていきます

index.html

　<form>
　　<div class="item">
　　　<label class="label">名前</label>
　　　<input class="inputs"type="text"name="name">
　　</div>
　　<div class="item">
　　　<label class="label">メールアドレス</label>
　　　<input class="inputs"type="email"name="mail">
　　</div>

　　<div class="item">
　　　<label class="label">問合せ内容</label>
　　　<textarea class="inputs" name="text"></textarea>
　　</div>
　　<div class="btn">
　　　<input type="submit"value="送信">
　　</div>
　</form>

htmlを入力すると、こんな感じになれば大丈夫です。（css当ててないから形が崩れてても大丈夫です。）

nameとactionの値を作成したフォームから取ってくる

右上の送信を押す。

リンクコピーをする。新しいタブでリンクをはる。

ここで右クリックしてページのソースを表示を押して、command+fキーを押すと、

今回であれば、名前と検索して、右側にある2005620554をコピーする。
他のメールアドレスやコメントの数字もコピーする。

あとform actionと入力して、https~をコピーする。

先ほどのhtmlフォームに入力する。

index.html

　<form action="先ほどのhttps~を入力する">
　　<div class="item">
　　　<label class="label">名前</label>
　　　<input class="inputs"type="text"name="entry.先ほどの名前の数字">
　　</div>
　　<div class="item">
　　　<label class="label">メールアドレス</label>
　　　<input class="inputs"type="email"name="entry.先ほどのメールアドレスの数字">
　　</div>

　　<div class="item">
　　　<label class="label">問合せ内容</label>
　　　<textarea class="inputs" name="entry.先ほどのコメントの数字"></textarea>
　　</div>
　　<div class="btn">
　　　<input type="submit"value="送信">
　　</div>
　</form>

entry.を忘れずに。

次に、gasのコードを書いていきます。

スクリプトエディタを押す。

ここに、

function submitForm(e){
var itemResponses = e.response.getItemResponses();
var message = '';
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n';
}
var address = '送信するメールアドレス';
var title = '[お問い合わせを受信しました]';
var content = '下記の内容で、お問い合わせを受信しました。\n\n' + message;
GmailApp.sendEmail(address, title, content);
}

これをはる。
下のタイマーをおす。

右下のトリガーを追加するを押す。
イベントの種類を選択をフォーム送信時に変更する。
gasについてはこれで大丈夫です。

メールを送信してこんな画面はいやですよね。
今回はもう1つhtmlファイルを作ってそこに遷移さしていきたいと思います。head内に

<script type="text/javascript">
    var submitted = false;  
  </script>
  <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
    onload="if(submitted) {window.location='作ったhtmlファイル名';}"></iframe>

これをコピペする。
これでじぶんで作ったhtmlファイルに遷移すると思います。

これでおわりです。おつかれさまでした！