Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Contact Sales
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

You can connect your Builder form to any of thousands of apps with Zapier. Popular Zapier integrations include:

  • Google Sheets
  • Gmail
  • Slack
  • Google Calendar
  • Calendly
  • Google Drive
  • Twitter
  • Notion
  • Stripe
  • Salesforcce
  • Hubspot
  • Mailchimp

This document provides instructions on how to connect your Builder form to another app using Zapier's integrations.

The first step is setting your trigger. A trigger is the event that starts a zap. When you set up a trigger, Zapier monitors for this event. The trigger for this example is Webhooks by Zapier. Webhooks are automated messages sent between apps, which can include information about new items; for example, email addresses from sign-up forms.

  1. In Zapier, select the +Create zap button in the top left corner.
  2. Search for and select Webhooks by Zapier.
  3. For the Event, choose Catch Hook. The Catch Hook event waits for a new POST, PUT, or GET to a Zapier URL.
  4. Click the Continue button and follow the steps in the Zapier dialogue to complete setting up your Webhook URL. For detailed instructions, refer to the Zapier documentation, Trigger Zaps from Webhooks.
screenshot of create zap dialogue in Zapier with Catch Hook selected.

5. In the next section of the dialogue, Test Trigger, Zapier provides you with a Webhook URL. Click the Copy button and go to Builder.

screenshot of create zap dialogue in Zapier with the Test Trigger section open, which displays a webhook URL that you can copy.

Now, Zapier will provide you with a custom webhook URL. Copy this URL and navigate to your Builder form. Select the form layer and navigate to the options tab. Change "send form submission" from "email" to "custom". Paste your custom webhook URL in the "Action" input.

  1. In Builder, click on your Form and open the Edit dialogue.
  2. Choose Custom.
  3. In the Action field, paste your Webhook you copied from Zapier.
screenshot of Form Edit dialogue in Builder. The first field is where you select Custom and the Action field is where you paste the webhook from Zapier.

To test your trigger:

  1. In Builder, preview your Builder page.
  2. Fill out the form.
  3. Submit the form.
  4. In Zapier, click the Test Your Trigger button.

If Zapier finds your submission request, Zapier displays the request in the dialogue. For more detail, see the Test your Webhooks section of the Zapier document Trigger Zaps from Webhooks.

This step uses Mailchimp as an aexample, but most other integrations follow the same pattern. Choose your integration in Zapier and then follow the setup process that Zapier guides you through.

After setting up your webhook and testing your trigger, you need to tell Zapier to use the app you want to connect to. This example covers Mailchimp as the event for your form submissions to be sent to.

Go back into Zapier to the second part of setting up your zap, which is headed 2. Action.

  1. In the search bar, enter Mailchimp to filter and select Mailchimp.
screenshot of Step 2 of create zap dialogue in Zapier with theAction step expanded and the search bar populated with the word Mailchimp.

2. For the Event, select Add/Update Subscriber so when a user submits the form, their information is added to your Mailchimp audience.

3. Connect the Mailchimp account you want the form submissions to go to and select the correct audience and email value—this can be the email value from the test submission step earlier in the Zap. These are the required steps, but you can also add groups, tags, and other specifications.

Screenshot of Set Up Action section of Mailchimp dialogue that shows where you enter your Mailchimp account info.

3. Scroll down and click the Continue button.

4. In the Test Action section, click the Test action button to ensure that the form data is being properly sent from your Builder form to your Mailchimp audience.

Once your test data is successfully sent, you can turn on your Zap to make your form functional.

If you are using Airtable, follow the instructions above but in Step 4:

  1. Choose Airtable instead of Mailchimp.
  2. Select Create Record so that when a user submits the form, a new record with their information is added to your Airtable base.
  3. Connect to your Airtable account and select the base and table you want the form submissions to go to.
Screenshot of Set Up Action section of Zapier showing Airtable with the event of Create Record selected.
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy