Google Forms

How to integrate Google Forms with Webflow

Google Forms collects responses through familiar form interfaces while Webflow displays content and manages data through its CMS. Connecting them creates automated workflows where form submissions populate your site's content or trigger business processes without manual data entry.

Connect Google Forms to Webflow through direct iframe embedding for quick deployment, automation platforms like Zapier or Make for CMS synchronization without coding, or API integration for custom workflows and bidirectional data sync. Each method addresses different technical requirements and implementation timelines.

Embed Google Forms directly

Embed Google Forms into Webflow pages using the Embed element, which accepts the iframe code Google Forms generates. This method requires only copy-paste workflows and keeps visitors on your domain while Google handles form rendering, validation, and data storage. Forms automatically adapt to mobile devices without additional configuration.

Get your form's embed code by opening it in Google Forms, clicking Send, selecting the <> tab, and copying the iframe HTML. In Webflow, add a Div block to position the form, drag an Embed element into it, paste the code, and publish your site.

This integration enables the following capabilities:

• Brand consistency: Keep visitors on your domain instead of redirecting to forms.google.com
• Mobile-responsive collection: Forms automatically adapt to desktop, tablet, and mobile screens
• Zero maintenance: Form updates in Google Forms appear immediately without republishing your Webflow site
• Response validation and file uploads: Use Google Forms' built-in response validation and file attachment features

Styling constraints: Google Forms maintain their own styling within iframes. Control layout spacing through the parent Div block's padding and margins, but you cannot customize form field appearance beyond Google Forms' theme editor. No custom post-submission redirects or parent window access is possible due to cross-origin iframe restrictions.

Connect through automation platforms

Automation platforms create Webflow CMS items from Google Forms submissions without writing code. Zapier, Make, and viaSocket provide pre-built connectors that trigger when someone submits a form, then map response fields to your CMS collection fields.

Zapier offers the fastest setup with three official templates that configure common workflows quickly. Make provides a visual workflow builder with a free tier covering 1,000 operations monthly. viaSocket supports higher volumes with 2,000 free tasks per month.

Some common automation patterns using Google Forms and Webflow include:

• Lead capture to CMS: Create contact records in Webflow collections from Google Forms responses
• Event registration management: Populate attendee lists automatically as form registrations arrive
• Content submission workflows: Enable moderated user-generated content through form approval processes
• Real-time inventory updates: Trigger CMS item status changes based on Google Forms responses

Field mapping limitations: These platforms support basic field types like text, number, boolean, date, URL, email, and single image URLs. Reference fields and multi-reference fields cannot be mapped through the standard UI. For multi-reference field mapping, use Make's "Perform arbitrary API call" module to map these fields directly through the Webflow API.

Build with Google Forms and Webflow APIs

Build custom integrations using the Google Forms API and Webflow Data API when you need workflows that automation platforms cannot support. Create Google Forms programmatically from Webflow CMS data, sync responses bidirectionally, or implement custom validation logic through server-side code.

This approach requires server infrastructure because browsers block direct API calls due to CORS restrictions. Deploy middleware using Node.js, AWS Lambda, or Google Cloud Functions that authenticates with both platforms and proxies requests between services.

Google Forms OAuth 2.0 requires scopes https://www.googleapis.com/auth/forms.body for creating and updating forms and https://www.googleapis.com/auth/forms.responses.readonly for reading responses. Webflow Bearer tokens require scopes forms:read, forms:write, cms:read, and cms:write, which you generate through Workspace Settings.

Sync Webflow form submissions to Google Sheets

Capture Webflow form submissions and send them to Google Sheets using Webflow webhooks combined with the Google Sheets API. The Google Forms API provides read-only access to responses and does not support programmatic response creation, so you must use the Google Sheets API as an intermediary for write operations.

Set up the webhook by calling POST https://api.webflow.com/sites/{siteId}/webhooks with triggerType: "form_submission". Your server receives submission data in real-time, processes it, and appends rows to Google Sheets using POST https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}:append.

This pattern works when you need form responses centralized in Google Sheets for team access, reporting, or integration with other tools that read from Sheets.

Create Webflow CMS items from Google Forms responses

Pull Google Forms responses and create corresponding items in Webflow CMS collections using the forms.responses.list endpoint and Webflow Collections API. Poll for new responses at regular intervals or use Google Forms watches for real-time notifications via Google Cloud Pub/Sub.

Retrieve responses with GET https://forms.googleapis.com/v1/forms/{formId}/responses, map the response data to your CMS collection schema, then create items using POST https://api.webflow.com/collections/{collectionId}/items. Handle pagination when retrieving large response sets.

Real-time option - Set up push notifications by calling POST https://forms.googleapis.com/v1/forms/{formId}/watches with a Pub/Sub topic. Google sends notifications when responses arrive, though the notifications contain metadata only. Make a subsequent API call to retrieve the actual response data.

Watch lifecycle: Google Forms watches expire after 7 days. Renew them by calling the forms.watches.renew endpoint through a simple daily or weekly cron job. For most Webflow users, Google Apps Script triggers with the onFormSubmit event provide a simpler alternative that delivers complete response data without requiring Google Cloud infrastructure.

For developers needing to create new form responses from Webflow data, Google Apps Script's FormApp.createResponse() method combined with webhook triggers provides the most straightforward approach without requiring Google Cloud infrastructure.

Dynamically generate Google Forms from Webflow CMS data

Create Google Forms programmatically based on Webflow CMS content using forms.create and forms.batchUpdate. Read your CMS collections using the Webflow Collections API, transform the data into Google Forms' question format, and create forms through API calls.

Start by calling GET https://api.webflow.com/sites/{siteId}/collections to retrieve collection schemas, then GET https://api.webflow.com/collections/{collectionId}/items to fetch items. Create a base form with POST https://forms.googleapis.com/v1/forms, then add questions using POST https://forms.googleapis.com/v1/forms/{formId}:batchUpdate.

This pattern enables dynamic form generation for scenarios like product order forms that update when your product catalog changes, or event registration forms that populate options from your CMS. All form updates require the current revisionId to prevent conflicts when multiple processes modify the same form.

What you can build

Integrating Google Forms with Webflow creates interactive data collection workflows that populate your CMS, automate business processes, and maintain consistent user experiences across your site.

• Lead generation systems: Embed contact forms that capture prospect information directly into Google Sheets, then sync to Webflow CMS collections for display on team dashboards or automated nurture sequences
• Event registration platforms: Build registration pages with conditional form logic for different ticket types, automatically creating attendee records in your Webflow CMS that populate real-time participant lists
• Content submission portals: Enable community members to submit testimonials, portfolio items, or blog post drafts through forms that create draft CMS items for moderation before publication
• Product feedback loops: Deploy satisfaction surveys after purchase that write responses to Google Sheets for analysis while triggering CMS updates to customer profiles based on sentiment scores