How to Embed Google Forms in Website?

"Can I embed a Google Form directly into my website instead of linking to it?"- Google Docs Editors Community

This is a common question from website owners. For example, you are adding a contact form to your website and visitors who click a link to a Google Form leave your site and some will not come back. Google's own embed code keeps them on the page, but the form sits in a fixed box with its own scroll bar and Google's look, so it does not match your website. With Formfacade, you can paste one embed code in your webpage and your form shows there, with no iframe and no Google branding. Your visitors will feel they never left your site. Even better, the answers still go to Google Forms and Google Sheets, so you can sort them and decide who to call first.

Let's start. Create your form and follow the steps below.

How to embed your form in your website?

  • On the page that opens, name your form, click Build form and click Proceed. It can take about a minute.
  • You will land on the form's "Preview" tab.
  • Click on "Share" tab, then click on Embed
  • After a few seconds, "Where do you want to embed this form?" will be displayed
  • Select "My website is different from above" and click on the Next button.
The Embed tab under Share asking Where do you want to embed this form?, with Embed, My website is different from above and Next marked
  • Copy this embed code and paste this in the webpage where you want to embed this form.
The Embed tab under Share showing the embed code in a box, with the code marked
Your form will show on your webpage, with no iframe and no Google branding. If you need more customization options, click on the Next button.
You can select "Yes, I want to customize UI like my website" to change the form layout, colors, fonts & more. If you need any help, tell us if you have embedded the form by selecting the appropriate option and click on the Next button.
The Embed tab asking Have you embedded the form?, with Yes, I want to customize UI like my website selected and marked and Next marked
If you selected Yes, "Customize UI like my website" will be displayed. Click on the Next button. Then enter the url of your page and your message and click on Submit. Our team will reach out to you and help you with your request.
The Embed tab asking Which page did you embed the form? and Do you need any help?, with the message box and Submit marked

How to match your form to your website colors and fonts?

  • Click on "Preview" tab
  • Set your Primary color, Background and Typography settings to match your website
  • To keep these colors, click on the "Apply to all forms" button, which changes every live form on your account, not only this one. Your embed code works without it
  • To change the form layout, click on the Layout tab. That button says "Apply to this form"
The Theme tab in Preview with Primary color, Background and Typography settings, with the color boxes and the Apply to all forms button marked

What if my website is on WordPress, Squarespace, Shopify or Wix?

The default Google Forms embed can break on your website and cut off the form, so use the Formfacade embed code instead. Select your website if it is in the list and follow the instructions displayed. For Shopify, Wix or any other website, select "My website is different from above". You can also read How to Embed Google Forms in WordPress?, How to Embed Google Forms in Squarespace?, How to Embed Google Forms in Wix? and How to Embed Google Forms in Google Sites?

What about the Google Forms embed code?

Open your Google Form and click on the ⋮ More icon at the top right corner. Select Embed HTML. Embed HTML popup screen will be displayed. Copy the HTML code. Paste this HTML code in the webpage where you want to embed the form.
The Embed HTML dialog with the iframe code, Width 640 and Height 384, with Copy marked
When you embed your Google Form using this default option, you can only make limited customization such as changing the width and height of the form. This form will have the Google branding along with the disclaimer note at the bottom. If you would like to make your forms look more professional and match your website theme, follow the instructions above.

Summary

If you are adding a form to your website, a link sends visitors away and Google's Embed HTML gives you a fixed box with Google's look. With Formfacade, you paste the embed code into your webpage and your form shows there, so visitors stay on your website. Create your form and complete the steps above. If you have any questions, write to support.

Last updated: