How to Embed and Style Google Forms in Framer
Framer has become the go-to design and website building tool for modern startups, creators, and product teams. While Framer excels at animations and micro-interactions, handling form data and integrations often creates friction:
- Native Framer forms have submission limits on free and basic plans.
- Syncing Framer form responses to Google Sheets usually requires paid Zapier or Make subscriptions.
- Embedding default Google Forms directly ruins Framer's sleek, ultra-modern aesthetic with clunky iframe styling.
CustomGForm gives you the best of both worlds: high-fidelity, designer-grade forms that match your Framer design system with zero-cost Google Sheets backend storage.
Live Interactive Preview
Test this live custom form styled to match high-end startup landing pages:
Sleek inputs, subtle borders, and smooth focus states designed for modern Framer templates.
Why Framer Designers Love CustomGForm
- Match Any Framer Theme: Easily match your project's Inter, Satoshi, Plus Jakarta Sans, or custom web fonts.
- Unlimited Free Submissions: Bypass Framer form tier limits. Google Forms handles millions of entries for free.
- Direct Google Sheets Integration: Sales leads, waitlist signups, and survey answers land directly into your Google Sheets spreadsheet instantly.
- Smooth Responsive Breakpoints: CustomGForm naturally flexes from desktop (
1200px+) to tablet (810px) and phone (390px) breakpoints.
3-Step Setup Guide for Framer
Step 1: Connect & Customize Your Form
- In the CustomGForm Dashboard, paste your public Google Form link.
- Customize the design:
- Select your brand's primary color for buttons and focused inputs.
- Configure typography to match your Framer project text styles.
- Adjust border radius (e.g.
12pxor16pxfor modern rounded startup cards).
- Save changes to get your unique Form ID.
Step 2: Copy the Framer HTML Snippet
<!-- CustomGForm Framer 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=framer) |
| data-theme | string | Optional: Set to "dark" or "light" |
Replace YOUR_FORM_ID with your real CustomGForm ID (e.g. cme8v3p530011wnq8z6hscwfa).
Step 3: Embed in Framer Canvas
- Open your project in the Framer Desktop App or Web Editor.
- Press Insert (I), expand Utility, and select Embed.
- Drag the Embed component onto your Framer frame or section.
- In the right-hand properties sidebar:
- Set Type to HTML.
- Paste your CustomGForm embed code into the HTML textarea.
- In the layout properties, set:
- Width:
100%orFill - Height:
Fit Contentor assign fixed minimum pixels (e.g.500px)
- Width:
- Publish your Framer site to test the live interactive form!
Pro Tips for Framer
- Stack Centering: Place the Embed component inside a Framer Stack with auto-layout and set horizontal alignment to center with a max-width of
560pxor640px. - Dark Mode Templates: If building a dark-mode tech site, simply add
data-theme="dark"to render sleek dark inputs with high contrast labels. - Custom Redirects: Direct respondents to a custom Framer confirmation page upon completion.
Embed High-Converting Google Forms in Framer Today
No paid form integrations or Zapier fees. Free plan available with real-time Google Sheets sync.
How to Customize and Embed Google Forms in Google Sites
Transform standard Google Forms in Google Sites with custom typography, brand colors, dark mode, and seamless responsiveness using CustomGForm.
How to Embed Custom Google Forms in Carrd (One-Page Sites)
Add beautiful, responsive Google Forms to your Carrd landing pages and portfolio sites using Carrd Embed elements with zero code bloat.