Embed Code Examples, Best Practices, and Tips

Every Formsite form gets an automatic embed code for easy copy/paste embedding on your site. The embed code supports some extra parameters to make customizing the experience possible. These parameters include:

• prePopulate
• showSaveAndReturn
• title

Embed Code Parameters

On the form’s Share -> Embed Code page, the code shows the most common code that works for almost everyone. The key and width parameters are required and typically won’t need changing. Every parameter gets separated by commas and the last parameter does not, which is important to prevent script errors. Example:

EmbedManager.embed({
  parameter-1: "value", <- has comma
  parameter-2: "value", <- has comma
  parameter-3: "value   <- last one has no comma
});

prePopulate

The prePopulate parameter allows for adding values to the embedded form when the page loads. These values can come from the back-end system like user data, or through the URL from a link. For example, consider a form on a website that shows on a page after the visitor logs in. The form could include code to automatically insert the visitor’s name and email address when the page loads:

var name = $username // supplied by the back-end code
var email = $email

prePopulate: {"2":name,”3”:email},

Besides entering known values, the prePopulate parameter can receive values through the URL. The prePopulate parameter uses the same format as the form’s Pre-populate link and the embed code receives the values:

prePopulate: {window.location},

The URL to pre-populate with the name and email would look like:

https://www.mysite.com/mypage.html?2=testname&3=email@email.com

showSaveAndReturn

The Save & Return function changed this year to separate the Log in and New user forms. Each one has its own link, and this parameter lets embedded forms choose between them, too:

showSaveAndReturn: “signup”

or

showSaveAndReturn: “login”

title

The title parameter is specifically for adding a title attribute to the embedded form for accessibility needs. If the form audience includes visitors who may use screen-readers, the title attribute adds more information. For example, adding a title of “order form” will announce to the visitor when they reach the order form.

Embed Code Best Practices

• The code receives the height of the form page after each page loads, so it’s important to not specify a height attribute on the embedding container. If the site has a space for the embedded form, be sure to remove the height attribute for that space. Even a “height: auto” or “height: 100%” will interfere with the code’s ability to set an accurate height.
• WordPress sites have the option to use our WordPress plugin. Adding to the WordPress site allows for using the WordPress shortcode in posts, pages, and templates.