Prefill Forms

Introduction

Form prefill allows you to populate your form with data before (or after) it is displayed to the user. This can be useful when you want to pre-populate the form with default values, or when you want to fetch data from an external source.

There are two types of prefill:

1. Static prefill: Prefill data on form load, using URL parameters or hidden fields. This happens before the form is displayed to the user.

2. Dynamic prefill: Prefill data based on user input, using dynamic lookups. This happens before or after the form is displayed to the user.

Here is an example of dynamic prefill using a picklist field (and our Salesforce integration):

The user selects a contact record from a dropdown list. The form then fetches the contact’s email and phone number from Salesforce and pre-fills the form with this data.

Static prefill

Static prefill is the simplest way to prefill your form. You can use URL parameters to prefill your form fields. This is useful when you want to share a link to your form with pre-filled data. If you are using Formcrafts’ embed library, you can also prefill your form using the values argument.

URL parameters

You can pre-populate form fields using URL parameters. If you have a name field in your form, denoted by field1, you can prefill it by appending the URL with ?field1=John. The URL will look like this:

app.formcrafts.com/my-form?field1=John

This works with any number of fields. For multiple fields use this format:

app.formcrafts.com/my-form?field1=John&field2=Smith&field3=New+York

To make this work you need the field ID. You can find the ID of a field on the top-left corner of the field settings dialog — which is accessed using the cog icon.

In order to prefill choice fields (like multiple choice, or dropdown), which may contain more than one option, you can use the following format:

app.formcrafts.com/my-form?field4[]=option1&field4[]=option2

Note that these examples use the dedicated form links. However, this method will also work when your form is embedded on a page using the embed code. You would simply use URL parameter(s) on the parent page to prefill the form, example:

your-website.com/your-page?field1=John&field2=Smith

You don’t have to use the field ID. Pre-fill also works with the field label. If your hidden field is labelled name you can use ?name=Markus to prefill the field.

Here is an example of prefilling name and using that to personalize the form:

Embed library

If you are using Formcrafts’ embed library you can prefill your form using the values argument. You can learn more about Formcrafts’ embed library here.

Here is a simple example that renders the form, while pre-filling it with some information:

const myInlineForm = await createInlineForm({
	form: "form_key", // Your form key
	target: document.getElementById("element_id"), // Target element
	seamless: true, // Removes form border, shadow, and padding
	width: 500, // Max width of the form
	redirectWithin: true, // Keep redirect within form frame
	values: {
		field1: "Jack Smith",
		field2: ["Chocolate", "Vanilla"]
	} // Prefill values
});

Dynamic prefill

Dynamic prefill allows you to prefill your form after it is displayed to the user. This can either be in response to user input (via Lookup rules) or based on other actions (via our embed library).

This is an uncommon feature, and not something you’d find in other form builders like Typeform ↗.

Lookup rules

Dynamic lookups are a powerful way to prefill your form with data fetched from an external source. Formcrafts supports lookup rule pre-fill via a remote URL, or one of our dedicated lookup integrations, like Salesforce form prefill.

Some examples on what you can achieve with dynamic lookups:

1. A currency conversion form that uses live exchange rates from an REST API to convert between currencies.

2. A feedback form that analyzes the sentiment of an open-ended field, and shows a follow-up question based on the sentiment.

3. A lead capture form that fetches the user’s first and last name from a CRM, based on their email address.

We recommend reading the dynamic lookup documentation to learn more about this feature.

Embed library

The embed library can pre-fill data either on load, or later on. Here is an example of loading a form using the embed library:

const myInlineForm = await createInlineForm({
	form: "form_key", // Your form key
	target: document.getElementById("element_id"), // Target element
	seamless: true, // Removes form border, shadow, and padding
	width: 500, // Max width of the form
});

Once the form is loaded you have access to the values method. This method allows you to prefill the form with data. Here is an example:

myInlineForm.values({
	field1: "Jack Smith",
});

Advanced scenarios

Linked forms

Our customers often create a two-form flow that goes something like this:

1. The first form collects basic information about the user, like their name and email.

2. The second form is pre-filled with this information, and asks for more detailed information.

Once the user submits the first form they are redirected to the second form. The second form is pre-filled with the data from the first form. This is what we call linked forms, and pre-fill is a key part of this feature.

Learn how to implement linked forms.

Read-only data

There are cases where you want to include some data in the form, but you don’t want the user to view or edit it. Some examples:

1. A survey form with read-only agent ID.
2. A linked form (like above) where the user should not be able to edit the pre-filled data.
3. Another form that contains source data (like a quote) that should not be edited.

You can achieve this by adding a hidden field to your form. Pre-filling data into a hidden field works the same way as pre-filling a visible field. The only difference is that the user will not be able to view or edit the data.