Embedded Form

What is an Embedded Form?

An embedded form is a way to display your form as part of your own web page, without your form users needing to click a link to Formsite.

Embed Code Options

On your form's "Share" page, click the "Embed Code" tab near the left of the page. Copy the embed code and then paste it into the area on your web page where you want your form to appear.

Your embed code will look similar to the example below:

<a name="formvtjqi9JE" id="formAnchorvtjqi9JE"></a>
<script type="text/javascript" src="//www.formsite.com/include/form/embedManager.js?abcd"></script>
<script type="text/javascript">
EmbedManager.embed({
  key: "www.formsite.com/form_app/Formsite?EParam=IRLY%2&abcd",
  width: "100%",
  prePopulate: { "2":"Alex", "3":"Powers","4-1":"1","4-2":"2"},
  resizeCallback: yourFunction,
  showSaveAndReturn: "login",
  title: "your iframe title"
});
</script>

Note: Each of your forms can be embedded into any number of different web pages, but only once per same web page. Embedding the same form multiple times into the same web page may cause display issues.

Required Parameters

• key: Special value that tells Formsite how to get your form. Don't change this.
• width: A size (in px) or a percentage to use for your form's width.

Optional Parameters

• prePopulate: Pre-populates fields on the first page of your form.
  • Use an object with number/value pairs to specify which item should get which value. Each number should correspond to the position of an item on your form. For pre-populating Matrix/Grid Items, use the "Item-SubQuestion" format.
  • Use the value window.location to pre-populate from your web page's URL, in the same format as the Pre-populate Link.
• resizeCallback: Call a custom JavaScript function each time the height of your form changes. Use this if your form is inside a dialog or an area that needs to update itself each time your form resizes.
• showSaveAndReturn: For Save & Return forms.
  • Use "login"to show the returning user login page as the first page.
  • Use "signup"to show the new user signup page as the first page.
• title: Add an optional accessibility title to the embed iframe.

Troubleshooting

If the embedded form doesn't load, start by verifying the embed code has been copy/pasted correctly. If you're using an editor to edit your site, check if you need to paste the code in "HTML" or "source" mode to prevent the editor from handling the code as normal text.

It's possible for existing HTML and scripts on your page to interfere with the embedded form. Verify all HTML on your page is valid and there aren't any script errors.