Table of Contents

How to Use URL Variables to Pre-Populate a Form

Danielle Kellogg Updated by Danielle Kellogg

Scenario

You want your users to fill out a form on your app and you’d like to have certain fields pre-populated for them.

Example: You’re posting the link to a job application form on your website and you’d like the Job, Job Location, and Referral Source to be pre-populated for all applicants.

Requirements

  1. An existing add record form that you want pre-populated. In this example, it’s the “Add Application” form. This feature does not work to modify values on an edit record forum.
  2. The fields that you want to pre-populate must be included on the form. Fields that aren't on the form can't be pre-populated for security reasons.

Steps

Identify the Page URL & View Key

In your Live App, go to the page that includes the form you want to pre-populate. Make a note of that page’s URL. In this example, we’re looking at the job application page for a lead engineer position:

In the Pages section of the Builder, go to the page with the form you want to pre-populate. Click on the form and make a note of it’s view key from the URL. In this example, the “Add Application” form’s view key is “view_23”:

Select Your Fields & Identify Their Keys

Decide which fields you want to pre-populate and what value you want each field to have. In this example, we want to pre-populate the Job, Job Location, and Referral Source fields with the values Lead Engineer, Philadelphia and postyourjob.com.

To gather the key for each field, go to the Schema section of the Builder, click on a field and make a note of the field key shown in the URL. Repeat for each field:

For this example, our field keys are:

Job = field_55

Job Location = field_98

Referral Source  = field_100

Connection Field Values

If you're going to set a value for a connection field, it will work differently than with non-connection fields. You'll need to identify the specific connected value that you want to use for that connection field by its record ID.

For this example, we want the Job connection field's value to be set to "Lead Engineer." To find its record ID, we'll use the browser inspector that can be accessed using Ctrl + Shift + I on Windows and Cmd + Opt + I on Mac:

After using the browser inspector, we found that the record ID for the Lead Engineer record is 59cd14ac592d6f093988c463. So that's the value we'll use for the Job connection field in the next step.

Format Your Fields & Values

Format your field keys and values using the following JSON syntax:

{"field_1":"Value A","field_2":"Value B","field_3":"Value C"}

Note: If you want to populate a connection field, the format will be slightly different. Instead, the record ID you identify will be formated with square brackets:

{"field_1":["Value A"]}

For this example, our formatted fields and values are:

​{"field_55":["59cd14ac592d6f093988c463"],"field_98":"Philadelphia","field_100":“p​ostyourjob.com​”}
Special fields types, like Name and Address, require additional formatting. For example, a Name field can include a Title, First name, Middle name and Last name. It would be formatted like this:
{"title":"Mr.","first":"Brandon","middle":"R","last":"Griggs"}

To see the format for all special fields, click here. For example, a multiple choice field would be:

{"field_70":["First Choice"]}

Encode the Fields & Values

Take the formatted fields and values from the previous step, and encode them using a tool like this URL Encoder.

You will get an output that looks like this:

%7B%22field_55%22%3A%5B%2259cd14ac592d6f093988c463%22%5D%2C%22field_94%22%3A%22Philadelphia%22%2C%22field_93%22%3A%22postyourjob.com%22%7D

By encoding the fields and values you are ensuring that the links can be shared and used while retaining the correct values.

Create the URL

Now that you have all the pieces, you can put your URL together using the following:

Page URL+?[view_key]_vars=+encoded fields/values

*Be sure to replace [view_key] with the View key you identified in step one.

For this example, our completed URL looks like this:

https://my-app.knack.com/job-portal#applicants/view-job-details/59cd14ac592d6f093988c463/?view_23_vars=%7B%22field_55%22%3A%5B%2259cd14ac592d6f093988c463%22%5D%2C%22field_98%22%3A%22Philadelphia%22%2C%22field_100%22%3A%22postyourjob.com%22%7D

And here's what the end results look like:

How did we do?

How to Allow Users to Add New Options in Forms

Add Read-Only Fields to a Form

Contact