javascript – 単純なHTMLフォームを介してGoogleスプレッドシートに基本データを追加する

ユーザーが記入できる名前と電子メールアドレスを含むフォームがあります。

ユーザーが送信ボタンをクリックした場合、サーバーサイドのマジックを使用せずに、理想的にはスプレッドシートにデータを送信します。

これが私のフォームです:

<form method="post" action="SOME-ACTION-HERE" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe" />
</form>

私自身のカスタムHTMLフォームを使ってこれを行う方法はありますか。あなたは与えられたスプレッドシートのためにグーグルフォームを作ることができることを知っています、しかし私はそれをある種のウィジェットのように使いたいです。

ベストアンサー
はい、これは可能です。サーバーサイドの魔法を使うかどうか。
しかし、重要なのは、私たちが話している魔女サーバー、あなたのサーバー、あるいはグーグルサーバーを知ることです。結局それはサーバーサイドに行き、スプレッドシートアプリケーションに保存されるでしょう:)
私はこれが完全なJSでそれを行うことが可能であると思います(しかしそれは本当に痛みを伴うでしょう)。
私がここであなたに提案する解決策は、本当に簡単な方法でサーバー側の魔法を扱うグーグルアプリスクリプトを中継することです:
 デモ:

あなたのサイトのHTMLコード:

<form  id="form" method="get" action="https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe"/>
</form>

そしてここにGoogle Appsのスクリプトがあります。

function doGet(e){
  var vals=[];
  vals.push(new Date());
  for(var i in e.parameter){
    vals.push(e.parameter[i]);
  }
  SpreadsheetApp.openById("0Ao02g19G1-G-dElQQW92ekZWa0lGRGREYUpHRWQwTVE").appendRow(vals);
  return ContentService.createTextOutput("added");
}

結果を見たい場合は、スプレッドシートhereをご覧ください。

あなたが知る必要があるもの:
Google Appsのスクリプトは、スプレッドシート内にあります(ただし、私が彼のIDで呼び出すスクリプトの場合は必須ではありません)。
スクリプトを実行するには、それを公開し、誰でも実行できるようにする必要があります。このアクションを実行すると、HTMLコードに含める必要がある公開済みURLが表示されます。ここでは:https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec

これがあなたにとって満足のいく答えであることを願っています。

転載記事の出典を記入してください: javascript – 単純なHTMLフォームを介してGoogleスプレッドシートに基本データを追加する - コードログ