Loading tutorials…
Loading tutorials…
Google Forms embeds via iframe, which means the form looks like Google — not your site. This walks through embedding it cleanly anyway, and when to switch tools for brand-critical pages.
Who this is forMarketers embedding Google Forms on landing pages, blog posts, or internal portals. If brand polish matters on the page, this tutorial will tell you when to use a different tool.
What you'll need
Step 1
Form → Send button (top-right) → Embed icon (looks like `<>`) → copy iframe code.
Open the form. Click the "Send" button (top-right).
Click the embed icon (the `<>` icon, second from left in the Send menu).
Set width and height. Default 640x800 is too narrow on mobile and too short on long forms.
Copy the iframe code.
Step 2
Width: 100% (so it adapts to container). Height: 800px minimum (so most forms show without scroll).
In the embed dialog, change width from 640 to 100%.
Height should match your form length. Short form: 600px. Medium: 900px. Long: 1200px.
Too short = inner scrollbar (bad UX). Too tall = blank space below the form.
For unknown form length, set 800px and test.
Step 3
Drag an Embed element. Paste iframe. Publish.
In Webflow Designer, drag an Embed element where the form should appear.
Paste the Google Forms iframe code. Save.
Publish the site.
View the live page. The form renders inside the iframe with Google's default styling.
Step 4
Gutenberg: add a Custom HTML block. Classic editor: paste in Text view, not Visual.
Gutenberg: add a "Custom HTML" block. Paste iframe code. Update.
Classic editor: switch to Text view. Paste iframe where you want the form. Update.
If your security plugin strips iframes, allow Google Forms specifically (`docs.google.com/forms` domain).
Step 5
Paste the iframe directly in your HTML where the form should appear. Test in incognito.
Open your HTML file. Paste the iframe code where you want the form.
For responsive sizing, wrap the iframe in a `<div style='position:relative;padding-bottom:120%;height:0;overflow:hidden;'>` and set the iframe to `width:100%;height:100%;position:absolute;`.
Deploy. Test in incognito.
Step 6
Open in incognito on iPhone, Android, desktop. Verify the form is usable on all three.
Open the live URL in incognito on three devices.
On mobile: the iframe may show an inner scrollbar if height is too short. Increase height.
On desktop: the form should sit inside its container at 100% width.
Submit a test response. Verify it appears in Google Forms responses.
Common mistakes
Using the default 640px width
What goes wrong: On a 1200px page section, the form is centered with huge empty margins on both sides. Looks broken or under-designed.
How to avoid: Always set width to 100% so the iframe fills its container.
Setting height too short
What goes wrong: Form has inner scrollbar. Users have to scroll within the iframe AND the page. Conversion drops 20-30%.
How to avoid: Set height to fully contain the form. Test on multiple viewport sizes.
Expecting brand polish from a Google Forms embed
What goes wrong: You embed a Google Form on your customer-facing pricing page. It looks like Google. Conversion is 30-50% lower than the same form built in Tally or Typeform.
How to avoid: Use Google Forms for internal/lead-magnet pages. For customer-facing brand-critical pages, switch to Tally or Typeform.
Not testing on mobile
What goes wrong: 60%+ of form traffic is mobile. Iframe with default sizing breaks horribly on mobile — hidden submit button, broken layout.
How to avoid: Test on real mobile device incognito. Adjust width/height until the form is fully usable.
Embedding behind authentication when the form requires Google sign-in
What goes wrong: Form requires user to sign into Google to submit. Your authenticated app users do not understand why. Conversion craters.
How to avoid: If you embed behind your own auth, disable Google's 'Limit to 1 response' (which requires sign-in). Use email validation instead.
Recap
Done — what's next
How to set up a Google Forms survey the right way
Read the next tutorial
Hand it off
Embedding Google Forms is a 10-minute task. Deciding whether Google Forms is the right tool for the page is a strategic call. A vetted specialist will audit your form tool stack. From $14-16/hr.
See specialist rates
Almost not at all. You cannot inject custom CSS into a Google Forms iframe. You can change the form's theme color and header image inside Forms, but that is the ceiling.
The iframe loads asynchronously and does not block initial render, but it adds ~150-200KB of JavaScript. Page-speed impact is moderate.
Yes. Each iframe is independent. Be mindful of page weight — multiple Forms iframes add up fast.
Cross-domain iframe tracking is limited. The simplest reliable method: redirect users to a thank-you page on your domain after submit (configure in Form Settings → Presentation → Confirmation message → link). Fire the GA4 event on the thank-you page.
Settings → Responses → 'Limit to 1 response' is on. This requires Google sign-in. Turn it off to allow anonymous submissions.
Google Forms
Google Forms is free, fast, and forgiving — which is why most surveys collect garbage data. This walks through the setup path that actually returns reliable answers.
Google Forms
Google Forms → Sheets is the simplest sync in the SaaS ecosystem — and the easiest to mess up by adding formulas in the wrong place. Here is the setup that survives 10,000 responses.
Google Forms
All three are real options. Picking wrong costs you either money (Typeform), conversion (Google Forms), or polish (Tally Free). Here is the honest framework.
Google Forms
DIY surveys are great — until the data stops driving decisions, or your forms convert at 18%. Here is the honest framework: when the cost of self-managing exceeds the cost of hiring.