The Complete Guide to Styling Google Forms in Webflow
Webflow designers love clean aesthetics and total control over layout. But when clients demand Google Forms for direct Google Sheets collection, designers are usually stuck with default Google Forms iframes that break typography, ignore Webflow color swatches, and ruin responsive mobile layouts.
With CustomGForm, you can embed Google Forms directly into Webflow that look and behave like native Webflow components — all while saving submission data in real-time to Google Sheets.
Live Interactive Preview
Interact with this live demo form embedded directly in our documentation:
Styled to match modern design systems with smooth focus states, typography control, and instant validation.
Why Use CustomGForm in Webflow?
- Bypass Webflow Form Limits: Webflow forms have monthly submission quotas and paid limits. Google Forms backend handles unlimited submissions stored free in Google Sheets.
- Flawless Design Integration: Eliminate the awkward gray Google border and standard purple branding.
- No iFrame Scrolling Glitches: CustomGForm renders responsive DOM elements that inherit your container width and scale gracefully across desktop, tablet, and mobile breakpoints.
- Webhook & Zapier Ready: Trigger instant webhook notifications to Slack, Discord, or automated email workflows without third-party form aggregators.
3-Step Setup Guide for Webflow
Step 1: Connect Your Google Form & Choose Your Theme
- Open the CustomGForm Dashboard and enter your public Google Form link.
- Select your visual style:
- Match your Webflow site typography (Inter, Poppins, Roboto, etc.).
- Configure colors: background, input borders, button states, and accent hues.
- Adjust corner radius to match your Webflow button classes (e.g.
4px,8px, or full pill9999px).
- Click Save Changes.
Step 2: Grab the CustomGForm Embed Snippet
CustomGForm provides a clean 2-line snippet that embeds anywhere inside Webflow:
<!-- CustomGForm Webflow Inline Embed -->
<div data-customgform="YOUR_FORM_ID"></div>
<script async src="https://cdn.customgform.com/cgf.js"></script>| Option | Type | Description |
|---|---|---|
| data-customgform | string | Your unique CustomGForm Form ID (found in dashboard) |
| data-prefill_fields | string | Optional: Pre-fill query parameters (e.g. source=Webflow) |
| data-theme | string | Optional: Set to "dark" or "light" |
Replace YOUR_FORM_ID with your custom ID (e.g. cme8v3p530011wnq8z6hscwfa).
Step 3: Embed in Webflow Designer
- In Webflow Designer, open the page and section where you want your form.
- From the Add Elements panel (A), drag an Embed component (under Components / Advanced) onto your canvas.
- In the HTML Embed Code Editor modal, paste your CustomGForm snippet.
- Click Save & Close.
- Publish your Webflow site to preview the live rendered form!
Webflow Tips & Tricks
- Container Sizing: Wrap the Embed element inside a
divblock with a class like.form-containerwithmax-width: 640px; margin: 0 auto;for a centered, magazine-style layout. - Dark Mode Support: If your Webflow project uses dark mode toggles, simply add
data-theme="dark"to match dark backgrounds seamlessly. - Custom Redirects: Use CustomGForm settings to forward respondents to a custom Webflow
"/thank-you"page with animations and custom micro-interactions.
Style Google Forms in Webflow Like a Native Component
Collect unlimited submissions in Google Sheets without hitting Webflow form limits or paying extra for form apps.
How to Embed and Customize Google Forms in WordPress (No Plugins Required)
Learn how to embed, style, and customize Google Forms in WordPress Gutenberg, Elementor, or Classic Editor without slow plugins or iframe issues.
Add Beautiful Custom Google Forms to Your Shopify Store
How to embed branded, conversion-optimized Google Forms on Shopify product pages, contact pages, or customer intake forms with zero theme code conflicts.