How to Embed a Google Form in Your Website (Step-by-Step)

Sending a visitor away from your website to fill out a form is a reliable way to lose them completely.

Every time a user clicks a link that forces a new tab to open, you introduce friction and context switching.

Embedding a Google Form directly on your page keeps the user in your environment, surrounded by your main navigation and branding.

The process relies on a standard HTML element called an iframe, but pasting the raw code into your site is only the first step.

Making that form look intentional, fit your layout, and actually function on a mobile screen requires a few specific adjustments.

Where do you find the Google Forms embed code?

Google Forms provides a native iframe snippet for every form you create, but it is hidden behind the sharing menu.

Before you generate this code, you must ensure your form permissions allow external visitors to view it.

If you are using a Google Workspace account through your company or school, forms are often restricted to internal users by default.

If you embed a restricted form on a public website, your visitors will just see a Google login screen or an access denial message.

Here is how to configure your permissions and locate the embed code:

Open your document in the Google Forms editor and click the Settings tab at the top center of the screen.
Scroll down to the Responses section and click the downward arrow to expand the menu.
Look for the toggle labeled Restrict to users in [Your Organization] and its trusted organizations.
Turn this toggle off to make the form public, ensuring anyone visiting your website can load the form without logging into a Google account.
Scroll back to the top of the page and click the prominent purple Send button in the top right corner.
In the pop-up window that appears, look at the Send via options and click the < > icon, which represents HTML code.
You will see a block of HTML code starting with <iframe src="....
Below the code block, you can optionally adjust the default Width and Height values provided by Google.
Click the Copy button in the bottom right corner of the window to save the entire iframe snippet to your clipboard.

How to insert the iframe code into your website HTML

Once you have the iframe snippet on your clipboard, you need to place it into the backend of your website.

Because an iframe is raw HTML, you cannot simply paste it into a standard rich-text editor or paragraph block, as the website will display the literal code text instead of rendering the form.

The exact method depends on the content management system or website builder you use.

Below are the step-by-step implementations for a raw HTML environment, WordPress, and Squarespace.

Raw HTML implementation

If you are building a static site or manually editing template files, you will place the iframe directly into the HTML body.

Open your target HTML file in your code editor.
Locate the <body> section and find the specific <div> or container where you want the form to appear.
Paste the iframe code directly into the container.
Ensure the iframe is placed outside of any <p> tags, as wrapping block-level elements inside paragraph tags can cause rendering issues in older browsers.
Save your file and refresh your local browser to confirm the form loads within the intended container.

WordPress Gutenberg implementation

If your site runs on WordPress, the default Gutenberg block editor makes it straightforward to add custom code to any page or post without installing additional plugins.

Open the WordPress page or post where you want the form to live.
Click the + icon to add a new block to your layout.
In the block search bar, type Custom HTML and select the corresponding block.
Paste your Google Forms iframe snippet directly into the block's text field.
Click the Preview button on the block toolbar to verify the form renders correctly within the editor.
Click Update or Publish on the top right of the WordPress interface to push the changes live.

Squarespace implementation

Squarespace uses a visual grid system, so you will use a specific content block to inject the iframe without breaking the surrounding layout.

Log into your Squarespace dashboard and navigate to the page you want to edit.
Click Edit in the top left corner of the page preview.
Hover over the section where you want the form and click Add Block.
Select the Code block from the menu (do not use the Embed block, as that is designed for URL-based oEmbeds, not raw iframes).
In the Code block settings, ensure the format dropdown is set to HTML.
Delete the placeholder <p>Hello World</p> text and paste your Google Forms iframe code.
Squarespace often disables scripts and iframes while in edit mode, so you may see a "Script Disabled" warning; save the page and view it in a fresh, logged-out browser window to see the actual form.

How to adjust the width and height of your embedded form

When you copy the embed code from Google Forms, it includes static dimensions, typically width="640" and height="1246".

These fixed pixel values tell the browser exactly how much space to carve out for the form.

While fixed pixels guarantee the form will look a specific way on a desktop monitor, they are fundamentally rigid.

If a user visits your site on a device narrower than 640 pixels, the browser will force a horizontal scrollbar, which ruins the user experience.

To control how the form behaves across different screen sizes, you must choose between fixed pixel dimensions and responsive percentage-based sizing.

Sizing method	Pros	Cons	Best for
Fixed pixels (`width="640"`)	Guarantees the form never stretches too wide on massive desktop monitors.	Causes horizontal scrolling and cut-off content on smaller mobile screens.	Internal company portals viewed strictly on desktop computers.
Percentage width (`width="100%"`)	Fluidly adapts to the exact width of the parent container on any device.	Can look awkwardly wide and stretched if placed in a full-width desktop container.	Modern, responsive websites accessed via a mix of mobile and desktop devices.
Fixed height (`height="800"`)	Prevents the page layout from jumping around as the form loads.	If the form is longer than 800px, a second internal scrollbar appears inside the iframe.	Short, single-page forms like newsletter signups.
Viewport height (`height="100vh"`)	Fills the entire vertical height of the user's current screen.	Can push your website footer completely out of view until the user scrolls.	Dedicated landing pages where the form is the sole focus.

In practice, adjusting the width is straightforward: you manually change the 640 in the HTML code to 100%.

Adjusting the height is more complicated because iframes cannot automatically detect the height of the content inside them due to browser security rules preventing cross-domain scripting.

If your Google Form has multiple pages, conditional logic that reveals new questions, or simply a long list of fields, the height of the form will change dynamically.

Because the iframe cannot resize itself to match, you usually have to set a generous fixed pixel height (e.g., height="1500") to ensure the submit button is never cut off, even if it leaves some empty white space at the bottom.

How to make your iframe Google Form responsive on mobile

A form that looks perfect on a laptop can become unusable on a smartphone if the iframe constraints are not handled properly.

The most common mobile failure is horizontal scrolling, where the user has to pan left and right just to read the questions and find the submit button.

This happens because the default Google Form embed code hardcodes the width to 640 pixels, while most modern smartphone screens have a CSS width closer to 390 or 430 pixels.

To fix this, you need to abandon the inline pixel width and apply simple CSS rules directly to the iframe element.

Instead of relying on the HTML attributes, you can add a style attribute to the iframe.

Here is the default code Google provides:

<iframe src="https://docs.google.com/forms/..." width="640" height="1246" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Here is the modified responsive version you should use instead:

<iframe src="https://docs.google.com/forms/..." style="width: 100%; max-width: 800px; height: 1200px; border: none;" marginheight="0" marginwidth="0">Loading…</iframe>

By setting width: 100%, you tell the iframe to shrink to fit whatever mobile screen is viewing it.

By adding max-width: 800px, you prevent the form from stretching to ridiculous proportions on an ultrawide desktop monitor, keeping the reading lines comfortable.

Expert tip: If your form uses sections and page breaks, the height of each page will vary. Set your iframe height to accommodate the longest page in your form to prevent the Next or Submit buttons from disappearing below the iframe boundary.

Another critical mobile consideration is the touch target size.

Google Forms handles its own internal mobile responsiveness automatically - the radio buttons, checkboxes, and text inputs will scale appropriately for touch screens.

However, if you place your iframe inside a website container that has thick padding or margins, you compress the available space for the form even further.

Ensure the parent container on your website layout drops its horizontal padding on mobile breakpoints, giving the iframe the full width of the screen to render the form fields clearly.

Best practices for setting up a website intake form

Embedding a form perfectly does not matter if the form itself is difficult to fill out.

An intake form on your website acts as the front door to your business, and it needs to balance your need for detailed information with the user's limited patience.

When moving legacy processes online, many organizations simply copy their old paper questionnaires field-for-field into a digital format.

This creates overwhelming, unbroken walls of questions that drive up abandonment rates.

If you are currently relying on old physical documents, you can use a tool to convert an intake form PDF to a Google Form, but you should still audit and restructure the questions for a web environment.

Here are three common intake workflows and how to structure them effectively for an embedded website form.

1. The B2B Client Discovery Form

Service-based businesses often use an embedded form on their "Work With Us" page to qualify leads before scheduling a call.

The goal here is to gather enough context to understand the project scope without asking the prospect to write a novel.

Instead of open-ended text boxes that require heavy typing, use structured dropdowns or multiple-choice grids.

Group the form into two logical sections: basic contact details on page one, and project specifics on page two.

Budget constraints

❌ Weak: How much are you willing to spend on this project?
✅ Strong: Which budget tier aligns with your current allocation for this initiative?

Why it works: Providing predefined ranges removes the pressure of naming a specific number and speeds up completion.

2. The Healthcare Patient Registration Form

Medical clinics and therapy practices frequently embed intake forms on a secure patient portal page.

These forms are notoriously long, requiring demographic data, insurance details, and extensive medical history.

The primary rule for long, complex forms is pagination.

Never present fifty questions on a single scrolling page; use the Google Forms Add section tool to break the intake down into logical bites.

A progress bar (enabled in the Google Forms presentation settings) is mandatory here so patients know how much is left.

Symptom history

❌ Weak: List any conditions you have experienced in the past five years.
✅ Strong: Please check any conditions you have been treated for in the past five years (select all that apply).

Why it works: Recognition is cognitively easier than recall; checking boxes is faster than typing out medical terms.

3. The Freelance Project Brief

Independent creatives use embedded forms to standardize incoming requests and filter out poor-fit clients.

These forms need to assess both the creative requirements and the logistical timelines.

If you frequently build these forms based on unique client calls or varying service tiers, you can generate a tailored Google Form from a description to match the specific engagement.

Keep the tone professional but conversational, and limit the number of required fields to only the absolute essentials needed to draft a proposal.

Timeline expectations

❌ Weak: When do you want this done?
✅ Strong: What is your target launch date for this project?

Why it works: "Target launch date" grounds the timeline in a specific business event rather than a vague personal preference.

Should you embed your form or link to it directly?

Just because you can embed a Google Form does not mean it is always the best architectural choice for your website.

Both inline embeds and external links have distinct advantages depending on your technical constraints and the user's intent.

Choosing the wrong method can negatively impact your conversion rates and analytics tracking.

The case for embedding the form

Embedding the form using an iframe is the best choice when the form is a core part of the page's narrative.

If you have a dedicated "Contact Us" page, forcing the user to click a link to leave that page feels broken and unprofessional.

Embeds keep the user on your domain, meaning your website navigation remains accessible at the top of the screen if they change their mind or need to reference another page.

Furthermore, an embedded form inherits the visual trust of your website; the user sees your URL in the address bar and your logo in the header, which can increase their willingness to submit personal data.

The case for linking directly

Linking directly to the standalone Google Forms URL is often better for complex, multi-page assessments or temporary event registrations.

When a user clicks a direct link, the form opens in a full-screen Google environment.

This eliminates any CSS conflicts, ensures perfect mobile responsiveness, and removes the visual clutter of your website's sidebar or footer.

Direct links are also significantly easier to share in emails, social media posts, or text messages without requiring the user to navigate through your website layout to find the form.

The analytics trade-off

The most significant drawback to embedding a Google Form is tracking conversions.

Because the iframe pulls content from Google's servers, your website's Google Analytics or Facebook Pixel cannot "see" inside the iframe.

You cannot easily track when a user clicks the submit button inside an embedded form using standard event tracking.

If precise conversion tracking and marketing attribution are critical to your business, you must either rely on the standalone Google Form link (which has limited tracking itself) or use a dedicated website form builder that integrates natively with your analytics tools, rather than relying on an iframe.

FAQ

Can you customize the background color of an embedded Google Form?

You cannot change the background color of the form directly through the embed code or your website's CSS. Because the form loads inside an iframe, cross-domain security policies block your website from altering its internal styles. To change the background, you must open the form in Google Forms, click the Customize Theme palette icon, and select a color that closely matches your website.

Why is the bottom of my embedded Google Form cut off?

The bottom is cut off because the iframe height is set too low for the content inside it. Iframes do not automatically expand to fit their contents when loading cross-domain tools like Google Forms. You must locate the height="..." attribute in your HTML embed snippet and manually increase the pixel value (e.g., from 1246 to 1800) until the submit button is fully visible.

Does embedding a Google Form affect my website loading speed?

Yes, embedding an iframe forces the browser to load an entirely separate webpage inside your own, which requires downloading additional scripts and assets from Google's servers. While Google's infrastructure is fast, this extra sequence will slightly increase your page's total load time. To mitigate this, place the form lower on the page so it does not block the initial rendering of your core website content.

How do you track Google Analytics conversions on an embedded form?

Tracking a submit event inside an iframe is blocked by default due to browser security restrictions. The most reliable workaround is to configure the Google Form's presentation settings to show a confirmation message containing a link back to a specific "Thank You" page on your website. You can then track visits to that internal "Thank You" page as your primary conversion goal in Google Analytics.

Getting a form onto your website is ultimately about removing barriers between you and the information you need. While the iframe code takes a few minutes to configure and style correctly, keeping users natively on your domain is almost always worth the effort for standard inquiries. If you are starting this process by staring at a folder of old Word documents or PDFs that need to become web forms, Doc2Form can automatically convert those files into Google Forms in your Drive, giving you the embed code without the manual data entry. Choose the sizing method that fits your layout, test the scrolling on your phone, and make the submission process as frictionless as possible.