This article will take you through how to add dynamic URL parameters and prefill form fields on Airtable.

It is no secret that users dislike forms, but they are essential to achieve some objectives. By streamlining the user experience, you can remove some of the decision-making and work involved in consenting to your call to action.

Using information you have about your users to pre-populate a form is one of my favourite tricks. Forms can have the information automatically populated into fields when they are published or sent out. This is called prefilling.

Prefilling your forms allows you to have some data auto-populated into the form fields. This is done using a "prefilled link" or "prefilling through the URL". Form fields can be pre-filled by adding a query string to the URL with the values to be passed in.

Prefilling forms might be the easiest and most effective way to decrease the burden and encourage people to take action. The form will have pre-filled fields to match the response with the user.

Create a Form View

The information you can pre-populate in a form depends on what information is available in your CRM. So, if you want to pre-populate a piece of suggested information, that data has to be stored somewhere in your database.

Airtable is a low-code platform for building collaborative applications. Once the fields are created in the grid view, add a form view to the table.

With your pre-filled Airtable forms, you can make it easier for your clients, customers, and colleagues to fill out your forms quickly and easily.

Choose the fields you want to prefill

The initial step involves considering the size and content of the link.

Depending on your form, some examples of what prefilling through the URL can achieve:

• Pre-populated form data for returning visitors that have filled out forms on your site before
• Prefilling a hidden field with a value indicating where the link to reach the form was clicked
• Pre-populate information that was previously collected to record a registration or make a sale
• Pre-populate a discount code
• Prefilling personal details for all the recipients that was previously collected, such as name and address
• Prefilling your email address into a "contact me" field in the form

Retrieve the URL for your web form

Start by finding the URL for the form you wish to prefill. Login into your Airtable account and go to the Form View.

Click on the "Share form" button to show the newly created form's URL and copy the form URL to your clipboard:

Build Your Dynamic Prefill URL

With URL parameters, you add small bits of data to the URL, which is then used to save this information and display it in the form. Check out this website to find the proper encoding for various symbols.

The ENCODE_URL_COMPONENT formula function translates strings of text and characters into language that can be read in your browser's address field. Because URLs can only read special characters (e.g. %20 instead of a space), you have to encode any normal components in order for them to be used in a web address.

Once you get the form URL, you can manually add parameters in the form URL to prefill fields. You can use a basic text editor to build your link.

First, insert a question mark ? after the form ID in your URL:

'https://airtable.com/YOURFORMURLHERE?'

Replace YOURFORMURLHERE with your form ID. URL parameters are the portion of a URL that follows a question mark.

Next, we want to add to this URL by chaining on a new function. To do this, we will insert an ampersand (&) as a separator:

'https://airtable.com/YOURFORMURLHERE?'&

Then, type the text prefill_ to prefill a form input followed by another separator (&):

'https://airtable.com/YOURFORMURLHERE?'& 'prefill_’

Add the ENCODE_URL_COMPONENT function followed by the name of the field you wish to refill. The part after prefill_ must exactly match the actual field name as it appears in the table, not the label used in the form:

'https://airtable.com/YOURFORMURLHERE?'& 'prefill_' &ENCODE_URL_COMPONENT('Name') &

Once you've typed in the field name, you can then type in an equals sign (=):

'https://airtable.com/YOURFORMURLHERE?'& 'prefill_' &ENCODE_URL_COMPONENT('Name') & '='

To add the information you wish to refill, encode the value in the field (the title in the Name field) by adding ENCODE_URL_COMPONENT({Name}): 

'https://airtable.com/YOURFORMURLHERE?'& 'prefill_' &ENCODE_URL_COMPONENT('Name') & '=' & ENCODE_URL_COMPONENT({Name})

This is the link you will provide to your respondents that allows them to access the prefilled form.

If you'd like to prefill more than one field in the URL, you'll need to add the "&prefill_" url parameter between each field you'd like to fill

Here's an example of what a URL would look like for prefilling name and email into a form.

'https://airtable.com/YOURFORMURLHERE?'
& 'prefill_' &
ENCODE_URL_COMPONENT('Name') & '=' & ENCODE_URL_COMPONENT({Name})
& 
'&prefill_' & ENCODE_URL_COMPONENT('Email') & '=' & ENCODE_URL_COMPONENT({Email})

Next, you will paste the copied URL into a new formula field.

Create Formula Field in your grid view

When you're sending out the same link to a large number of recipients, or embedding each link in a different location, you want to have the link prefill differently for everyone. To do so, we'll need to write a formula using the ENCODE_URL_COMPONENT function by including some of the basic information needed.

Create an Airtable formula to pre-fill the information required, e.g. name and email address. We need the encode URL function to translate the text name of your field (Name or Email) into an encoded URL.

The results in the full pre-filled URL for each unique record in your table:

Test your prefilled URL

This URL that you have created will prefill a form for you when access it. You can test out each URL by clicking them and seeing the unique data filled in the form.

Here's what that should look like when we're done:

https://airtable.com/shrqtr0GQWs2oGDAS?prefill_Name=John%20Doe&prefill_Email=email%40example.com

Clicking on one of the URLs we just created we can now see that the value for that record has been prefilled into our form.

Now you're ready to send the form - already pre-filled with their basic information - to your respondents.

Key Takeaways

We can assume that pre-filling forms will increase conversion. When a form is pre-filled, people are more likely to submit it.

Sending a prefilled form can save users some time filling out the form and create a positive first experience, instead of asking respondents to fill out basic data again. Moreover, the work you'll put into prefilling forms will be rewarded with higher conversion rates, as you are making the experience smoother for the user.

This article was originally published on Bannerbear.com on April 19, 2022. Written by: Juliet Edjere

ABOUT ME

I'm Juliet Edjere, a no-code expert focused on design, product development, and building scalable solutions with minimal coding knowledge.

I document all things product stories, MVP validation, and how designs, data, and market trends connect.

Visit my website → built with Carrd and designed in Figma