Fill form fields in advance in Zapier Interfaces

You can fill form fields in advance for your visitors by using URL parameters for each field. Form fields have unique references, which can be used to fill out certain fields by default for visitors.

Find the field reference

  1. On any page, find your form component. Learn how to add a component.
  2. Click the field you want to use, in the form component. 
  3. A sidebar will open. Scroll down to the bottom of the field options, and click REFERENCE.
    • You can use the existing reference for the field or type a unique reference name for each field.
  4. Save the reference to use later. You can repeat these steps for each field you want to use.

Build the URL

To build a URL with prefilled fields, you can use the field references in the following formula:

<url of your Interfaces page>?<first field reference>=<value to prepopulate>&<second field reference>=<value to prepopulate>

The first reference field needs to be connected to the URL by a ?, with its value connected by a =, and each subsequent field needs to be connected by an & and its value connected by a =.

actionEdit icon Example

The following example URL should open an Interfaces page with two fields prepopulated, Starting Date and Team:

https://url-parameters-test.zapier.app/sign-up?start_date=15-Mar-2023&team_name=Recruiting

Screen_Shot_2023-05-19_at_2.33.32_PM.png

 

Use URL parameters with embedded pages

You can also use URL parameters with embedded pages. To set this up, you'll first need to find the reference ID for the field you want to use. Once you have that ID:

  1. Click Share at the top of your interface page.
  2. Click the Embed tab, in the dialog box.
  3. At the bottom of the dialog box, select the checkbox for Allow query params
  4. In the embed code field, look for query-params=''.
  5. Paste the reference ID for the form field, followed by an equal sign and the desired value,  between the single quotes. For example: if a field reference ID is "email" and the value you want it to use is "test@example.com", then you can use the embed code this way: query-params='email=test@example.com'.
  6. Click Copy embed.

A dialog box showing the Allow query params checkbox selected

ratingStar icon Tip

You can also use information submitted through a form field in a text component to customize what visitors see. 

Was this article helpful?
1 out of 1 found this helpful