Embedding a Form in Your Site

You can share your form by embedding it directly on your website. An embedded form uses the same field and form settings you set up in the form builder. All entries are stored in the Entry Manager.

Jump to...

 

Getting the Embed Code

To get the embed code for your site:

  1. Log in and go to Forms.
  2. To the right of the form, click Share.
  3. Choose to:
  4. Click Copy Code.
  5. Paste the code in your web page.

Confirmation Options

What people see after they submit the form depends on the confirmation option you chose in the form builder.

If you choose:

  • Show Text: The confirmation message will display directly in the embedded form window.
  • Redirect to Website: A new browser window will open up and send people directly to the website of your choice.

For payment-enabled forms, a new window will open when someone proceeds to the merchant to make their payment.

Theme Styling

When you embed your form, the background, header, and border styling from your theme is removed for a more seamless experience with your website. To apply those elements to an embedded form, add them directly to the container you've embedded the form in using HTML or CSS.

Downloading the HTML/CSS

While it's possible to download the HTML/CSS of your form, our customer support team isn’t able to troubleshoot issues with this. For a fully supported experience, we recommend embedding with Javascript, iFrame, or WordPress instead.

 

Embedding with JavaScript

To embed your form with JavaScript, you can copy and paste the JavaScript embed code into the 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. If you want to set a fixed height, you can edit the embed code to add a scrollbar to the form.

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',

 

Embedding with an iFrame

To embed your form using an iFrame, copy and paste the iFrame code directly into the HTML of your web page.

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 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.

 

Embedding on WordPress

It's possible to embed your form on both Wordpress.com and Wordpress.org.
  • Using Wordpress.com: To embed your form on Wordpress.com, copy and paste the code directly into a WordPress.com page.
  • Using Wordpress.org: You can embed your form on Wordpress.org if you use the official WordPress Plugin. Once you have the plugin, copy and paste the code into your WordPress page.
You can share your form by embedding it directly on your website. An embedded form uses the same field and form settings you set up in the form builder. All entries are stored in the Entry Manager.

Create online forms

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

Change Language