Zapier を使って Netlify のサイトに設置したフォームと Google スプレッドシートを連携させる
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は Zapier というサービスを使って、Netlify で作成したサイトに設置してあるフォームと Google スプレッドシートを連携させる方法についてまとめたいと思います。
Zapier とは？
Zapier とは、様々な種類のWebアプリケーションを連携させ、自分なりのワークフローを作成してルーチン的な業務を自動化することができるサービスです。
Google カレンダー、 Google スプレッドシートや、 Trello などのタスク管理ツール、 Slack などのチャットツール、 Twitter や Facebook などのSNSなど、多くの種類のアプリケーションに対応しており、その中に Netlify も含まれています。
Zapier は「Zap」という単位でワークフローを作成し、そこで「Trigger」というワークフローの起点となる条件と、「Action」というそれを受けて発火させる行動をそれぞれ選択します。
Netlify のサイトに設置したフォームと Google スプレッドシートを連携させる
今回はこの Netlify で作成したフォームに問い合わせが届いた時に、スプレッドシートに内容が自動で追加されるように設定するZapを作成してみたいと思います。
「Netlify で作成したフォームに問い合わせが届いた際」が Trigger で、「スプレッドシートに内容が自動で追加される」が Action になります。
1. Netlify 側の設定を行う
まず Sign in to Netlify から Netlify と連携します。
その後、Customize Submissionの Site と Form フィールドに連携させるサイトとフォームを指定します。
2. Google スプレッドシート側の設定を行う
先に前もって一行目にフォームのデータの数だけタイトルを持つスプレッドシートを用意しておきます。（フォームのデータは後のCustomize Spreadsheet Rowのところで確認することができます）
次に Sign in to Google Sheets を押して Google スプレッドシートと連携させます。
その後、Customize Spreadsheet Row でフォームデータを追加する列を指定します。
設定し終わったら、テストデータを送信し、データの連携が成功しているかを確認することが出来ます。
全ての確認が終わった後、右上のトグルボタンを押すとZapが有効化されます。
3.設定完了
これでフォームにお問い合わせが届いた際に、スプレッドシートに自動で内容が追加されていくようになりました。ちなみにこのZapは異なるフォーム・異なるシートで幾つでも作成可能です。
他にも Netlify 周りでは、スプレッドシートだけでなく Slack や Gmail との連携の Zap も用意されています。
まとめ
今回は Zapier を使っての Netlify と Google スプレッドシートなどとの連携について書きました。
Netlifyを使っている方、使ってみようと考えている方の参考になれば幸いです。
Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています
現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！関連リンク
