How to Embed a Google Form on Any Website

Google Forms is free, fast to set up, and handles most survey needs without friction. But linking to an external Google Form feels clunky -- visitors leave your site, land on a generic Google page, and some never come back. Embedding the form directly on your website keeps people where they already are.

This guide walks through the embed process step by step: generating the code, adding it to HTML pages, WordPress, Squarespace, and Wix. It also covers how to handle file uploads in embedded forms, how to customize the embed dimensions, and how to fix the most common issues that break embedded Google Forms.

How to Get the Embed Code from Google Forms

Before you can embed a Google Form anywhere, you need the iframe code. Here's how to get it.

Step 1: Open your Google Form

Go to forms.google.com and open the form you want to embed. If you haven't created one yet, click Blank to start a new form and add your questions.

If your form needs to be accessible to people outside your organization, make sure the form's access settings allow it. For a detailed walkthrough, see our guide on how to make a Google Form public.

Step 2: Click "Send"

Click the Send button in the top-right corner of the form editor. This opens the sharing panel with three tabs: email, link, and embed.

Step 3: Select the embed tab

Click the < > icon (the third tab in the Send panel). Google Forms generates an iframe embed code that looks like this:

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true" width="640" height="480" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Step 4: Adjust dimensions and copy

Before copying, you can adjust the Width and Height fields directly in the Send panel. The defaults (640 x 480) work for short forms, but longer forms need more height to avoid an internal scrollbar. Once you're satisfied, click Copy.

You now have everything you need to embed the form on any website.

Embed a Google Form in HTML

If you're working with a static HTML site or any page where you can edit the source code, embedding takes about 30 seconds.

Open the HTML file for the page where you want the form and paste the iframe code wherever the form should appear. Wrap it in a container div for easier styling:

<div style="max-width: 700px; margin: 0 auto;">
  <iframe
    src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
    width="100%"
    height="800"
    frameborder="0"
    marginheight="0"
    marginwidth="0"
    style="border: none;">
    Loading…
  </iframe>
</div>

Making the embed responsive

Set width="100%" so the form fills its container on any screen size. For the height, there's no auto-resize for cross-origin iframes, so you'll need to estimate based on form length:

• Short form (3-5 questions): height="500"
• Medium form (6-12 questions): height="800"
• Long form (12+ questions): height="1200" or higher

If you want the iframe to be fully responsive on mobile, you can use a CSS wrapper that maintains an aspect ratio:

<style>
  .google-form-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 120%; /* adjust ratio as needed */
  }
  .google-form-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<div class="google-form-wrapper">
  <iframe
    src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
    allowfullscreen>
    Loading…
  </iframe>
</div>

This approach lets the form adapt to different screen sizes without a fixed pixel height.

Embed a Google Form in WordPress

WordPress strips raw HTML from standard paragraph blocks, so you need a specific block or editor mode depending on your setup.

Block Editor (Gutenberg)

1. Open the page or post in the Block Editor.
2. Click + to add a new block and search for "Custom HTML."
3. Paste the Google Forms iframe code into the block.
4. Click Preview to verify the form renders correctly, then publish or update the page.

Set the width to 100% in the iframe code so the form fills the content area regardless of your theme's layout width.

Classic Editor

1. Open the page or post in the Classic Editor.
2. Switch to the Text tab (not the Visual tab — Visual mode strips iframe tags).
3. Paste the iframe embed code where you want the form to appear.
4. Switch back to Visual to preview, then publish.

If the form disappears after saving, your theme or a security plugin is likely stripping iframes. Check plugins like Wordfence or iThemes Security and whitelist docs.google.com in their settings.

Elementor

1. Open the page in Elementor's visual editor.
2. Drag an HTML widget onto the page.
3. Paste the iframe code and set width to 100%.
4. Adjust the height in the iframe code until the full form is visible without scrollbars.

Tip: Elementor also has a dedicated Google Maps widget, but no native Google Forms widget. The HTML widget is the correct approach.

Embed a Google Form in Squarespace or Wix

Squarespace

1. Open the page editor and click + to add a new block.
2. Select Code from the block menu (under "More").
3. Paste the Google Forms iframe code.
4. Toggle off "Display Source" so the code renders as a form instead of showing the raw HTML.
5. Save and preview the page.

Squarespace's Code block supports iframes out of the box -- no extra configuration needed. Set the width to 100% and adjust the height based on your form length.

Wix

1. Open the Wix Editor and click Add Elements (+).
2. Select Embed Code > Embed HTML.
3. Paste the Google Forms iframe code into the code field.
4. Resize the element by dragging its corners to fit the form.
5. Preview and publish.

In Wix, the embed element has fixed dimensions on the canvas. You may need to resize it manually and test on both desktop and mobile views to make sure the form is fully visible.

How to Embed a Google Form in Email

You might expect to paste the embed code into an email and have the form appear inline. That won't work. Gmail, Outlook, and Apple Mail all strip iframes and JavaScript from email content for security reasons. The form will either be invisible or display as broken HTML.

Google Forms does offer a built-in email option, though. Click Send, then select the email icon (the first tab). Enter the recipient's email address, subject line, and message.

Check the box next to "Include form in email" to embed a simplified version of the form directly in the email body. This renders the form fields as HTML — not an iframe — so recipients can start filling it out without leaving their inbox.

Click Send. The inline form works best in Gmail. In other email clients, recipients may see a link to the form instead of inline fields.

How to Embed a Google Form with File Upload

This is where embedded Google Forms hit a wall.

Google Forms does support file upload questions — you can add them by selecting "File upload" as the question type. But there's a hard requirement: every respondent must be signed in to a Google account to upload files. For a detailed walkthrough of the feature and its restrictions, see our guide on file uploads in Google Forms.

This sign-in requirement applies whether someone opens the form via a direct link or through an embedded iframe on your website. When a visitor who isn't signed in reaches the file upload field, they hit an authentication prompt. They can still fill out text and multiple-choice questions, but the file upload stays locked behind a Google sign-in.

For public-facing website forms -- client intake forms, application forms, vendor submissions -- this is a deal-breaker. Most external visitors either don't have a Google account or won't bother authenticating just to submit a document. Drop-off rates spike the moment a login wall appears.

What to do if you need file uploads without sign-in

If collecting files from external users is a core part of your embedded form, you need a tool that doesn't force authentication. File Request Pro gives you branded upload pages that anyone can use -- no account required. Visitors open the page, fill in form fields, drag in their files, and submit.

Key differences from Google Forms file uploads:

• No sign-in required — External clients, vendors, and the public can upload files immediately.
• Large file support — Handle files up to 5 GB, compared to Google Forms' 10 GB limit that still requires authentication.
• Automatic file organization — Uploaded files sort into folders by respondent name, date, or custom field.
• Cloud storage integration — Files route directly to your Google Drive, OneDrive, or SharePoint. For more on direct uploads, see our guide on uploading files to Google Drive.
• Embeddable — Upload pages embed on your website via iframe, the same way Google Forms does.

If your form needs both standard questions and file collection from people outside your organization, this is a more reliable option than working around Google's sign-in requirement.

Customizing Your Embedded Google Form

The iframe embed code gives you a few ways to control how the form appears on your page.

Width and height

These are the two most common adjustments. Set width="100%" to make the form responsive, and increase the height until the entire form shows without an internal scrollbar. There is no auto-height option -- you have to estimate.

Test your form after embedding. If you see a scrollbar inside the iframe, increase the height by 200-400 pixels until the full form is visible.

Removing the border

Add frameborder="0" and style="border: none;" to the iframe tag to remove any visible border around the embedded form:

<iframe src="YOUR_FORM_URL" width="100%" height="800" frameborder="0" style="border: none;"></iframe>

Pre-filling form fields via URL parameters

Google Forms supports pre-filling answers through URL parameters. This is useful when you already know some information about the respondent (their name, email, or a project reference).

To get the pre-fill URL:

1. Open your form and click the three-dot menu in the top right.
2. Select "Get pre-filled link."
3. Fill in the answers you want to pre-populate and click "Get link."
4. Copy the generated URL — it will contain parameters like &entry.123456=John+Doe.

Use this pre-filled URL as the src in your iframe code. Each visitor will see the form with those fields already filled in:

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true&entry.123456=John+Doe" width="100%" height="800" frameborder="0"></iframe>

For dynamic pre-filling — where values change per visitor — you'll need a small script that builds the URL before rendering the iframe.

Theming and visual customization

Google Forms has built-in theme options -- header image, accent color, background color, font style -- that you set in the form editor under the palette icon. These styles carry over to the embedded version.

You cannot apply custom CSS to the content inside the iframe -- cross-origin browser restrictions block it. But you can style the container around the iframe (backgrounds, padding, borders, shadows) to match your website's design.

Troubleshooting Common Issues

If your embedded Google Form doesn't load, looks broken, or behaves unexpectedly, check these causes in order.

1. Form shows as a blank white space

Symptom: The iframe area is empty — no form, no error, just white space.
Cause: Your site's Content Security Policy (CSP) is blocking the iframe.
Fix: Add docs.google.com to your CSP frame-src directive:

Content-Security-Policy: frame-src 'self' https://docs.google.com;

If you don't manage CSP headers directly, check your hosting platform's security settings or contact your host.

2. Internal scrollbar appears inside the form

Symptom: The form loads but is cut off, with a scrollbar inside the iframe.
Cause: The iframe height is too small for the form content.
Fix: Increase the height value. Start with height="1000" and adjust up or down. For multi-page forms, set the height based on the longest page.

3. Form doesn't display on mobile

Symptom: The form is cut off or requires horizontal scrolling on phones.
Cause: The iframe has a fixed pixel width.
Fix: Change width="640" to width="100%" and make sure the parent container doesn't constrain it with a narrow max-width.

4. "You need permission" or login prompt

Symptom: Visitors see a Google sign-in page instead of the form.
Cause: The form is restricted to your organization or requires sign-in.
Fix: In the form settings, go to Settings > Responses and uncheck "Limit to 1 response" (which forces sign-in). Also make sure the form isn't restricted to your Google Workspace domain.

5. Form disappears after saving in WordPress

Symptom: You paste the iframe in WordPress, save, and the code is gone.
Cause: The Visual editor or a security plugin stripped the iframe tag.
Fix: Use the Custom HTML block in Gutenberg, or switch to the Text tab in the Classic Editor. Whitelist docs.google.com in any security plugins.

6. Form loads on your computer but not for visitors

Symptom: Works in your browser but visitors report a broken form.
Cause: You're signed in to Google, so restricted forms load for you. Visitors aren't signed in.
Fix: Test in an incognito/private window where you're not signed in to any Google account. Fix any access or sharing settings that appear.

Quick reference

Google Forms Alternatives for Embedded Website Forms

Google Forms works for simple surveys and internal feedback forms. But if you're embedding a form on a client-facing website, you'll hit three limitations: no white-labeling (the Google branding always shows), limited design customization, and the sign-in requirement for file uploads.

If your embedded form needs to collect data from external users — especially files, documents, or images — a dedicated form builder gives you more control.

File Request Pro is built for collecting files and form data from people outside your organization. Upload pages carry your logo and brand colors, embed on any website via iframe, and don't require respondents to create an account or sign in. Files go straight to your Google Drive, OneDrive, or SharePoint.

That makes it a better fit for client intake forms, document collection workflows, and any situation where the people submitting the form aren't part of your Google Workspace.

Frequently Asked Questions

Can I embed a Google Form on any website?

Yes. The embed code is a standard iframe that works on any site where you can add custom HTML: WordPress, Squarespace, Wix, Webflow, Shopify, or hand-coded pages. Your site must use HTTPS, and its Content Security Policy must allow iframes from docs.google.com.

Do respondents need a Google account to fill out an embedded form?

Not for standard questions (text, multiple choice, checkboxes, dropdowns). If the form creator has enabled "Limit to 1 response" or added a file upload question, respondents will need to sign in with a Google account.

Can I embed a Google Form without the Google branding?

No. A "Google Forms" footer appears at the bottom of every form, including embedded ones. You cannot remove it. Google Workspace accounts can replace it with their organization's name, but the footer area stays.

Does the embedded Google Form work on mobile devices?

Yes. Google Forms is mobile-responsive by default. Set the iframe width to 100% so the form adapts to the screen size. Avoid setting a fixed pixel width, which causes horizontal scrolling on phones.

Will responses from the embedded form show up in my Google Forms dashboard?

Yes. Responses from embedded forms are identical to those submitted via a direct link. They appear in the same Responses tab and export to the same Google Sheet.

Can I embed multiple Google Forms on one page?

Yes. Each iframe is independent. But multiple iframes increase page load time, especially on mobile. Test the page speed if you're adding more than two forms.

Is it possible to embed a Google Form without an iframe?

Technically, yes -- but it takes serious technical work. You would need to build a custom HTML form that submits directly to Google's backend using the correct field names. This approach is fragile and breaks if Google changes their form processing endpoints. For most use cases, the iframe embed is the reliable choice.

How do I stop the embedded form from showing a scrollbar?

Increase the iframe's height attribute until the entire form fits without scrolling. There's no auto-height for cross-origin iframes, so you'll need to test different values. Add scrolling="no" to the iframe tag to hide the scrollbar entirely -- but only do this if you're sure the height is tall enough to show everything.