How to Embed Custom Google Forms in Carrd (One-Page Sites)
Carrd is the gold standard for simple, fast, fully responsive one-page websites. Whether you are building an MVP waitlist, a personal portfolio contact form, or an event signup page, you need form submissions that just work.
However, Carrd's native form elements require a paid Carrd Pro plan to connect to third-party endpoints or Google Sheets. Standard Google Forms iframes look bulky, destroy Carrd's sleek minimalist proportions, and introduce ugly scrollbars.
CustomGForm lets you embed clean, responsive Google Forms directly into your Carrd site for free, automatically saving all leads and responses directly to Google Sheets.
Live Interactive Preview
Test this live interactive form designed for high-converting one-page landing pages:
Ultra-fast loading form that fits seamlessly into Carrd containers without layout shifts.
Why CustomGForm is Perfect for Carrd
- No Paid Form Upgrades Needed: Collect unlimited responses without upgrading to expensive tier subscriptions.
- Featherlight Script Weight: CustomGForm loads in milliseconds via CDN, keeping your Carrd site blazing fast.
- Match Carrd Themes: Align input styles, font weights, and button roundness with your Carrd template.
- Real-Time Google Sheets Sync: Analyze responses, create email campaigns, or share leads with clients via Google Drive.
3-Step Setup Guide for Carrd
Step 1: Connect & Style Your Form
- In the CustomGForm Dashboard, paste your public Google Form link.
- Adjust your styling:
- Match your Carrd site's font and primary button color.
- Set border radius to match Carrd's container corners (e.g.
0.25rem,0.5rem, or pill).
- Save your changes to generate your unique Form ID.
Step 2: Copy Your Carrd Embed Code
<!-- CustomGForm Carrd 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 fields |
| data-theme | string | Optional: Force "light" or "dark" mode |
Replace YOUR_FORM_ID with your real CustomGForm ID (e.g. cme8v3p530011wnq8z6hscwfa).
Step 3: Embed in Carrd Builder
- In the Carrd Builder, click the
+(Add Element) button. - Select Embed from the element menu.
- In the element settings panel on the left:
- Set Type to Code.
- Set Style to Inline (or Hidden: Head if loading scripts globally).
- In the Code field, paste your CustomGForm embed snippet.
- Click Done and position the Embed element inside your container.
- Click Publish (or Save) in the top right to view your live form!
Pro Tips for Carrd Users
- Container Widths: Ensure your Carrd container's width setting (e.g. Width: 35rem) provides sufficient width for input fields on larger screens.
- Mobile Centering: Set element alignment to center to ensure buttons look balanced across phone screens.
- Custom Thank You Redirects: Redirect users directly to another section of your Carrd site (e.g.
#thank-you) upon submission.
Embed Custom Google Forms on Your Carrd Site in 60 Seconds
Keep your Carrd site fast and minimalist while syncing all form submissions directly to Google Sheets.
How to Embed and Style Google Forms in Framer
Learn how to embed styled Google Forms in Framer using Embed components or custom code with direct Google Sheets real-time synchronization.
How to Embed Styled Google Forms in HubSpot CMS
Embed custom Google Forms on HubSpot CMS landing pages and blogs without expensive HubSpot Marketing Hub seat licenses or form restrictions.