Google Sheets

Webflow gives you full control over site design, layout, and CMS-driven content. But it does not include a built-in connection to external spreadsheets. Teams that manage product catalogs, pricing tables, event schedules, or lead lists in Google Sheets have no native way to push that data into Webflow CMS collections or display it on pages without manual re-entry.

Connecting Google Sheets with Webflow solves that workflow problem. You can use a spreadsheet to manage CMS content, log submissions from Webflow forms, or show spreadsheet-based data on live pages. The connection usually runs through marketplace apps, automation platforms, embeds, or custom API calls, depending on how much control you need.

This integration is most useful for marketing teams logging leads, content strategists managing blog pipelines in spreadsheets, e-commerce managers keeping product catalogs current, and agencies coordinating CMS updates across client sites. Anyone who treats Google Sheets as a lightweight database for website content will find a practical path here.

How to integrate Google Sheets with Webflow

What is Google Sheets? Google Sheets is a cloud-based spreadsheet app in the Google Workspace suite. It supports real-time collaboration, revision history, and programmatic access through the Google Sheets API v4. Its Publish to Web feature and Apps Script extensibility layer make it a common data source for web integrations.

Teams connect Google Sheets and Webflow when they need non-technical collaborators to manage website content from a spreadsheet, when form submissions should land in a shared Sheet for tracking, or when live data like pricing or event schedules needs to appear on a Webflow page without manual republishing.

The Google Sheets-Webflow integration supports four approaches:

• Marketplace sync apps like Whalesync and Byteline handle two-way CMS data sync without writing code.
• Direct embeds let you display live Google Sheets data on Webflow pages using iframes and widgets.
• Automation platforms like Zapier and Make route data between Webflow forms, CMS collections, and Google Sheets through trigger-action workflows.
• The Webflow and Google Sheets APIs give you full control over bidirectional data sync, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Sync CMS data with Whalesync or Byteline

There is no official Google Sheets app on the Webflow Marketplace. Two third-party apps explicitly support Google Sheets-to-Webflow CMS sync. Whalesync provides two-way sync between Google Sheets and Webflow CMS collections, handling field mapping, automatic retries, and real-time updates through a visual interface. Byteline offers a similar CMS sync product positioned toward agencies managing data alignment across multiple client sites. Both apps require a Webflow plan that includes CMS access.

To set up Whalesync:

1. Install the Whalesync app from the Webflow Marketplace and connect your Webflow account via OAuth.
2. Connect your Google account and select the spreadsheet you want to sync.
3. Map spreadsheet columns to Webflow CMS collection fields in the Whalesync dashboard.
4. Choose sync direction (one-way or two-way) and activate the sync.

Once the sync is active, Whalesync starts applying the field mappings and direction settings you configured.

Whalesync and Byteline handle these sync scenarios:

• Spreadsheet rows create or update CMS items automatically
• CMS item changes in Webflow write back to the linked spreadsheet
• Historical data syncs on first connection, then stays current in real time
• Field-level mapping controls which columns correspond to which CMS fields

Whalesync is the more established option. Webflow uses Whalesync internally for its field events platform and other internal products. Byteline is worth evaluating if you manage multiple client sites and need agency-oriented sync features. Both apps abstract away the API complexity, but you still need to verify your CMS item count against plan limits before syncing large spreadsheets. The CMS plan supports 2,000 items, and the Business plan supports 10,000.

Embed Google Sheets data with Code Embed elements

When you need to display spreadsheet data on a page rather than sync it to the CMS, embedding is the simplest approach. Google Sheets has a built-in Publish to Web feature that generates an iframe URL, and Webflow's Code Embed element accepts that iframe directly. You can also use third-party widgets like Awesome Table for more interactive displays.

Embed a published Google Sheet

Google Sheets can publish any spreadsheet or individual sheet tab as a web-accessible iframe. This method requires no API keys, no authentication, and no automation tools. The embedded sheet auto-refreshes when the source data changes.

To embed a Google Sheet in Webflow:

1. In Google Sheets, go to File > Share > Publish to web. Select the sheet tab or range you want to display, choose "Embed" as the format, and copy the provided iframe code.
2. In Webflow, add a Code Embed element to your page by opening the add panel and dragging a Code Embed into a container or section element.
3. Double-click the Code Embed element to open the code editor, paste the iframe code, and save.
4. Publish your site to see the embedded sheet live.

After publishing, the embed reflects changes made to the source spreadsheet without any automation layer.

A standard embed looks like this:

<iframe
 src="https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml?gid=0&single=true&widget=false&headers=false&chrome=false"
 width="100%"
 height="600"
 frameborder="0">
</iframe>



Replace YOUR_SHEET_ID with the alphanumeric string between /d/ and /edit in your spreadsheet URL. URL parameters like gid=, range=, widget=, headers=, and chrome= control which tab, cell range, and UI chrome appear in the embed.

Iframe embeds preview directly on the Webflow canvas, which makes positioning straightforward. Wrap the Code Embed in a container or div block for proper responsive behavior. One important caveat: do not publish spreadsheets containing sensitive data. Changing the single=true parameter to single=false in the published URL exposes all tabs in the spreadsheet, not just the one you selected.

Embed an Awesome Table widget

Awesome Table converts Google Sheets data into interactive, filterable widgets with table, card, dashboard, and map views. The widget reads from your spreadsheet and renders a styled, searchable display on your Webflow page.

To add an Awesome Table widget:

1. In Webflow, go to Project Settings → Custom code in head and body tags → Head Code and paste the Awesome Table script tag there. You only need to add this script once, even if you use multiple widgets on the same page.
2. Add a Code Embed element to your page where you want the widget to appear.
3. Paste the Awesome Table <div> code into the Code Embed editor and save.
4. Publish your site — the widget renders only on the published site, not in the Webflow canvas, because it relies on a <script> tag.

Once published, the widget renders the spreadsheet in a more interactive format than a standard iframe embed.

Awesome Table widgets give you search, filtering, and sorting that a raw iframe embed does not support. The tradeoff is that you cannot preview the widget in Webflow before publishing.

Embed a Google Form linked to a spreadsheet

Google Forms stores all responses in a linked Google Sheet automatically. If you need form-based data collection with the responses going straight to a spreadsheet, embedding a Google Form on your Webflow page skips the need for any automation layer.

To embed a Google Form:

1. In Google Forms, click Send and select the embed tab (<>). Copy the iframe HTML.
2. In Webflow, add a div block for positioning, then drag an Embed element into it.
3. Paste the iframe code and publish. For responsive sizing, set the iframe width to 100% and control vertical spacing through the parent div block's padding and margin settings.

This keeps form responses flowing into the linked spreadsheet without adding Zapier, Make, or custom API logic.

Google Forms maintain their own styling inside the iframe. You cannot customize typography, border radius, or shadows beyond what the Google Forms theme editor provides.

Connect with Zapier, Make, or other automation tools

Automation platforms handle the authentication, data mapping, and scheduling without requiring you to write API integration code. They work well for form submission logging, CMS content pipelines, and order tracking.

Zapier supports Webflow triggers including New Form Submission, New Order, and Updated Order, along with Webflow actions such as Create Item, Create Live Item, Update Item, Update Live Item, Fulfill Order, Update Order, and Find a Live Item in a Collection. It offers pre-built templates, including a widely used form-to-Sheets template and a Sheets-to-CMS template for creating blog posts or product listings from spreadsheet rows.

Make supports Webflow triggers such as Watch Events and Watch Comment Threads, and Webflow actions including Create an Item, Delete an Item, Get a Collection, Get a Form Submission, Create a Product, Create an Asset Folder, Get a Comment Thread, and Get a Form. It provides more granular control for multi-step workflows and offers a free tier. A community-documented approach uses Make's custom webhook module as the form action URL, which sends submission data directly to Google Sheets and can redirect users to a thank-you page via a webhook response module.

viaSocket supports Webflow triggers including New Form Submission, New Order, Updated Order, and Site Published, along with Webflow actions such as Create Item, Create Live Item, Get all Sites, List Collection, Update Live Item, and Create Collection. It offers six pre-built templates covering both directions of the integration.

Common workflow patterns across these tools include:

• New Form Submission in Webflow → Create Spreadsheet Row in Google Sheets
• New Spreadsheet Row in Google Sheets → Create Item or Create Live Item in Webflow
• New or Updated Spreadsheet Row in Google Sheets → Update Live Item in Webflow
• New Order in Webflow → Create Spreadsheet Row in Google Sheets
• New collection item or CMS item in Webflow → append item data to a spreadsheet

To set up a Zapier form-to-Sheets workflow:

1. Go to zapier.com and create a new Zap.
2. Choose Webflow as the trigger app and set the trigger event to "Form Submission." Connect your Webflow account via OAuth and select your site and form.
3. Choose Google Sheets as the action app and set the action to "Create Spreadsheet Row."
4. Map your Webflow form fields to Google Sheets columns.
5. Test the Zap and click Publish Zap to activate it.

Once the Zap is live, each new submission is written to the target spreadsheet using the field mapping you set.

One known issue with Zapier: forms placed inside Webflow Components are not detected by the standard Webflow trigger. The workaround is to configure a webhook in Webflow's site settings under Apps and Integrations, select "Form Submission" as the trigger type, and paste a Zapier Catch Hook URL as the destination.

Build with the Webflow and Google Sheets APIs

For full control over data sync timing, field mapping, error handling, and custom business logic, you can connect the APIs directly. This approach requires server-side development — a Node.js server, Cloudflare Worker, or Vercel Edge Function. Never place API credentials in client-side JavaScript on your Webflow site, as they are visible in the page source to any visitor.

The APIs you need:

• The Google Sheets API v4 handles reading, writing, and appending spreadsheet data via REST endpoints using OAuth 2.0 authentication.
• Webflow's Data API v2 handles CMS collections, collection items, form submissions, and site publishing using Bearer token authentication.
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and collection_item_changed that your server can process and write to Google Sheets.

Custom API integrations handle scenarios that marketplace apps and automation tools cannot, such as conditional CMS updates based on spreadsheet formulas, filtered form routing to specific sheet tabs, or bidirectional sync with deduplication logic.

Sync form submissions to Google Sheets

When a visitor submits a Webflow form, a webhook delivers the submission data to your server, which then appends a row to a Google Sheet. This gives you full control over field mapping, data formatting, and error handling.

To implement form-to-Sheets sync:

1. Register a webhook on your Webflow site by sending a POST request to https://api.webflow.com/v2/sites/{site_id}/webhooks with triggerType set to form_submission and your server URL as the destination. You can filter for a specific form by including a filter object with the form name.
2. On your server, receive the webhook payload, verify the x-webflow-signature header, and extract the data object containing field values and the submittedAt timestamp.
3. Append the data to Google Sheets by calling POST https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}:append with valueInputOption=USER_ENTERED.

After that flow is in place, each webhook event becomes a new appended row in the spreadsheet.

Here is an example of the append step:

const { data, submittedAt } = req.body.payload;
const row = [
 submittedAt,
 data["First Name"],
 data["Last Name"],
 data["email"],
 data["Phone Number"]
];

await sheets.spreadsheets.values.append({
 spreadsheetId: SPREADSHEET_ID,
 range: 'Sheet1!A:E',
 valueInputOption: 'USER_ENTERED',
 resource: { values: [row] }
});



Always verify webhook signatures using the x-webflow-timestamp and x-webflow-signature headers to prevent unauthorized requests.

Push spreadsheet data to the Webflow CMS

Reading rows from a Google Sheet and creating CMS items is the most common API-based workflow. It requires three steps: read the spreadsheet data, get the target collection's field schema, and create items.

To implement Sheets-to-CMS sync:

1. Read spreadsheet data with GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}. Use values:batchGet if you need multiple ranges in a single API call.
2. Get the collection schema with GET https://api.webflow.com/v2/collections/{collection_id} to retrieve the field slugs you need for the fieldData object.
3. Create CMS items with POST https://api.webflow.com/v2/collections/{collection_id}/items. Set isDraft to false if you want items ready for publishing. Then publish them with POST https://api.webflow.com/v2/collections/{collection_id}/items/publish.

With that structure in place, spreadsheet rows can become staged or published CMS items depending on how you configure the write flow.

Store the returned Webflow item id in a dedicated column in your spreadsheet after each create call. Without this mapping, subsequent syncs create duplicate CMS items instead of updating existing ones. When a row already has a stored item ID, use PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id} to update instead of create.

Set up bidirectional sync

For two-way sync, combine Webflow webhooks with Google Apps Script installable triggers. Register webhooks for collection_item_created, collection_item_changed, and collection_item_deleted events, then write the changes to your spreadsheet. In the other direction, use an Apps Script installable edit trigger that fires when a user modifies a cell, calling UrlFetchApp.fetch() to PATCH the corresponding Webflow CMS item.

To implement bidirectional sync:

1. Register Webflow webhooks for CMS change events by sending POST requests to https://api.webflow.com/v2/sites/{site_id}/webhooks for each trigger type.
2. On your server, process incoming webhook payloads and write changes to Google Sheets using PUT https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}.
3. In Google Sheets, create an installable trigger via Extensions > Apps Script that monitors cell edits and pushes changes to Webflow using the Data API v2.

This gives you a two-direction workflow, but it still depends on careful ID mapping and trigger setup.

Note that simple onEdit triggers in Apps Script cannot call external APIs. You must use installable triggers, which run under the authorization of the user who created them and can call UrlFetchApp to reach the Webflow API.

What can you build with the Google Sheets Webflow integration?

Integrating Google Sheets with Webflow lets you manage and publish website content from a spreadsheet without manually updating CMS items or re-entering data.

• Lead capture with spreadsheet tracking: Route Webflow form submissions to Google Sheets so marketing teams can score, filter, and follow up on leads in a shared spreadsheet. Nursa, a Webflow Enterprise customer, uses this pattern via Zapier to capture and categorize prospective facility leads alongside Gmail notifications and BI tools.
• Programmatic content publishing: Manage hundreds of blog posts, job listings, or directory entries in a Google Sheet, then sync them to Webflow CMS collections. Content strategists and SEO managers add rows, and items appear on the site without opening Webflow.
• Live data displays: Embed a published Google Sheet on a Webflow page to show pricing tables, event schedules, or inventory status that update automatically when someone edits the spreadsheet. No automation tools or API calls required.
• Product catalog sync for e-commerce: Keep product names, descriptions, and prices in a Google Sheet and sync them to Webflow CMS items via Whalesync or the API. E-commerce managers update the spreadsheet, and the storefront reflects the changes without needing Webflow access.

If you need more control over conditional sync logic, deduplication, or multi-collection updates, the API integration path covers those cases with full flexibility.