How to Embed a Google Form on Webflow (And Why It's Just a Placeholder in the Designer)

You add a Code Embed to a Webflow page, paste in the form code, close the editor, and the canvas shows you a flat grey rectangle with a code icon in it. Nothing that looks like a form. So you paste it again, try a different snippet, and start wondering whether Webflow blocks this sort of thing. It doesn’t, and the rectangle is expected. Webflow shows a placeholder for any embed containing a script tag and only renders it in Preview or on the published site. The other half of the problem is real though: Google’s own embed is a cross-origin iframe, so your Webflow fonts, colours and classes stop at the edge of it. Getting a form that actually looks like your site means having something other than Google render it, which is what TakumiForm does: your questions stay in Google Forms, the form on the page is yours. Webflow’s documentation checked 21 September 2026. Here’s the whole thing in order, starting with the plan requirement, because that one decides whether any of the rest applies to you.

Can I embed a Google Form on Webflow for free?

Check this before you start building.

Webflow’s Code Embed documentation puts the gate in its opening paragraph: “If you have a Core, Growth, Agency, or Freelancer Workspace, or if your site has an active Site plan, you can use the Code Embed element to unlock all kinds of custom functionality.” Their page on custom code in head and body tags opens with the same sentence.

So a free Workspace with no Site plan on the project rules out every third-party form embed at once, not just ours. There’s no snippet clever enough to get around it, because the element that holds snippets is the thing behind the paywall.

If that’s where you are, your options are to link out to the form instead of embedding it, use Webflow’s own native form element and accept that it isn’t a Google Form (responses land in Webflow, not your Sheet), or put a Site plan on the project. Better to hear that now than four hundred words into a tutorial.

One thing that is not a limit worth worrying about: the character cap. Webflow allows 50,000 characters in a Code Embed, and form snippets run to a couple of hundred.

How do I embed a Google Form on Webflow with Google’s own code?

On a plan that allows it, the plain version is about a minute of work.

1. Open your form on Google Forms, click Send, then the angle-brackets tab.
2. Set a width and height if you want, and copy the iframe code.
3. In the Webflow Designer, open the Add panel, drag a Code Embed element where you want the form, and paste the code into the editor.
4. Save and close the modal, then publish.

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

Two Webflow-specific notes while you’re in there. Don’t paste anything wrapped in <html>, <body> or <head> tags: Webflow’s docs warn that those will break your page layout. And if the embed comes in without its own dimensions, Webflow says the content “can take up the full width of its parent element”, so give the parent div the width you actually want and style it there rather than fighting the snippet.

Why is my Google Form a placeholder in the Webflow Designer?

Because it has a script in it, and Webflow deliberately doesn’t run those on the canvas.

Their documentation is specific about which embeds preview and which don’t: “Custom code wrapped in <iframe> or <style> tags shows a preview on the canvas or in your rich text element, though some embeds only show up on your live website. Any time you use a <script> tag in the code editor, you’ll see a placeholder for that element in the Designer. Once you preview, publish, or export your site, the script and custom code inside will render where you placed it, though its effects won’t go live until you publish.”

Which explains the split people run into. Google’s iframe code usually does draw something on the canvas. Any snippet that loads a script, ours included, shows the grey placeholder instead. Same page, two different behaviours, and neither one tells you anything about whether the embed works.

Webflow also notes that custom code won’t run in expand canvas view, so that’s not a workaround either.

The fix is to stop judging it from the Designer. Hit Preview, or publish to your .webflow.io staging URL and open that. If the form renders there, it will render on the live domain.

Why doesn’t the embedded form match my Webflow site?

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 Webflow setting you’ve missed.

So all of these do nothing to the form:

• Classes and styles from the Style panel, applied to anything inside the embed.
• Your site’s fonts, colour variables or global styles.
• Custom CSS in Page settings 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. The iframe’s is fixed, 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 manage both on different breakpoints of the same page.

How do I embed a Google Form on Webflow that matches my site?

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 Webflow styles: 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, drag a Code Embed onto your Webflow page, and paste it in.
5. Save the editor, then Preview or publish to staging to actually see it. The Designer will show the placeholder, and that’s fine.

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 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.

Three things that come up on Webflow builds specifically:

• jQuery. Webflow flags that sites published since August 2020 ship jQuery 3.5.1 and that loading another copy in custom code causes conflicts. Our snippet is a div plus one async <script> and doesn’t touch jQuery, so there’s nothing to collide.
• Long pages. If the form sits far down a scrolling page, add data-takumiform-lazy="1" to the div and it loads when it scrolls into view.
• Reuse. Webflow lets you turn a Code Embed into a component, which is handy if the same form goes on several pages.

Respondents never sign in to anything, including for file uploads, which plain Google Forms won’t do. And you can send people to your own thank-you page after they submit, so they land back on your site 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 instead? The Squarespace version of this post covers that platform’s own plan gate and its habit of hiding embeds from you while you’re logged in.

Where Formfacade is still the better choice

Formfacade is an established product and it embeds into Webflow the same way ours does. 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 Webflow 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 on Webflow? Drag a Code Embed element onto the page, paste in an embed snippet, save the editor and publish. Google’s own iframe code comes from Send → < > in your form. For a form that uses your site’s fonts and colours instead of arriving in a grey Google box, paste TakumiForm’s snippet from its Share tab instead. Both need a plan that allows custom code.

Can I embed a Google Form on Webflow for free? Not on a free site with a free Workspace. Webflow’s help centre says the Code Embed element is available “if you have a Core, Growth, Agency, or Freelancer Workspace, or if your site has an active Site plan”. Custom code in Site settings and Page settings carries the same requirement. Checked on Webflow’s help centre on 21 September 2026.

Why is my Google Form showing as a placeholder in the Webflow Designer? Because the snippet contains a script tag. Webflow’s documentation says “any time you use a <script> tag in the code editor, you’ll see a placeholder for that element in the Designer”, and that the code renders once you preview, publish or export the site. The embed isn’t broken. Check it in Preview or on your .webflow.io staging URL.

Can I make an embedded Google Form match my Webflow site? Not with Google’s own embed. The form sits in a cross-origin iframe, so your Webflow styles, fonts and classes 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.

Will the embed conflict with Webflow’s jQuery? No. Webflow notes that sites published since August 2020 include jQuery 3.5.1, and that importing another version in custom code can cause conflicts. The TakumiForm snippet is a div plus one async script and doesn’t load jQuery at all, so there’s no version to clash with.

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.

Publish to staging and look at it there

Check the plan requirement first, drop the snippet into a Code Embed, then judge it from Preview or your .webflow.io URL rather than the canvas. If the form renders 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.