Embedding a Form in Your Site

When you're done building and designing your form, you'll want to share it with others to start collecting entries.

To embed your form on your site:

  1. Log in and go to Forms.
  2. To the right of the form, click Share.
  3. Choose between Embed with JavaScript, Embed with iFrame, and Embed on WordPress.
  4. Click Copy Code.
  5. Paste the code in your web page.

An embedded form works like normal: your rules, validation, confirmation emails, etc. will all work, and all data is recorded in the Entry Manager.

What people see when they complete the form depends on the confirmation option you chose: confirmation messages display in the embedded window itself, while redirecting someone to a new page opens a new browser window. For payment-enabled forms, a new window is opened when someone proceeds to the merchant to make their payment.

When you embed, we do strip out the background, header, and border styling from your theme to make for a more seamless integration with your website. If you'd like to have those elements applied to the form, then you'll want add them directly to the container you've embedded the form in using HTML or CSS styling.

Embed with JavaScript

To use this option, copy and paste the code directly into HTML of your web page.

Setting a Fixed Height

The embed code automatically adjusts the width and height of the form depending on the browser window size, font size, or if the form changes height due to validation errors. But you can override this to set a fixed height and add a scrollbar to the form by making slight edits to the embed code.

The trick here is changing the value of the autoResize parameter to false and changing the height parameter to your desired height. For example:

'autoResize':false,
'height':'373',

Embed with iFrame

To use this option, copy and paste the code directly into HTML of your web page.

You can use the iframe embed code if for some reason you're not able to use the JavaScript embed code. However, please note we recommend the JavaScript embed code and we're not able to offer customer support for iframes.

Submit Button Not Showing

We estimate the height of your form in the iframe, so it may not display perfectly on all browsers or at all resolutions and font sizes. Sometimes, this means the submit button won't display or that your form has too much white space.

To fix this, you can can adjust the value of the height attribute in the embed code. Make sure to leave enough wiggle room for instructions or error messages that might display when someone fills out your form, since this embed code doesn't automatically adjust the form's height when different elements appear.

Embed on WordPress

To use this option, copy and paste the code directly into a WordPress.com page.

If you're using WordPress.org, you can also embed your form if you can use the official WordPress Plugin. Just copy and paste the code into one of your WordPress pages.

To embed your form on your site, log in and go to Forms. To the right of the form, click Share. Choose between Embed with JavaScript, Embed with iFrame, and Embed on WordPress.

Create online forms

Add HTML forms to your site in a snap—no coding required.

Change Language