How to Embed Google Forms in Website?

"how can I insert or embed or add google forms as a contact form"- Google Docs Editors Community

This is a common question, and 18 people on Google's forum have asked it about a contact form on their website. A link to a Google Form takes visitors off your site, and some don't come back. Google's Embed HTML keeps them on the page, but in a fixed box with its own scroll bar and Google's footer, and you can change only its width and height. With Formfacade, you paste one embed code into your page and the form shows there with no iframe and no Google branding. The answers still go to your Google Form and Google Sheets, so you can sort them and decide who to call first.

Below are two ways to put a Google Form on your website, and where each one falls short.

Google Forms' Embed HTML

  • Open your Google Form and click on the ⋮ More icon at the top right corner
  • Select Embed HTML
  • Copy the HTML code and paste it in the webpage where you want the form
The Embed HTML dialog with the iframe code, Width 640 and Height 384, with Copy marked
Where it falls short: you can change only the width and height. The form keeps Google's look and the note at the bottom, and a long form scrolls inside its own box.

Formfacade embed code

  • On the page that opens, name your form, click Embed form and click Proceed.
  • On the Share tab, under Where do you want to embed this form?, select "My website is different from above" and click Next.
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 it in the webpage where you want the form.
The Embed tab under Share showing the embed code in a box, with the code marked
Your form shows on your webpage, with no iframe and no Google branding. Where it falls short: the free plan adds a small Formfacade attribution, and removing it needs a paid plan.

Want help matching your website?

Click Next on the embed code, select "Yes, I want to customize UI like my website" and click Next.
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
Enter the url of your page and your message and click 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?

Summary

A link sends visitors away from your website, and Google's Embed HTML puts the form in a fixed box with Google's look. With Formfacade, you paste one embed code in your webpage and the form shows there with no iframe and no Google branding, while the answers still reach your Google Form. Create your form and complete the steps above. If you have any questions, write to support.

Last updated: