Updated 
August 20, 2019

Share data between Webflow and third-party apps using Zapier

Zapier [↗] lets you connect over 1000 apps with the Webflow API. Once you connect your Webflow account to Zapier, you automate any of the following actions:

  • Update Item
  • Update Live Item
  • Create Item
  • Create Live Item
  • Fulfill Order
  • Unfulfill Order
  • Refund Order
  • Update Order

You can also create Zapier actions using the following triggers:

  • Form Submission — triggers when a new form submission occurs
  • New Order — triggers when a new order is placed
  • Updated Order — triggers when an order is updated
In this tutorial
  1. Learn how Zapier works
  2. Connect your Webflow account to Zapier
  3. Send Webflow form submission to another app
  4. Back up form file submissions through Zapier
  5. Import Collection content using Zapier
  6. Troubleshoot Zapier issues

Learn how Zapier works

A connection in Zapier is called a "Zap." Each Zap has two components a Trigger, which is an event in one app, that then starts an Action, which is something Zapier automatically performs in another app. For example, if you want to import CMS items from a spreadsheet, the Zap works as follows:

  • Trigger: Each time a new spreadsheet row is added...
  • Action: Zapier will create a new Webflow CMS item

Learn more about how Zapier works [↗].

Connect your Webflow account to Zapier

First, create a Zapier account [↗] if you don’t have one. Then add your Webflow account to Zapier’s connected accounts [↗].

You need to grant Zapier permission to access your Webflow account. 

Zapier uses oAuth to interface with your Webflow account (the same way Facebook and Google connect with their accounts). If you are already logged in to your Webflow account when you integrate with Zapier, Webflow will not require you to re-enter your password and will present you with an authorization screen immediately. 

Zapier does not have access to any of your account information, including your password.

Send Webflow form submission to another app

You can send Webflow form data to Zapier to automatically route form submissions to hundreds of apps, including Gmail, MailChimp, Salesforce, Google Drive and more. No more manually copy-pasting your form submissions from the dashboard into your different services.

Here are some powerful, pre-made “zaps” (pre-configured integrations) that you can add out-of-the-box to your Webflow site:

  • MailChimp – add someone to an email subscription list
  • Twitter – tweet out submitted data
  • Facebook Pages – post submitted data on your site’s Facebook Page
  • Google Sheets – add the data into a new spreadsheet row
  • Slack – pipe the data to a chat channel, like #customerservice, or as a direct message
  • Trello – create a new Trello card with the submitted data
  • LinkedIn – trigger a LinkedIn update
  • Toggl – create a new project to track
  • Evernote – create a new notebook in your company account
  • Asana – create a new project
  • Yammer – send out a new message using the form data
  • Pushbullet – send a link to the form data to get an instant notification
  • Sendwithus – send out an email containing the form data

To send form submissions to these other apps through Zapier:

  1. Login to you Zapier account
  2. Click on Make a Zap
  3. ‍Choose Webflow as your trigger app
  4. Select Form Submission as Webflow trigger
  5. Choose your Webflow Account
  6. Set up Webflow Form Submission by selecting the site you want to receive notifications from and the Form Name
  7. Click Fetch & Continue to test the Webflow connection. Make sure you have at least one recent form submission created or submit a new form submission on your website before testing the connection. If there's an issue with the connection troubleshoot your Webflow connection with Zapier (see below).
  8. Choose an action app and continue to setup your Zap Action following the Zapier guidelines.
  9. Once your Zap has been created, give it a name and switch it on.

Back up form file submissions through Zapier

You can collect files submitted through forms and store then directly in your online storage system using this Zapier integration. For example, if you wish to send form file uploads to Google Drive:

  1. Integrate Webflow and Google Drive via Zapier. Choose Webflow Form Submission as trigger. Choose Upload File to Google Drive as action.
  1. Follow the guide above to connect Webflow to Zapier if you haven't done so already and choose the project and form you wish to gather data from
  2. Connect your Google Drive account to Zapier if you haven’t done so already
  3. Set up the template by mapping the file URL field to the file field.
  1. (optional) specify a Google Drive folder where you want the files to be saved to keep your Google Drive folder organized
  2. Save the Zap and test by sending a new form submission that includes a file
For this Zapier integration to work, disable the login security of uploaded files in Project settings → Forms → Require login to access files. If you receive an error, make sure to toggle the login off, publish the site again, and send a new form submission to test with.
Pro tip

We recommend that you specify a file name in your Zapier template using other data from your form to easily identify your files. For example, Set the file name of uploaded CVs to be {name}'s CV. This way all résumés will be saved with the name of the submitter: John Doe's CV, Jannette Dawson's CV, and so on.

Import Collection content using Zapier

You can add content to your Webflow CMS from external apps by setting up a connection in Zapier — no coding required.

Let's look at an example of how this works. In this example, we're going to add a new blog post to our Webflow CMS each time a new row is added to a Google Sheet.

Note that the example Zap below doesn't publish the content, it just adds it to your CMS Collection for later review and publication. To publish content, you can use the "Create Live item" Webflow action in Zapier.

Create a Collection

Before you start setting things up in Zapier, you need to have a Collection in place on your site. In our example, the blog posts have the following fields:

Make sure you have a Collection in your site first. In our example, our blog posts have a title, a body, and a date.

Once you have a Collection on your site to serve as a "destination" for the content Zapier will be adding, you'll need to create a spreadsheet that you can import.

Create a spreadsheet

Now create a spreadsheet with a structure that mirrors your Collection's. Each new row we add will become a CMS item.

The spreadsheet we'll import content from, which is structured in the same way as the Collection I'm adding to. Each row represents a CMS item.
For some fields, you'll need to check our CMS API documentation for formatting guidance. For example, dates should be formatted like: 2016-10-24T19:41:52.325Z. The first part represents the calendar date, and the second part represents time of day.

Create a Zap

The Zap we're going to make will add new items to the Blog posts Collection each time a new row is added to our spreadsheet.

  1. Pick the app that you want to use for the Trigger. In this case, Google Sheets.
  2. Pick the Trigger you want to fire. In this case, New spreadsheet row.
  3. Pick the spreadsheet, worksheet, and trigger column that you want to pull content from
Make sure Zapier is looking at the right place to pull content from.
  1. Pick Webflow for the Action app. This tells Zapier you are going to make a change in Webflow when the Trigger is set.
  2. After you select "Create CMS Item" as the Action, map the fields from the spreadsheet to the fields in your CMS collection. Make sure to set the "Archived" or "Draft" field to continue.
Map your spreadsheet data to your CMS Collection.
  1. Hit "Create & Continue" to create the Zap and start migrating content.

Once the content migrates, you'll need to refresh the Designer to see the new content in your CMS panel.

Need to know
  • At the moment, you cannot map CMS reference and multi-reference fields to Zapier fields.
  • Currently, any video link sent to the CMS via the API (including Zapier) will not render right away. Instead, you’ll need to open the new Collection item, click into the video field, then click out. From here, you’ll see the video preview load as expected. This limitation is something our team is planning on improving in the future.

Troubleshoot Zapier issues

If at first you don't succeed… try, try again. In general, because use cases for Zapier vary so widely, getting your Zap to work correctly can take some trial and error. But stay patient! Once you get Zapier working for your site, you can do some amazing things.

Troubleshoot the connected Webflow account

If you're having trouble with your Webflow to Zapier integration, you can troubleshoot your connection settings from the Connected Accounts [↗] page in your Zapier dashboard.

You can test, rename, reconnect, or disconnect your existing Webflow account(s). If needed, you can also connect a new Webflow account. Learn all about connecting and removing accounts from Zapier [↗].

Troubleshoot problems with Zaps

If you are having other trouble with Zapier or your Zaps, check out the the Zapier  [↗]. You can also read about common problems [↗] and common error messages [↗] and how to troubleshoot them.

Still having trouble with Zapier?

Zapier integration help is outside the scope of Webflow support, however, if you couldn't resolve your issue, please contact us and we’ll help as much as we can.