How to Embed a Google Form in WordPress (And Why the Editor Preview Lies to You)

You paste the Google Forms code into a Custom HTML block, the editor draws the form right there on the page, you hit Publish, and the live page has a blank space where the form was. Reload, same thing. Paste it again, same thing. The editor keeps showing you a form the site refuses to publish.

That gap between preview and published page is the WordPress-specific trap, and it has two different causes depending on where your site lives. On WordPress.com it’s the plan: iframe and script tags are filtered out unless you’re on a paid plan with hosting features activated. On self-hosted WordPress it’s usually the user role or a security plugin. And once the embed does show up, Google’s version is a cross-origin iframe your theme can’t style, which is the part TakumiForm exists to fix: your questions stay in Google Forms, the form on the page is yours. WordPress.com’s support pages and the WordPress.org documentation checked 25 September 2026.

Here it is in order, starting with which kind of WordPress you have, because that decides everything after it.

Can I embed a Google Form on a free WordPress.com site?

No, and this is the one to check before you touch a block.

WordPress.com’s Custom HTML block guide says the block is available on every plan, but that “tags like iframe, script, style, form, embed, and object require a paid plan with hosting features activated.” Their broader page on adding code to your site puts it the same way: free sites “have limits to code that can be added”, plugin-enabled plan sites “have no limits to the code you can add once you activate hosting features”, and “before activation, the same limits as free sites apply.”

Two things in there catch people. First, the block exists on the free plan, so pasting into it feels like it worked. Second, paying isn’t enough on its own. Hosting features switch on the first time you install a plugin or upload a theme after upgrading (WordPress.com’s activation page lists the triggers, and says Commerce sites activate automatically). Until that happens, the same filter runs. Activation also moves the site’s default address from example.wordpress.com to example.wpcomstaging.com, with the old one redirecting, so don’t be alarmed when it does.

Every paid plan is plugin-enabled now, and the Personal plan page lists “custom code like JavaScript, iframe, and more” among its features, so the cheapest route is Personal with hosting features activated. That also means there’s no snippet clever enough to get around the free tier. Google’s iframe, our script, a contact-form plugin’s shortcode: all of them go through the same door, and the door is on the paid side.

If you’re staying free, your options are to link out to the form instead of embedding it, or to use one of WordPress.com’s built-in embeds, which don’t include Google Forms.

How do I embed a Google Form in WordPress with Google’s own code?

On a plan that allows it, or on your own hosting, the plain version takes a minute.

1. Open your form on Google Forms, click the More menu (three dots, top right), and choose Embed HTML.
2. Click Copy.
3. In the WordPress editor, add a Custom HTML block where you want the form and paste the code in.
4. Publish, then open the live page, not the preview.

For an internal page or a quick signup sheet that’s fine. Paste it, publish, move on.

One Google-side catch worth knowing: if the form has a file upload question, Google’s iframe makes every respondent sign in to a Google account before they can answer, which on a public WordPress page turns a lot of visitors away at the door. Our post on file uploads without sign-in covers the way round that.

Why does the form show in the editor but not on the published page?

Because the block editor’s preview doesn’t know about the filter.

This one is documented on WordPress.com’s own issue tracker: when an iframe is pasted into a Custom HTML block on a plan that disallows it, “the preview successfully shows the embedded content, inaccurately leading the user to believe the code will work on their site.” The tag is removed when the post is saved, so the editor and the published page genuinely disagree. Nothing you did was wrong, and no amount of re-pasting changes it.

The fix is either the plan route above, or, if you’ve already paid but never installed a plugin or theme, doing that once so hosting features activate. After that, edit the page and paste the snippet again, because the stripped version is what got saved.

Why does the form disappear on my self-hosted WordPress site?

If you host WordPress yourself, there’s no plan gate. The filter you’re hitting is about who you’re logged in as.

WordPress only lets users with the unfiltered_html capability save raw iframe and script tags. The Roles and Capabilities documentation gives it to Administrators and Editors on a normal single site, and adds a note that matters for agencies and schools: “In WordPress Multisite, only Super Admins have the unfiltered_html capability.” So an Editor on a network site pastes the code, saves, and WordPress quietly strips it. The symptom is identical to the WordPress.com one.

Two other things that strip embeds on self-hosted sites:

• Security plugins. Some sanitise post content on save and treat any <script> or <iframe> as hostile. If an Administrator’s paste still vanishes, that’s the next place to look.
• The Classic editor’s Visual tab. If you’re still on the old editor, paste into the Text (code) tab and don’t switch back to Visual before saving. Switching tabs runs the content back through the visual editor, which is a well-known way to lose script and iframe tags.

If you can’t get the role or the plugin changed, an iframe plugin from the WordPress.org directory that takes the form URL as a shortcode gets Google’s version onto the page. It’s still Google’s iframe, though, with everything that comes with it.

Why doesn’t the embedded form match my WordPress theme?

Because it isn’t really on your site. Google’s embed is an iframe pointing at docs.google.com, and browsers don’t let one site’s styles or scripts reach into another site’s document. That’s a security rule with no opt-out, not a theme setting you’ve missed.

So all of these do nothing to the form:

• Your theme’s fonts, colours and global styles.
• Anything you add under Appearance → Customize → Additional CSS, or in the Site Editor’s styles panel.
• A CSS plugin targeting a class you found in the form’s HTML.

Inside the box you get Google’s fonts, Google’s radio buttons, the purple submit button and the two lines of small print underneath. Our post on removing the Google Forms header and branding goes through which parts Google does and doesn’t let you change.

Then there’s height. Google’s snippet ships a fixed height, and you pick the number in advance. Too short and visitors scroll inside a scrollbar. Too tall and there’s a dead gap under the submit button. On mobile, where the questions reflow and the form gets longer, you’ll usually get both on the same page.

How do I embed a Google Form in WordPress that matches my theme?

Have something other than Google render the form. TakumiForm reads your Google Form and serves its own version, so there’s no Google chrome to strip. There’s still a frame on the page, but it’s ours rather than Google’s, which is the difference that matters: you decide what’s inside it, and it reports its own height back to the page so it sizes itself.

1. In your Google Form, go to Extensions → Add-ons → Get add-ons and install TakumiForm.
2. Extensions → TakumiForm → Open TakumiForm, click Connect to TakumiForm, and sign in with the account that owns the form.
3. Click Customize. Match your theme: colours, fonts, corner radius, button style, the submit label and the thank-you message. Upload your logo and it will read your brand colours out of the image for you.
4. Copy the snippet from the Share tab, add a Custom HTML block to your WordPress page, and paste it in.
5. Publish and check the live page.

The plan and role rules above apply to our snippet exactly as they apply to Google’s. It’s a div plus one <script> tag, so on WordPress.com it needs a paid plan with hosting features on, and on self-hosted WordPress it needs a user who can save scripts. We don’t get a pass on that and neither does anyone else.

One setting to check before you send the page out. If your Google Form collects email addresses, limits people to one response, or is restricted to your organisation, it’s asking for a Google sign-in and the embed can’t do that. Turn those off in the form’s Settings on Google, then hit Sync.

What lands on the page is your form in your theme’s fonts and colours, sizing itself to its own content, so no inner scrollbar and no gap underneath. No Google header, no small print. Responses still arrive in your Google Form’s responses tab and its linked Sheet, and you keep editing questions on Google exactly as before.

Two things that come up on WordPress builds specifically:

• Reusable blocks. If the same form goes on several pages, turn the Custom HTML block into a synced pattern and drop that in, so a snippet change happens once.
• Long pages. If the form sits far down a page, add data-takumiform-lazy="1" to the div and it loads when it scrolls into view.

And you can send people to your own thank-you page after they submit, so they land on a page in your theme instead of Google’s confirmation screen. The embed guide covers the rest: the initial-height attribute, saving a look as a template to reuse across forms, and what happens when you edit questions on Google.

Building on Squarespace or Webflow instead? Each has its own plan gate and its own “looks broken but isn’t” quirk, and those posts cover them.

Where Formfacade is still the better choice

Formfacade is an established product and it embeds into WordPress the same way ours does, through the same Custom HTML block with the same plan rules. If you need email notifications when a response comes in, Sheets Lookup, or e-signatures through Formesign, they have those and we don’t. Buy the thing that does the job you need.

Our argument is packaging. Formfacade sells customizing, embedding, file upload and quiz scoring as separate subscriptions with separate response caps, so a WordPress site that wants a branded form with file uploads is paying two of them. We sell one plan where every feature is included and the tiers differ only by volume. The full comparison has the numbers.

FAQ

How do I embed a Google Form in WordPress? Add a Custom HTML block to the page or post, paste in an embed snippet, and publish. Google’s own iframe code comes from the More menu → Embed HTML in your form. For a form that uses your theme’s fonts and colours instead of arriving in a grey Google box, paste TakumiForm’s snippet from its Share tab instead. On WordPress.com both need a paid plan with hosting features activated. On self-hosted WordPress an Administrator or Editor can paste either one.

Can I embed a Google Form on a free WordPress.com site? No. WordPress.com’s support pages say the iframe, script, form, embed and object tags “require a paid plan with hosting features activated”, and that before activation “the same limits as free sites apply”. The Custom HTML block itself exists on every plan, which is why the paste appears to work. Checked on WordPress.com’s support pages on 25 September 2026.

Why does my Google Form show in the WordPress editor but not on the published page? Because the block editor’s preview doesn’t know about WordPress.com’s tag filtering. It renders the iframe on screen while you edit, then the tag is removed when the post is saved on a plan that doesn’t allow it. The published page shows nothing where the form should be. Activating hosting features on a paid plan stops the stripping.

Why does the form disappear on my self-hosted WordPress site? Usually a user role. Only users with the unfiltered_html capability can save iframe and script tags. On a single site that’s Administrators and Editors; on a Multisite network only Super Admins have it, so an Editor’s paste is stripped on save. A security plugin that sanitises post content can do the same thing.

Can I make an embedded Google Form match my WordPress theme? Not with Google’s own embed. The form sits in a cross-origin iframe, so your theme’s fonts, colours and Additional CSS can’t reach inside it. TakumiForm renders your Google Form itself, so the version on your page uses your colours, your fonts and your button style, while the questions and responses stay in Google Forms.

Do responses still go to my Google Sheet? Yes. Responses arrive in your Google Form’s responses tab and in its linked Sheet, written by Google’s own pipeline. You keep editing the questions in Google Forms exactly as before.

Judge it from the live page, not the editor

Sort out the plan or the role first, paste the snippet into a Custom HTML block, then open the published page rather than trusting the preview. If the form is there but looks like a visitor from another website, that’s the iframe, and it’s the part TakumiForm exists to fix. The trial runs 7 days with no card.

Read more on the TakumiForm blog.