How to Pre-populate Form with Variables from a URL

This page contains instructions for passing through information from URL to an Originate form and prefilling. This can be a very useful feature as some information required on the application form might be available beforehand, thus saving the users' time and improving their user experience as they won’t need to provide the same information twice.

What are URL parameters?

URLs parameters (or “query strings”) are elements inserted in a URL to help filter, organize or track information on a site. They are assigned to a URL after a question mark (?) like in the example below:

The question mark sets the beginning of a query string and is followed by the query parameters(keys) to which values are assigned to. Multiple keys in a query string should be separated by an ampersand (&).

How to configure a form to pre-populate form inputs from URL parameters

1. Navigate to Forms under Components on the sidebar.  Select the form you would like to modify from the list of forms

   

2. After selecting the form, click on Edit in the top right corner to start editing

3. Click the Fields tab to add/modify fields in the form

   

4. Select the field you want to configure to read the URL parameters by clicking the Edit button on the right side of the field's container

   

5. On the field’s configuration pop-up, go to the Behavior tab, switch Auto fill data to Yes and click on Update. Repeat this and the previous step for all the fields that should be prefilled from URL parameters

6. 

   Keep track of the Contact Fields associated with the form fields you are editing as they need to be configured as well

7. After configuring all the fields, click on Apply to save those changes and to continue editing the form or Save & Close to save the changes and exit the form editor

8. 

   Click the cogwheel icon on the top right corner to open the Settings menu and select Custom Fields

9. 

   Search for the Contact Field associated with the edited form field and open its settings by clicking the name displayed on the Label column

10. 

    In the settings page, change the value of Publicly Updatable to Yes and click Save & Close to save your changes and exit the page. Repeat this for all Contact Fields you edited on the form (steps 1 - 7)

    1. 

It’s important to mention that the parameter(key) that will have a value assigned to it in the URL is the Alias value of the Custom Field. In this example, the URL parameter that should be used to pre-populate the First Name input field in the application form is firstname. Therefore, the URL would look similar to this:

You can also find the Alias for Custom Field on the Custom Fields page (it’s in the Alias column)