How to Embed a Google Form in WordPress

The short version: publish the form in Google Forms, open the ⋮ More menu, choose Embed HTML, copy the iframe code, paste it into a Custom HTML block in WordPress and give the iframe a width of 100% — then set a height tall enough for the longest section, because an embedded Google Form cannot resize itself.

That is the whole procedure. The rest of this guide is the part people find out afterwards: height, styling, where the data lives, and consent.

Step by step

1. Open the form in Google Forms and click Publish at the top right, with responders set to anyone with the link. An unpublished form embeds, but nobody can answer it.
2. Open the ⋮ More menu and choose Embed HTML. Google shows an <iframe> with a width and height.
3. Adjust the width and height there if you like — you will override them in CSS anyway — and click Copy.
4. In the WordPress editor, add a Custom HTML block where the form should appear and paste the code.
5. Click Preview in the block toolbar, then preview the page itself.
6. Publish, and submit a test response from a private window.

The embed URL ends in viewform?embedded=true. If you copy the ordinary share link instead, you get a link, not a form.

If the iframe disappears when you save, your user account lacks the unfiltered_html capability — on multisite only super admins have it, and some security plugins remove it. The mechanism is explained in wp_kses allowed HTML. Ask an administrator to add the block.

Make the embed responsive

Google's code uses fixed pixel widths, which overflow on phones. Replace the attributes with a wrapper and CSS:

<div class="gform-embed">
  <iframe
    src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
    title="Event registration form"
    loading="lazy">Loading…</iframe>
</div>

.gform-embed iframe {
  display: block;
  width: 100%;
  height: 1400px;
  border: 0;
}

@media (max-width: 600px) {
  .gform-embed iframe {
    height: 1900px;
  }
}

Put the CSS in Appearance → Customize → Additional CSS or, in a block theme, the Site Editor's custom CSS. The title attribute gives screen-reader users a name for the frame — one of the checks in the accessibility checklist.

Height and scrolling

This is the main weakness. The form lives on Google's domain, so WordPress cannot measure it, and the iframe cannot grow to fit.

• Set the height for the longest section. If the form has several sections, Google shows one at a time; the tallest one decides the height.
• Expect empty space on short sections and after submission, when the confirmation is much shorter than the form.
• Phones need more height, because fields stack and text wraps — hence the media query.
• Avoid a double scrollbar. If you see one inside the form, the height is too small; raise it rather than hiding the scrollbar, or visitors cannot reach the submit button.

A fixed height also prevents the page jumping as the iframe loads, which keeps layout shift in check.

What you can and cannot style

Inside Google Forms, Customize theme lets you set a header image, a colour and font styles. That is all. Your theme's CSS stops at the iframe boundary, so fonts, button styles and spacing will not match the site. For an internal survey that rarely matters; for a lead form on a sales page it usually does.

The data lives in Google

Responses go to the form owner's Google account — the Responses tab, and a linked Sheet if you create one. Nothing reaches WordPress. That has consequences:

• Notifications are switched on in Google Forms (Responses → the three-dot menu → email notifications), and only for Google accounts that can edit the form, each turning it on for themselves.
• Access depends on who owns the Google account. A form created in a former employee's personal account is a form you can lose.
• File upload questions require respondents to sign in to a Google account, and so does Limit to 1 response — both cut responses from the public.

Consent and privacy

An embedded form loads content from Google's servers, which can set cookies and receives the visitor's IP address before they type anything. Treat it like any third-party embed:

• name Google Forms in your privacy notice as a place submissions are processed, per WordPress GDPR compliance;
• check whether your consent setup needs to block the iframe until accepted — cookie consent plugins covers how embeds are handled;
• avoid collecting sensitive data through a personal Google account.

When a native form is the better answer

If the form is part of the site rather than a side project, a plugin keeps entries in your own database, inherits the theme's styling and sends notifications from your domain — see how to add a contact form in WordPress and, for questionnaires, choosing a survey plugin. WPForms is one example: its builder is approachable, though stored entries and survey reporting sit in the paid tiers.

Common mistakes

• Pasting the share link instead of the iframe code.
• Embedding an unpublished form — the iframe shows an access page instead of the questions.
• Keeping Google's fixed pixel width, which overflows on phones.
• A height that hides the submit button behind an inner scrollbar.
• Building the form in a personal Google account the organisation does not control.
• Leaving the embed out of the privacy notice.

Verify

Open the page on a phone, scroll through every section, submit a test response, and confirm it appears in the Responses tab and that the notification reaches the owner's inbox.