フォームをZapierに接続する

利用可能なプラン: Professional、Business

フォームの送信内容を使ってZapierのZapをトリガーするのは簡単です。

このチュートリアルでは、フォームの送信がZapierの受信イベントをトリガーする方法と、その後送信フィールドを使ってZapierからGoogle Calendarのイベントを作成する方法を紹介します。

Zapierの受信Webhookのセットアップ

最初にZapエディタを開き、「Webhooks by Zapier」を選択します。

トリガーイベントとして「Catch Hook」を選択します。これにより、Zapierが各送信時にFormspreeから送られるイベントに反応するようになります。

「続ける」をクリックすると、WebhookのURLが表示されます。

次はFormspree側での作業です。ブラウザで2つのタブを管理する必要があります。また、Formspreeでフォームが作成・設定済みである必要があります。まだお持ちでない場合は、ダッシュボードから作成してください。

フォームのPluginsタブでZapierを選択し、ZapierのURLをコピーしてFormspreeのZapierモーダルに貼り付けます。「接続」をクリックして完了します。

次にZapierがWebhookのテストを求めます。このステップは省略しないでください！Zapierエディタにコンテキストを提供し、Zapの設定を簡単にするために必要です。「テストして続ける」をクリックすると、ZapierがWebhookの受信を待機し始めます。

フォームに既に送信内容がある場合は、Zapierプラグインモーダルを再度開き、「テストを送信」をクリックすることで、フォームからアーカイブされた最後の送信内容をZapierに送信できます。

あるいは、ウェブサイトから通常のフォーム送信を手動で行うか、https://test.formspree.io/のフォームを使ってテスト送信することもできます（HTMLを適切に編集してください）。

Google Calendarでのイベント作成

上記の手順で、クライアントとの予約スケジュールを目的としたフォームがあり、クライアント自身が”name”、“date”、“time”フィールドを入力して予約を作成するものとします。

前のステップでテスト送信を送ると、次のような画面が表示されます。

これで「When this happens（これが起きたとき）」から「Do this（これを行う）」の部分に進むことができます。

そこでGoogle Calendarを選択し、「Create detailed event（詳細なイベントを作成）」を選び、アカウントで認証します。オプションがたくさん並んだ大きなフォームが表示されます。各フィールドで、テストWebhookからZapierが解析したフィールドを選択し、自由なテキストと組み合わせることができます。

以下の動画で、サンプル値を使ってこれらのフィールドを選択する方法をご確認ください。

イベントが作成されました。

異なるデータでフォームを再度送信して、すべて正しく作成されるか確認してみましょう。