はじめに

どうもAtsu1209です♪
今回はHTMLとGAS(GoogleAppsScript)を使っていきます
まだ初心者なので、変なところあったら温かい目で見てください。

GASを使った受け皿

まずGoogleスプレッドシートに書き込むためのコードを書きます。

input.gs

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rowData = [];
  rowData.push(new Date()); 
  rowData.push(e.parameter.name); 
  rowData.push(e.parameter.email);
  rowData.push(e.parameter.comment);
  sheet.appendRow(rowData); 
  return ContentService.createTextOutput("Success"); 
}

rowData.pushで送信された情報を呼び出し、(e.parameter."クラス名")で送信された情報の中のクラスを指定して書き出しています。

GASをデプロイ

今回書いたコードをデプロイしてURLを表示します。
このURLをフォームの送信先として使用します。

HTMLを使ったフォームを作成

Googleスプレッドシートに送信するためのフォームを作ります。

form.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメント</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 

    </head>
    <body>
    <h2>Comment</h2>
 <div class="input">
    <form action="ここにデプロイしたときのURLを貼り付ける。" method="POST">
      <input type="email" name="email" placeholder="メールアドレス" required>
  <input type="password" name="name" placeholder="お名前" required>
      <input type="text" name="comment" placeholder="コメント" required>
      <input id="playButton" class="btn" type="submit" value="送信">
    </form>
      <audio id="Audio" src="btn.mp3"></audio>
      <iframe name="audioFrame" style="display:none;"></iframe>
    </div>

        <script>

        </script>
    </body>
</html>

前と同じくCSSを書くのがめんどくさいのでMaterialize(外部CSS)を使っていきます。
また、コメントを送ったときに音を再生したいので,<audio>タグを使って音声ファイルを参照しておきます。今回はbtn.mp3というファイル名の音声を参照しました。
<input>のaction=のあとにGASのデプロイURLを貼り付けます。

JavaScriptを使って音を再生

これでフォームの送信はできるのですが、音を再生させたいので、
JSを使って送信ボタンを押したら音を再生するようにします。

form.html

<script>
 var audio = document.getElementById("Audio");
        var playButton = document.getElementById("playButton");
          
          playButton.addEventListener('click', function() {
            audio.play();
            alert("コメントを送信しました。");
        });
</script>

document.getElementByIdでhtml側の<audio>で参照した音声ファイルと、送信ボタンにつけたIDを指定し、取得します。そして下のコードで音を送信し、alertを使って"コメントを送信しました"というメッセージを表示します。

全体コード

HTML

form.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメント</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 

    </head>
    <body>
    <h2>Comment</h2>
 <div class="input">
    <form action="ここにデプロイしたときのURLを貼り付ける。" method="POST">
      <input type="email" name="email" placeholder="メールアドレス" required>
  <input type="password" name="name" placeholder="お名前" required>
      <input type="text" name="comment" placeholder="コメント" required>
      <input id="playButton" class="btn" type="submit" value="送信">
    </form>
      <audio id="Audio" src="btn.mp3"></audio>
      <iframe name="audioFrame" style="display:none;"></iframe>
    </div>

        <script>
              var audio = document.getElementById("Audio");
        var playButton = document.getElementById("playButton");
          
          playButton.addEventListener('click', function() {
            audio.play();
            alert("コメントを送信しました。");
        });
        </script>
    </body>
</html>

GAS

input.gs

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rowData = [];
  rowData.push(new Date()); 
  rowData.push(e.parameter.name); 
  rowData.push(e.parameter.email);
  rowData.push(e.parameter.comment);
  sheet.appendRow(rowData); 
  return ContentService.createTextOutput("Success"); 
}

感想

勉強してからGASにはじめて触れてみて、意外とむずかった。
制作時間2時間位かかりました。
なんかアドバイスや間違えがあったら、コメントで教えていただきたいです。
では。