HTMLフォームをGoogle Sheetsに送信するには？

"Google Sheets と連携した HTML フォームのデータを送信しようとしています"- Google Docs Editors Community

見込み客や ToDo リストを Google Sheets で管理していて、ウェブサイトのフォームからそこに行を追加したい。でも HTML フォームは、それだけではシートに書き込めません。Google Forms なら無料で書き込めますが、見た目は Google Forms のままで、ページ上では iframe の中に表示されます。Google Apps Script を使えば自分の HTML フォームをシートにつなげられますが、そのコードは自分で書いて直すことになります。Formfacade なら、Google Forms のフォームが iframe なしの HTML フォームとしてサイトに表示され、その回答を Google Sheets にリンクできます。

以下は、HTML フォームの回答を Google Sheets に送る 3 つの方法と、それぞれの足りない点です。

Google Sheets は、見込み客や ToDo リストを管理するのに最も柔軟なデータベースです。ただ、Google Sheets にデータを集めるには、Google Forms のようなシンプルな方法を使うこともできますし、Google Apps Script で HTML フォームを作ることもできます。

この記事では、HTML フォームを Google Sheets に送信する 3 つの方法を見ていきます。

方法 1：Google Apps Script でウェブアプリを作る

さて、送り先は Google Sheets です。Google Sheets とつなげる、つまりやり取りする一番簡単な方法は、Google Apps Script で自分のフォームを書くことです。プログラミングの知識が十分にある方なら、Google Apps Script で実現できます。この方法を選ぶ場合は、上記の手順を順を追って説明しているこちらの記事を参照してください：https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175

要約：次の 3 つの手順を踏む必要があります：

手順 1：HTML フォームを自分で作るか、こちらの Bootstrap のサンプルから作ります：https://getbootstrap.com/docs/4.3/components/forms/

手順 2：HTML フォームの回答を POST リクエストとして受け取るウェブアプリを作ります

- フォームのフィールドに合わせたスプレッドシートを作ります。

- Google Apps Script を作成して設定します。フォームが送信されるたびに新しい行を追加してくれる既製のコードをコピーして貼り付けます。

- 承認 & Google Sheets に新しい Apps Script プロジェクトのトリガーを設定し、フォームの送信を検知できるようにします。

- プロジェクトをウェブアプリとして公開します。公開するとウェブアプリの URL が表示されます。次の手順のために保存しておきます。

手順 3：HTML フォームを Google Sheets にリンクします。

ウェブアプリの URL を HTML フォームに追加します。さらに、フォームのデータを JSON に変換して Google Sheets に送るコードを追加します。

これで、HTML フォームから Google Sheets にデータを送信できるはずです！

長所：

ニーズに合わせてカスタマイズできます。

短所：

コード関連の問題が起きたら、自分で保守とトラブルシューティングをする必要があります。経験豊富な開発者でも、Apps Script を一度で動かすのには苦労します。

開発者でないなら、もっとずっとシンプルな方法が必要かもしれません。

方法 2：Google Forms をそのままウェブサイトで使い、Google Sheets とつなげる。

これ以上ないほどシンプルです。フォームはあなたのウェブサイト上にあるので、ユーザーと共有する自分のリンクが手に入ります。Google Forms をウェブサイトに埋め込む方法はこちらです。Google Forms をウェブサイトに埋め込むには？

長所：

開発者である必要はありません。無料で、圧倒的にシンプルな方法です。

短所：

Google Forms の標準の見た目はプロらしくありません。ブランドが入っていないフォームを見て、ユーザーはどう思うでしょうか？プロらしいフォームさえ見せられないのに、すばらしい商品やサービスを提供できると信頼してもらえるでしょうか？

そこで Formfacade の出番です！

方法 3：Formfacade でフォームを HTML フォームに変換する

フォームを作成をクリックし、フォームに名前を付けて、Build formをクリックし、Proceedをクリックします。
「Share」タブをクリックします

Embed をクリックします
"My website is different from above" を選択して NEXT をクリックします
コードをコピーして、ウェブページに貼り付けます

"Responses" タブをクリックし、Google Sheets をクリックします
Link to Sheets をクリックし、Proceed をクリックします

メリット：

プログラマーでなくても、HTML フォームを作ることができます。

フォームはプロらしい見た目になり、ウェブサイトになじみます。iframe も、Google のブランド表示もありません。

短所：

このソリューションは、100 件を超える回答で月額 $8 です。

これで選択肢がそろいました。自分に一番合うものを検討してください。手間と効果のバランスが最も良い方法を見つけましょう。

まとめ

ウェブサイトのフォームの回答を Google Sheets に送る必要があるとき、Apps Script ではコードが必要で、ただの Google Forms のフォームはあなたのウェブサイトらしく見えません。Formfacade なら、埋め込みコードをウェブページに貼り付けて、回答を Google Sheets にリンクするだけです。フォームを作成して、上の手順を完了してください。ご不明な点があれば、サポートまでご連絡ください。