How to embed a Google Form without scrolling

Last updated September 2026 · ~9 minute read

Short answer: you cannot make a Google Form embed size itself to its contents, and Google documents no way to try. Its publish and share help page gives five steps for copying the embed code and says nothing whatsoever about height, resizing or scrolling. What actually removes the inner scrollbar is on your side: set a height taller than your form, let your own CSS handle the width, and accept a little blank space as the price. Anything promising an auto-fitting Google Forms iframe is promising something the browser will not permit.

This page is about the scrollbar specifically — why it is there, what genuinely removes it, and why so much advice on the subject cannot work. If you have not got the embed code yet, get it first from how to embed a Google Form on a website; everything below assumes the iframe is already on your page and misbehaving.

What Google documents, and where it stops

Under the heading “Embed a form on a website or blog”, Google's Publish & share your form with responders page gives exactly five steps: “Open a form in Google Forms.” “At the top right, click More menu.” “Select Embed HTML.” “To copy the HTML that shows, click Copy.” “Paste the HTML into your website or blog.”

That is the entirety of Google's published position on embedding. The page does not print the HTML it hands you. It does not document the width and height boxes that sit in that dialog, or state any default values for them. And across the whole document the words resize, auto-size, responsive and scroll do not appear in connection with the embed at all.

This is the finding, not a gap in the research. Google is not merely quiet about auto-sizing an embedded form — there is no setting, no parameter and no documented behaviour to be quiet about. Every page you will read that offers to make a Google Form iframe grow to fit itself is offering something Google has never published and, as the section below explains, the browser actively prevents.

The dialog does produce a snippet with a fixed pixel width and height written into it. Because Google publishes neither the markup nor those numbers, treat any figure you see quoted — including on this site — as an observation of what the dialog currently does, not as a specification. It has changed before and can change again. What has not changed is the shape: a fixed height, in pixels, chosen for you.

The mechanic, stated plainly

There is no bug here, and it is worth being blunt about that before spending an afternoon hunting one. The iframe has a fixed height. Your form is taller than that height. A browser given a box smaller than its contents scrolls the contents inside the box. That is the whole of it — three facts, no mystery, and no setting anywhere in Google Forms that changes any of them.

You can read that fixed height straight off the snippet itself, which is the honest place to look for it: the height attribute Google's dialog writes into the iframe is a plain pixel number, and the embedding guide prints the generated markup in full. That number, and nothing about your form, is the height of the box your form has to fit inside.

What actually works

1. Measure how tall your form really is. Open the plain responder link in a browser window the width your embed will be, and note where the submit button falls. That distance — not a guess, and not the number the dialog wrote — is what you are about to set.
2. Give the iframe a height taller than that. Round up generously. You are choosing which failure you would rather have, and blank space is the cheap one.
3. Let CSS own the width. Wrap the iframe and set the width in your own stylesheet. Any CSS you write beats the width and height attributes in the markup, so you never need to edit the snippet itself.
4. Add a taller height for narrow screens. Fields stack on a phone, so the same form is considerably taller there. One number cannot serve both.
5. Re-test in a private window at both widths. You are signed in and your own form always loads for you; a stranger's browser is the only honest check.

The CSS

My code, not Google's. Google publishes nothing about how its iframe should behave at different screen sizes. What follows is ordinary CSS I am recommending, and you should treat it as a recommendation.

Wrap the snippet Google gave you in a container, leaving the markup untouched:

<div class="gform-embed">
  <!-- paste Google's iframe here, unedited -->
</div>

Then drive both dimensions from one place. Putting the height in a custom property means the number you will end up tuning lives on a single line:

.gform-embed {
  --form-height: 1400px;   /* the one number you tune */
  max-width: 700px;        /* forms read badly when very wide */
  margin-inline: auto;
}

.gform-embed iframe {
  display: block;          /* removes the stray baseline gap under the frame */
  width: 100%;             /* beats the width attribute in the markup */
  height: var(--form-height);
  border: 0;
}

/* Narrow screens stack every field, so the same form grows. */
@media (max-width: 600px) {
  .gform-embed { --form-height: 2200px; }
}

Width is now solved properly and permanently: the embed can never overflow a phone again. Height is not solved, because height cannot be solved. It is tuned.

The trade-off, honestly

So the cost of doing this properly is whitespace, and on a short form it can be a lot of whitespace. That is a real aesthetic price and it is worth naming rather than glossing over. Put something under the embed that wants the room — a closing line, a contact address, a footer — and the dead space stops reading as a mistake.

Why you cannot automate it

The obvious fix is a small script that measures the form and sets the height to match. It cannot be written, and the reason is a browser rule rather than a missing feature.

Your page is served from your domain. The form inside the frame is served from Google's. Browsers treat those as two separate places and put a wall between them: code on one side cannot read anything on the other. Not the text, not the fields, and not the height. The rule exists because the alternative would let any page inspect your logged-in bank or mailbox by quietly framing it, so it is not going to be relaxed for the convenience of tidy embeds.

There is one legitimate way round it, and it requires the framed page's cooperation: the page inside can volunteer its own height by posting a message outward, which the parent page listens for. That handshake only works if whoever built the framed page chose to send it. Google Forms does not.

Which means any script advertised as auto-sizing a Google Forms iframe is not reading the form's height, because it cannot. At best it is applying a number someone typed in advance and calling it measurement. If a page offers you one, the question to ask is where the height came from — there is no answer that involves looking inside the frame.

Things that change the height under you

Even a well-chosen number is a moving target, and these are the four things that move it.

• Sections. A form split into sections shows one section at a time, and each one is a different height, so any single value you pick is wrong for all but one of them. Size for the tallest section and let the short ones sit in whitespace — or reconsider embedding a paginated form at all. See Google Forms multiple pages.
• Validation messages. A required question left blank sprouts an error line at the moment of submission — precisely when a truncated frame does the most damage.
• Long option lists and text fields. Anything that grows as it is used, an “Other” field most of all, grows past the number you measured.
• Text size. A visitor who has turned up their browser's minimum font size gets a taller form than the one you measured.

What your CSS never reaches

The same wall that stops a script measuring the frame stops your stylesheet touching what is inside it. Your page's fonts, colours and spacing end at the iframe boundary. The form's own appearance — theme colour, background, font, header image — is chosen inside Google Forms and nowhere else, which means the way to make an embed match your site is to change the form, not the page: how to change the theme of a Google Form.

When to link instead of embed

Worth saying out loud, because it is the option nobody offers: an embed is optional. If your form is long, heavily sectioned, or the entire purpose of the page, sending people to the responder link avoids the whole problem. They get the form at full height on a page built to display it, and you get a page that does not need tuning every time you add a question. A prominent link and a sentence of context often outperform a cramped frame. The email route is a different trade again, with its own set of rules.

Forms+ is relevant to both halves of that choice. It is a native iPhone and iPad client for your real Google Forms on your own Google account, so a form you have embedded can be edited from your phone and the embed — a live view of the same form — shows the change. Its Share & Distribute sheet also covers the link-out route, with options including a prefilled link and QR code and a kiosk QR stand. It does not generate the embed code; that dialog is desktop Google Forms.

Frequently asked questions

Does Google document a way to make an embedded form auto-size?

No. Google's publish and share help page documents the five steps for getting the embed code and nothing else about it. It does not print the HTML, does not document the width and height boxes in the dialog, and never mentions resizing, auto-sizing or scrolling. The capability is not merely undocumented, it is absent.

How tall should I make the iframe?

Taller than the form, measured rather than guessed. Open the responder link at the width your embed will be, see where the submit button lands, and round up generously. Blank space below a form is cosmetic. A scrollbar that hides the submit button is not.

Can I just hide the scrollbar instead?

No, and it is the worst outcome of the three. Hiding the scrollbar does not make the frame taller, so everything past the fixed height simply becomes unreachable, including the submit button. A visible scrollbar at least tells the visitor there is more form below.

Why does the height look right on my laptop but wrong on a phone?

Because a form is taller on a narrow screen. Labels wrap onto more lines and grids and side-by-side fields stack vertically, so the same questions need considerably more height. One height value cannot serve both. Set a second, larger height inside a media query.