Pre-Populate URL Parameters with Embedded Forms

UPDATE: This feature has been added to Formsite! See the newer article for instructions.


A common question when embedding forms is how to pre-populate URL parameters. For example, in this URL:

https://www.example.com?first=red&second=blue

The URL parameters come after the question mark ‘?’ and multiple parameters are separated with ampersands ‘&’. This URL contains parameters ‘first’ and ‘second’ with the corresponding values ‘red’ and ‘blue’.

Formsite Pre-populate URL Parameters

Using the prePopulate value in the form’s embed code lets form owners pre-populate the embedded forms. A previous article shows how to accomplish that using the site’s back-end language (php, java, .NET, asp, etc.). For form owners without back-end knowledge or access, these are instructions for using basic HTML files and Javascript.

Step 1: The Javascript

<script>
	function getUrlParameter(param) {
	    Param = param.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
	    var regex = new RegExp('[\\?&]' + param + '=([^&#]*)');
	    var results = regex.exec(location.search);
	    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
	};
</script>

Copy and paste the code into the embedding page, preferably in the <head> tag.

Step 2: The Embed Code

Review the documentation page for embedding forms, then use the Javascript to insert the URL parameters. For example:

<a id="formAnchor537031838" name="form537031838"></a>
<script type="text/javascript" src="https://fsx.formsite.com/include/form/embedManager.js?537031838"></script>
<script type="text/javascript">EmbedManager.embed({
	key: "https://fsx.formsite.com/res/showFormEmbed?EParam=B6fiTn%2BRcO5Oi8C4iSTjslFjwyH0dGmI&537031838",
	width: "100%",
	mobileResponsive: true,
	prePopulate: {
		"3": getUrlParameter("name"),
		"12": getUrlParameter("size"),
		"id12": getUrlParameter("race")
		}
});
</script>
  • Note that the prePopulate parameter uses either the item’s position (3, 12) or ID value (id12) to identify the form item.
  • Also note that multi-select items (Radio Buttons, Dropdowns, Checkboxes) use numbers to indicate which choice position is selected.

Step 3: Pre-populate URL Parameters

Use the URL to pass the values using the parameter names in your embed code:

https://www.example.com?name=First%20Last&race=2&size=3
Billions of forms submitted