Google Forms

Google Forms plugs a real gap in Webflow: quizzes, conditional logic, file uploads, and real-time response charts that the native Form block doesn't cover. Embed a form directly on a page, route responses to a linked Google Sheet, or push submissions into CMS collections through automation—all while page design and hosting stay in Webflow.

Common uses include lead capture, newsletter signups, RSVPs, attendee lists, orders, and feedback. If you build client sites, it's a fast way to add survey functionality without writing form-handling code.

How to integrate Google Forms with Webflow

What is Google Forms? Google Forms is an online form and survey builder in Google Workspace. It lets you create forms and analyze responses in real time after you send them out. It supports question types, including short answer, paragraph, multiple choice, checkboxes, dropdown, file upload, linear scale, multiple choice grid, checkbox grid, date, and time, along with conditional logic that shows questions based on previous answers.

Reach for this combination when a page needs data collection that goes beyond a basic contact form. A registration page or customer survey can live inside Google Forms while the rest of your site stays in Webflow, and quizzes can use the same pattern. From there, you decide whether responses stay in Google Sheets or flow into your CMS.

The Google Forms–Webflow integration has two basic jobs: placing the form on the page and moving response data after submission. Direct iframe embedding handles the page placement with a Code Embed element. For CMS sync, automation tools like Zapier and Make can push form responses into your CMS without code, while the Google Forms API and the Data API give you full control over response syncing and form management.

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

Embed a Google Form with a Code Embed element

The simplest method places a Google Form directly on your page using a Code Embed element. Google Forms generates an iframe snippet that you paste into the Designer. Google handles rendering and validation, including the mobile layout, so the form works without any extra setup. Take this path when you want response collection without touching CMS or automation. You need a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan to use Code Embed. Free accounts can't use it.

To set up the integration:

1. Open your form in Google Forms and click Send in the top right.
2. Click the Embed tab (the <> icon), then click Copy to grab the iframe HTML.
3. In the Designer, open the Add panel, drag a Code Embed element onto the canvas, paste the iframe HTML, then save and publish.

This method covers common collection jobs such as lead capture forms, newsletter signups, event registration, visitor RSVPs, customer feedback surveys, and quizzes.

The tradeoff is control. The iframe security boundary prevents JavaScript or CSS on your site from modifying the form internals. You can only customize what the Google Forms theme editor exposes, and submissions bypass native form processing entirely. You can still control the surrounding layout through the parent Div block's padding and margins.

Add a Google Form with a button or pre-filled link

To keep the form off the page, link to the hosted Google Form. This approach keeps your page light and sends visitors to the hosted form. It works well for forms with sensitive sign-in requirements or long surveys that feel cramped in an iframe. Use either the standard responder link or a pre-filled link that populates fields in advance.

Link a button to the responder URL

A button is the fastest way to point visitors at a Google Form. Open the form, click Preview or Published, then Copy responder link.

To add the button:

1. Open the Add panel, go to Elements > Basic, then drag a Button element onto the canvas.
2. In the element settings panel, paste the responder URL and optionally check Open in a new tab.

This keeps the form on Google's domain while the call to action lives on your page.

Use a pre-filled form link

Pre-filled links let you populate answer fields before a visitor opens the form. This helps when you already know context like a campaign name or product reference. In Google Forms, open the More menu (⋮), select Pre-fill form, fill in the fields, then click Get link.

To use the pre-filled link:

1. Copy the generated URL from Google Forms.
2. Paste it into a button or link block in the element settings panel.

The visitor lands on a form that already has the fields you specified filled in.

Connect with Zapier or Make

When you need form responses inside your CMS rather than locked in Google Sheets, automation platforms bridge the two. They trigger on a new Google Forms response and map fields to a CMS collection item. This is the no-code path to CMS population, and it avoids both iframe limits and API development.

Zapier offers the most complete connection through its Webflow and Google Forms integration page, with pre-built templates and no Google Sheets intermediary required.

• Google Forms "New Form Response" → Webflow Create Item or Create Live Item
• Google Forms "New or Updated Form Response" → Webflow Update Item or Update Live Item
• Webflow "New Form Submission" → tracked alongside Google Forms responses
• Webflow "New Order" or "Updated Order" → Fulfill Order or Update Order

Make also lists this pairing. Its Webflow triggers include "Watch Comment Threads" and "Watch Events." Its Webflow actions include Create an Item, Create a Product, Create an Asset Folder, Delete an Asset, Delete an Item, and Get a Collection, though Make currently has no pre-built templates. Zapier remains the most practical starting point for CMS workflows today.

Build with the Google Forms API and Webflow Data API

For API-level control over response syncing and form management, build directly against both APIs. This path also supports custom validation. You need server-side development and OAuth setup to make it work. In return, you control how responses map into your CMS. You handle authentication and field mapping yourself, along with error handling.

The Google Forms API handles form schema retrieval and response listing. It also handles watch notifications.

The Data API handles CMS collections and form submissions.

Webhooks trigger real-time events like collection_item_created between systems.

To read form responses, you need one of the OAuth scopes forms.responses.readonly, drive.file, or drive. For CMS write operations, you need the CMS:write scope.

Poll responses and sync to CMS

The simplest API approach polls Google Forms on a schedule and writes new responses to your CMS. Fetch the form schema once to map question IDs, then list responses filtered by timestamp.

To implement this:

1. Call GET https://forms.googleapis.com/v1/forms/{formId} to retrieve question IDs and map them to CMS field slugs.
2. Call GET https://forms.googleapis.com/v1/forms/{formId}/responses with a filter of timestamp > <last_checked> in RFC3339 format. Use pageToken to paginate.
3. For each response, call POST https://api.webflow.com/v2/collections/{collection_id}/items with a fieldData object that includes name and slug. A successful create returns HTTP 202.

For larger batches, use the bulk endpoint at POST https://api.webflow.com/v2/collections/{collection_id}/items/bulk to create up to 100 items in a single request.

Sync in real time with watches and Pub/Sub

Google Forms has no native HTTP webhooks. For real-time sync, use the watch mechanism that delivers notifications to a Google Cloud Pub/Sub topic. This is the biggest complexity jump in the integration, since you must provision Pub/Sub infrastructure first.

To set this up:

1. Create a Cloud Pub/Sub topic and subscription, then grant publish permission to forms-notifications@system.gserviceaccount.com on your topic before you create any watch.
2. Call POST https://forms.googleapis.com/v1/forms/{formId}/watches with the Pub/Sub topicName and eventType: "RESPONSES". Watches expire after 7 days, so renew them with watches.renew().
3. On a notification, call forms.responses.list with filter=timestamp > <last_checked>, then POST the mapped fields to your CMS.

Pub/Sub notifications carry only formId, watchId, eventType, messageId, and publishTime. They don't include response data, so you always need a follow-up API call to fetch the actual answers.

What can you build with the Google Forms Webflow integration?

Integrating Google Forms with your site lets you collect structured survey and form data without building a form engine from scratch.

• Embedded survey pages: Drop a customer feedback survey or quiz into a page with a Code Embed element. Google handles validation and mobile layout while the page styling stays yours.
• Lead capture into CMS: Use Zapier to create a CMS contact record every time a Google Form newsletter signup arrives. Each response becomes a published or draft collection item.
• Event registration with live attendee lists: Trigger a CMS item on each new RSVP response so an attendee list page populates automatically as registrations come in.
• Moderated content submission portals: Capture user-generated submissions through a Google Form, then create draft CMS items you can review before publishing. Approved items go live on the site.

If you need more control over real-time syncing or custom field validation, the API integration path covers those cases with full flexibility.