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