How to Embed Custom Google Forms in Squarespace
Squarespace provides sleek, minimalist templates, but its built-in form blocks have rigid limitations: limited field validation, difficulty organizing complex multi-step questionnaires, and cumbersome storage setups.
Default Google Forms iframes on Squarespace look out of place with stark purple headers and ugly inner scrollbars.
With CustomGForm, you can embed Google Forms on Squarespace that perfectly match your template's typography and color palette, all while sending clean data straight into Google Sheets.
Live Interactive Preview
Test this live custom form:
Clean layout that blends naturally into Squarespace 7.1 and Fluid Engine sections.
Why Use CustomGForm with Squarespace?
- Direct Google Sheets Sync: Automatically append client bookings, client intake surveys, and event RSVPs directly to a spreadsheet with zero Zapier costs.
- Fluid Engine Compatible: CustomGForm fits cleanly inside any Squarespace 7.1 Fluid Engine block without overlapping adjacent elements.
- Match Your Squarespace Site Styles: Custom colors, input borders, button radius, and typography align with your Squarespace style guide.
- No Login File Uploads: Allow clients to upload PDFs, resumes, and project briefs without demanding they log into a Google account.
3-Step Setup Guide for Squarespace
Step 1: Connect & Style Your Form
- In the CustomGForm Dashboard, paste your public Google Form link.
- Select your theme settings:
- Match your Squarespace heading and body fonts.
- Choose your palette's primary brand color for buttons and active focus borders.
- Set border radius to match your Squarespace buttons (sharp, rounded, or oval).
- Save your changes to generate your Form ID.
Step 2: Copy the Squarespace Embed Snippet
Place your form directly in your page flow (ideal for Contact, Booking, or Intake pages):
<!-- CustomGForm Squarespace 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 values |
| data-theme | string | Optional: Set to "light" or "dark" |
Replace YOUR_FORM_ID with your custom form ID (e.g. cme8v3p530011wnq8z6hscwfa).
Step 3: Add to Squarespace via Code Block
- Log in to your Squarespace website and navigate to the page you want to edit.
- Click Edit in the top left corner of the page.
- In Fluid Engine (Squarespace 7.1) or classic sections, click Add Block and select the Code block (indicated by the
</>icon). - In the Code Block settings:
- Ensure the dropdown is set to HTML.
- Make sure Display Source Code is turned OFF.
- Paste your CustomGForm code into the code box.
- Drag and resize the Code Block to fit your desired layout width.
- Click Save in the top left corner.
Squarespace Fluid Engine Tips
- Safe Padding: In Fluid Engine, leave at least 1 grid row below the Code block to ensure dynamic form fields have enough breathing room on mobile devices.
- Custom Fonts: If using an Adobe or Google Font in Squarespace Site Styles, CustomGForm will inherit your page's CSS font family automatically when using standard inherit styles.
- Submission Confirmation: You can redirect respondents to a custom hidden Squarespace page (e.g.
/intake-confirmed) or display a clean on-page success message.
Create Beautiful Squarespace Google Forms in 60 Seconds
Connect responses directly to Google Sheets, remove iframe borders, and match your site aesthetic.
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.
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.