Wufoo

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.

If you're on the free plan there is a Wufoo branded footer at the bottom of your form. The footer is automatically removed when you upgrade to a paid plan.

To get the embed code for your site:

  1. Log in and go to Forms.
  2. Click the Share icon next to the form you want to share.
  3. Choose to:
    • Embed with JavaScript
    • Embed with iFrame
    • Embed on WordPress
  4. Click Copy Code.
  5. Paste the code in your web page.

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.

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.

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.

To embed your form with JavaScript, you can copy and paste the JavaScript embed code into the HTML of your web page.

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.

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

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

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.

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.