Google Sheets

How to integrate Google Sheets with Webflow

Managing website content across different tools creates friction when marketing teams update spreadsheets while developers maintain Webflow sites. Form submissions accumulate in databases that marketing can't access, and inventory updates require developer intervention for simple price changes.

You can integrate Google Sheets with Webflow using third-party automation platforms like Zapier. Direct embeds display live spreadsheet data on published sites. Google Apps Script automates form capture at zero cost. Custom API implementations sync CMS collections with spreadsheet data bidirectionally.

Use third-party automation platforms

Automation platforms connect Webflow forms to Google Sheets through visual workflow builders that handle API authentication and error recovery automatically. Zapier provides drag-and-drop field mapping with pre-built templates that connect form submission triggers to spreadsheet row creation. The platform handles OAuth 2.0 authentication for both services and retries failed operations automatically.

Common workflows include the following:

• Capture form submissions by sending contact data, lead inquiries, or event registrations to Google Sheets rows
• Create CMS items from Google Sheets rows that publish blog posts, product listings, or team member profiles
• Update inventory by syncing spreadsheet data to existing CMS items for stock counts and pricing
• Send notifications through email, Slack, or SMS when high-priority submissions arrive

Make supports more complex workflows with conditional logic and data transformation functions. The visual scenario builder handles multi-step processes like calculating lead scores in spreadsheet formulas and creating CMS items only for qualified prospects.

Note: Webflow API v1 is deprecated with final shutdown on March 31, 2025. Make has migrated to API v2, but verify current platform support before building production workflows.

Both platforms enforce rate limits and polling intervals that add delays to data synchronization. File uploads and image URLs require special handling since these don't transfer automatically. For production implementations, consult the Webflow API documentation and Google Sheets API documentation for current rate limits.

Embed Google Sheets data directly

Direct embeds display live Google Sheets data on published sites without manual updates. This approach works best for public data like pricing tables, product catalogs, or event schedules that update frequently.

To publish spreadsheet to web:

1. In Google Sheets, go to File > Share > Publish to web
2. Select specific sheet or entire document
3. Choose Embed format for iframe code
4. Copy the provided embed code

To add to Webflow:

1. Drag an Embed element onto your page
2. Paste the Google Sheets embed code into the Embed element
3. Adjust width and height constraints
4. Publish your site

This method requires no authentication and updates automatically when you modify the spreadsheet. The embed displays basic spreadsheet formatting but offers limited responsive design control.

For better styling control, use JavaScript to fetch spreadsheet data via the Google Sheets API and render it with custom HTML. Add a Code Embed element with fetch() calls to the Google Sheets API endpoint GET /v4/spreadsheets/{spreadsheetId}/values/{range}, then parse the returned JSON into your designed layout. The API returns cell values as strings by default unless valueRenderOption=FORMATTED_VALUE is specified.

Google Sheets API rate limits:

• 300 read/write requests per minute per project
• 60 write requests per minute per user per project
• Exceeding limits triggers 429: Too many requests errors

Implement exponential backoff strategies for production implementations that handle high traffic volumes.

Use embeds for read-only data display where content freshness matters more than visual presentation. Not suitable for form submission capture, bidirectional CMS synchronization, or workflows requiring guaranteed delivery.

Build with Google Apps Script for zero-cost automation

Google Apps Script provides server-side JavaScript execution directly within Google Sheets for custom integrations without monthly platform fees. This method runs entirely on Google infrastructure but operates without guaranteed delivery or automatic retry mechanisms.

Apps Script triggers respond to spreadsheet events like cell edits or structural modifications. The onEdit() trigger fires when users manually modify cells, while onChange() detects structural changes like row insertions. Custom implementations can send HTTP requests to external APIs via UrlFetchApp.fetch().

Important: Google Apps Script has fundamental CORS limitations for browser-based requests. Web apps cannot properly handle browser preflight requests, which means direct client-side calls from Webflow forms will fail. This approach works only for server-to-server communication or when using Apps Script as a webhook endpoint that processes POST requests from Webflow's server-side form submissions.

To set up form-to-sheet automation:

1. Create a Google Sheet with column headers matching form fields
2. Open Extensions > Apps Script
3. Write a doPost() function that accepts webhook POST requests
4. Parse incoming JSON from Webflow form submissions
5. Append data to spreadsheet rows using SpreadsheetApp
6. Deploy script as web app with public execution permissions
7. Configure your form to POST data to the generated webhook URL

To sync from Sheets to Webflow, use UrlFetchApp.fetch() within Apps Script triggers to call the Webflow CMS Items API. Implement row-to-item ID mapping in a hidden column to track which spreadsheet rows correspond to which Webflow CMS items. Use the PATCH /v2/collections/{collection_id}/items/{item_id} endpoint to update existing items.

Apps Script executions have quota restrictions based on account type. Free Google accounts receive 90 minutes of script execution time per day, while Google Workspace accounts receive 6 hours. Script execution timeout limits are 6 minutes per execution.

Build with Webflow and Google Sheets APIs

Direct API integration provides complete control over data synchronization, error handling, and business logic for production applications requiring guaranteed delivery and complex transformations.

Both platforms use OAuth 2.0 authentication with granular permission scopes.

Note: Webflow API v1 is deprecated with final shutdown on March 31, 2025. All new implementations should use API v2.

Sync form submissions to Google Sheets

Webflow webhooks provide real-time form submission notifications without polling overhead. Register a webhook via the Create Webhook endpoint with triggerType: "form_submission" pointing to your server's HTTPS endpoint.

Webflow webhook payload structure:

{
  "triggerType": "form_submission",
  "payload": {
    "submittedOn": "2025-11-12T10:30:00.000Z",
    "data": {
      "name": "John Doe",
      "email": "john@example.com",
      "message": "Product inquiry"
    }
  }
}

Transform the nested payload into a flat array matching your spreadsheet columns, then append using the Google Sheets values:append endpoint:

POST /v4/spreadsheets/{spreadsheetId}/values/Sheet1!A:D:append?valueInputOption=USER_ENTERED
Authorization: Bearer {access_token}

{
  "values": [
    ["2025-11-12T10:30:00.000Z", "John Doe", "john@example.com", "Product inquiry"]
  ]
}

Setting valueInputOption=USER_ENTERED makes Google Sheets parse formulas, dates, and number formats automatically as if a user typed the values manually.

Webflow includes an x-webflow-signature header containing HMAC SHA256 hash of the raw request body. Validate this using your webhook's secret key to prevent unauthorized POST requests. The Webflow webhooks documentation provides signature verification examples.

Create CMS items from spreadsheet data

Pull data from Google Sheets and create Webflow CMS collection items programmatically for bulk content publishing workflows. Read spreadsheet ranges using the values.get endpoint, transform rows into field data objects, then create items via the Webflow Create Item endpoint.

To read spreadsheet data:

GET /v4/spreadsheets/{spreadsheetId}/values/Products!A2:E100
Authorization: Bearer {access_token}

The API returns a 2D array where the first array contains column headers and subsequent arrays represent row data. Map column positions to Webflow field slugs, then construct CMS item requests.

To create Webflow CMS items:

POST /v2/collections/{collection_id}/items
Authorization: Bearer {webflow_token}
Accept-Version: 1.0.0

{
  "isArchived": false,
  "isDraft": false,
  "fieldData": {
    "name": "Product Name",
    "slug": "product-name",
    "price": 29.99,
    "description": "Product description text"
  }
}

The slug field must be lowercase with hyphens replacing spaces. Transform spreadsheet values accordingly. For multi-reference fields linking to other collections, provide arrays of item IDs.

Implement bidirectional CMS synchronization

Two-way sync keeps Google Sheets and Webflow CMS collections in alignment, allowing non-technical team members to edit content in spreadsheets while maintaining Webflow as the source of truth for published sites.

Architecture requirements:

• Maintain a mapping table linking spreadsheet row numbers to Webflow item IDs
• Register Webflow webhooks for collection_item_created, collection_item_changed, and collection_item_deleted events
• Implement conflict resolution when simultaneous edits occur
• Track last-modified timestamps to determine update priority

For Webflow to Sheets flow, configure webhooks via the Create Webhook endpoint that notify your server when CMS items change. Your server receives complete item data in the webhook payload, locates the corresponding spreadsheet row using the mapping table, then updates cells via the Google Sheets values.update endpoint.

For Sheets to Webflow flow, poll for spreadsheet changes using the values.get endpoint on a schedule, or implement Google Apps Script onEdit() triggers that POST to your webhook endpoint. Compare retrieved values against cached state to identify modified rows, then update Webflow items using the PATCH endpoint with partial field data.

When the same field changes in both systems simultaneously, implement a last-write-wins policy using ISO 8601 timestamps. Store lastModifiedOn values from Webflow and updatedAt timestamps from your sync logic to determine precedence.

Update inventory and pricing programmatically

E-commerce and product catalog sites benefit from spreadsheet-driven inventory management where stock counts, pricing tiers, and availability status sync to Webflow CMS collections automatically.

Implementation pattern:

1. Structure Google Sheets with columns for SKU, Quantity, Price, and Webflow Item ID
2. Schedule periodic sync jobs that fetch modified rows
3. Call the Webflow Update Item endpoint for changed products
4. Set isDraft: false to publish changes immediately

The PATCH method on Webflow's Update Item endpoint modifies only specified fields, leaving other field values unchanged. This allows you to update inventory counts without re-sending product descriptions, images, or other static data.

PATCH /v2/collections/{collection_id}/items/{item_id}
Authorization: Bearer {webflow_token}

{
  "fieldData": {
    "inventory-count": 47,
    "in-stock": true,
    "price": 34.99
  }
}

Site publishing requires processing time to propagate changes to live sites. Batch inventory updates by scheduling publishing once per sync cycle rather than after each individual item update.

What you can build

Integrating Google Sheets with Webflow enables collaborative data workflows where teams manage website content through spreadsheets while maintaining Webflow's design control and hosting infrastructure.

• Lead capture dashboards: Build form submission tracking systems where sales teams view, filter, and score incoming leads in Google Sheets with real-time updates from Webflow contact forms without requiring Webflow workspace access
• Real-time product catalogs: Create e-commerce sites where inventory managers update stock counts, pricing, and product availability in Google Sheets that automatically sync to live CMS collections without manual editing
• Event registration systems: Launch booking sites where Google Sheets acts as the attendee database, collecting RSVP form submissions and enabling event coordinators to manage registrations through familiar spreadsheet interfaces
• Content publishing workflows: Deploy blog or news sites where writers draft posts in spreadsheet rows that bulk-create CMS items for review before publishing