Zapier を使って Netlify のサイトに設置したフォームと Google スプレッドシートを連携させる

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は Zapier というサービスを使って、Netlify で作成したサイトに設置してあるフォームと Google スプレッドシートを連携させる方法についてまとめたいと思います。

Zapier とは?

Zapier ロゴ

Zapier とは、様々な種類のWebアプリケーションを連携させ、自分なりのワークフローを作成してルーチン的な業務を自動化することができるサービスです。

Google カレンダー、 Google スプレッドシートや、 Trello などのタスク管理ツール、 Slack などのチャットツール、 Twitter や Facebook などのSNSなど、多くの種類のアプリケーションに対応しており、その中に Netlify も含まれています。

Zapier は「Zap」という単位でワークフローを作成し、そこで「Trigger」というワークフローの起点となる条件と、「Action」というそれを受けて発火させる行動をそれぞれ選択します。

Netlify のサイトに設置したフォームと Google スプレッドシートを連携させる

Zapier のダッシュボードに追加された Netlify とスプレッドシートの連携の Zap
Netlify とスプレッドシートを連携する Zap を Zapier のダッシュボードに新規作成した状態

今回はこの Netlify で作成したフォームに問い合わせが届いた時に、スプレッドシートに内容が自動で追加されるように設定するZapを作成してみたいと思います。

「Netlify で作成したフォームに問い合わせが届いた際」が Trigger で、「スプレッドシートに内容が自動で追加される」が Action になります。

1. Netlify 側の設定を行う

新規作成した Zap の設定画面。ここで Netlify の連携を行います

まず Sign in to Netlify から Netlify と連携します。

連携させるサイトとフォームを指定する画面

その後、Customize Submissionの Site と Form フィールドに連携させるサイトとフォームを指定します。

2. Google スプレッドシート側の設定を行う

一行目にフォームのデータの数だけタイトルを持つスプレッドシートの画像

先に前もって一行目にフォームのデータの数だけタイトルを持つスプレッドシートを用意しておきます。(フォームのデータは後のCustomize Spreadsheet Rowのところで確認することができます)

Netlify の設定を終えた状態。ここでスプレッドシートとの連携を行います

次に Sign in to Google Sheets を押して Google スプレッドシートと連携させます。

連携させるシートと列を指定する画面

その後、Customize Spreadsheet Row でフォームデータを追加する列を指定します。

設定し終わったら、テストデータを送信し、データの連携が成功しているかを確認することが出来ます。

全ての確認が終わった後、右上のトグルボタンを押すとZapが有効化されます。

3.設定完了

これでフォームにお問い合わせが届いた際に、スプレッドシートに自動で内容が追加されていくようになりました。ちなみにこのZapは異なるフォーム・異なるシートで幾つでも作成可能です。

他にも Netlify 周りでは、スプレッドシートだけでなく Slack や Gmail との連携の Zap も用意されています。

まとめ

今回は Zapier を使っての Netlify と Google スプレッドシートなどとの連携について書きました。

Netlifyを使っている方、使ってみようと考えている方の参考になれば幸いです。

シリーズ「Netlify CMSを実践で使ってみた」として、他にもNetlify CMSの感触・知見・TIPSについて書いた記事をまとめています。Netlify CMSやNetlify関連の周辺トピックに興味のある方は、シリーズの他の記事もぜひ読んでいただけたらと思います!

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

関連リンク


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。