How to Customize and Embed Google Forms in Google Sites
Google Sites is the easiest way to launch an intranet, school portal, team wiki, or client resource hub. While Google Sites allows you to insert Google Forms natively, it provides zero styling control:
- You are stuck with the standard generic Google purple banner.
- You cannot change form fonts or match your Google Sites theme colors.
- Dark mode is not supported on standard Google Form embeds.
- The standard embed displays awkward inner frames on mobile screens.
With CustomGForm, you can take any Google Form, style it to match your Google Site perfectly (including custom fonts, dark mode, and border styles), and embed it seamlessly using Google Sites' native Embed Code feature.
Live Interactive Preview
See how a customized Google Form looks when styled with modern typography and clean layout:
Styled with CustomGForm and embedded directly into Google Sites with Google Sheets sync.
Default Google Sites Embed vs CustomGForm
| Feature | Standard Google Sites Insert | CustomGForm Embed Code |
|---|---|---|
| Theme Customization | None (Default Google style) | Full control over fonts, colors, and borders |
| Dark Theme | Unsupported | Full dark mode support (data-theme="dark") |
| Google Branding | Prominent "Google Forms" footer | Clean, minimal, or whitelabeled |
| Multi-Column Layout | 1 column only | Custom layout control and compact sizing |
| Data Storage | Google Sheets | Google Sheets + instant email / webhook alerts |
3-Step Setup Guide for Google Sites
Step 1: Connect & Style Your Form
- In the CustomGForm Dashboard, paste your public Google Form link.
- Select your Google Site theme styles:
- Match your Google Sites theme (Simple, Aristotle, Diplomat, Vision, Level, or Impression).
- Set the primary color to your site's accent color.
- Choose dark mode if your Google Site uses dark backgrounds.
- Save your changes to generate your Form ID.
Step 2: Copy the Google Sites Embed Snippet
<!-- CustomGForm Google Sites Standard 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: Semicolon-separated prefill values |
| 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 Google Sites
- Open your site in the Google Sites Editor (
sites.google.com). - In the right-hand Insert panel, click on Embed (the
< >icon). - In the popup window that appears, click the Embed code tab (do not choose By URL).
- Paste your CustomGForm snippet into the code box.
- Click Next to see the preview, then click Insert.
- Use the blue bounding box dots on the canvas to resize the embed box to full width or center it nicely.
- Click Publish in the top right corner.
Google Sites Best Practices
- Avoid the Default "From Google" Section: Do not use the Insert → Forms shortcut in the sidebar, as that forces the unstyled default iframe. Always use Insert → Embed → Embed code.
- Full Width Containers: Stretch the blue handles to span 10 or 12 grid columns for maximum desktop readability.
- Intranet Portals: For internal Google Workspace sites, CustomGForm collects data safely without requiring respondent permissions adjustments.
Style Your Google Forms in Google Sites Today
Remove Google purple banners, match your site theme, and enable dark mode in under 60 seconds.
How to Embed and Customize Google Forms in Wix (No iFrame Glitches)
Step-by-step guide to embed and style Google Forms in Wix Editor or Wix Studio using the HTML Embed element without awkward double scrollbars.
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.