Embed a Google Form in Your Website

An embedded form is the live form shown inside a frame on your own page. Visitors answer without leaving your site.

Allow embedding

Embedding is off by default, so no other website can show your form.

1. In the sidebar's Form tab, click the pencil on the Live form settings row
2. On the Theme tab, turn on Style the live form if it is off
3. Turn on Allow embedding

The Embed code box appears under the switch.

Copy the embed code

Click Copy. The code is one line:

<script src="https://skyfield.cloud/embed.js" data-form="your-form" async></script>

Use the code from your own dialog, which carries your form's ID. The script puts the form in a frame right where you paste it and keeps the frame as tall as the form, so the page never shows a second scrollbar. The frame grows and shrinks as respondents move between pages, see an error message or reach the thank-you screen. After a submit, it scrolls the top of the form back into view.

To embed several forms on one page, paste one line per form.

Paste it into your page

Paste the code wherever your website accepts HTML:

• WordPress. Add a Custom HTML block.
• Wix, Squarespace, Webflow. Add an Embed or Code element and paste the code into it.
• Your own HTML. Paste it where the form should appear.

If your site does not allow scripts

Some website builders remove <script> tags. Under the embed code, click No scripts allowed? Use a plain iframe and copy that code instead:

<iframe
  src="https://skyfield.cloud/forms/your-form?embed=1"
  width="100%"
  height="900"
  style="border:0"
></iframe>

A plain iframe has a fixed height. Change height="900" to a number of pixels that fits your form, so the page does not show a second scrollbar. A form with several pages needs the height of its longest page.

Make it blend in

• Turn on Blend into my website, under Allow embedding. It removes the page color behind the form, so its cards sit on your page's own background. The look's cards, borders and shadows stay, and the live link keeps its page.
• Use the On your site preview to see the embedded form on a plain page before you save.
• Under Show, turn off Powered by if you do not want that line. It can only be hidden on an embedded form.
• An embedded form drops the page padding and the controls row around the form.

Stop embedding

Turn off Allow embedding and other websites can no longer show the form. Turning off Style the live form does the same.