How to Embed Custom Google Forms in Ghost CMS
Ghost is the top-tier publishing platform for independent writers, media publications, and newsletter creators. While Ghost provides a beautiful reading experience, creators often need interactive forms to:
- Run reader surveys and collect audience feedback.
- Take sponsor inquiry applications.
- Collect RSVP event signups and questions for podcasts/Q&As.
Standard Google Forms iframes on Ghost clash with Ghost's editorial aesthetic and ruin reading flow.
With CustomGForm, you can embed clean, typography-focused Google Forms directly into Ghost posts, pages, and newsletter landing pages using Ghost's native HTML card — automatically compiling reader responses in Google Sheets.
Live Interactive Preview
Test this live reader survey form:
Editorial-ready form styled with clean serif or sans-serif typography matching modern publications.
Why Ghost Publishers Use CustomGForm
- Editorial Design Matching: Match Ghost publication fonts (Georgia, Inter, Merriweather, etc.) and accent colors.
- Dark Mode Compatibility: Automatically adapts to Ghost themes with dark mode toggle support.
- Direct Google Sheets Data: Analyze reader polls, content ideas, and subscriber suggestions in Google Drive.
- No Heavy Third-Party Scripts: Lightweight script delivery ensures your Ghost site retains top Lighthouse speed scores.
3-Step Setup Guide for Ghost CMS
Step 1: Connect & Style Your Form
- In the CustomGForm Dashboard, paste your public Google Form link.
- Select your typography and theme:
- Match your publication's brand accent color.
- Choose fonts that harmonize with your Ghost theme.
- Save your form settings to get your Form ID.
Step 2: Copy the Ghost HTML Snippet
<!-- CustomGForm Ghost CMS 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 reader or post metadata |
| 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 Ghost Post or Page Editor
- Open your draft post or page in the Ghost Admin Editor.
- On a new line, type
/htmlor click the+(Add Card) button and select HTML. - Paste your CustomGForm code into the HTML card editor.
- Click outside the card to save it.
- Click Preview or Publish to see your form render live!
Pro Tips for Ghost Creators
- Newsletter Surveys: Embed forms directly in long-form web posts linked from your email newsletter.
- Sponsorship Inquiries: Create a dedicated
/sponsorpage in Ghost with an embedded CustomGForm intake workflow. - Dark Reader Themes: For publications with dark themes, set
data-theme="dark"for seamless contrast.
Embed Reader Surveys in Ghost CMS in Under 60 Seconds
Collect audience feedback and sponsor leads with zero design friction.
How to Embed Custom Google Forms in Weebly
Complete tutorial for embedding and styling responsive Google Forms on Weebly websites using the Embed Code element.
How to Embed Custom Google Forms in Notion & Notion Websites
Embed elegant, branded Google Forms directly into Notion pages and Notion-powered websites (Super, Popsy, Feather) with seamless dark mode support.