If you’re hunting leads, gaining insights, or gathering people for your next event, Baserow’s form view is perfect. No need to juggle other platforms—our form view directly funnels replies into your table.
It gets even better! By using pre-fill parameters in the URL, fields can be filled with data beforehand, improving the user experience.
Pre-filling not only cuts down user effort but also prompts action. So, when users click the form link, they’ll find some answers partially filled out. This saves them from the hassle of manual input.
In this tutorial, we’ll walk through the process of pre-filling forms in Baserow. We’ll cover the following steps:
To complete this tutorial, you’ll need the following:
Let’s dive in!
Log in to your existing Baserow account or create a new account if you don’t have one already.
Once you log in, access the dashboard to add workspaces and databases. You can work with an existing workspace, database, or table, or set up a new workspace from scratch.
In this tutorial, we will set up a new workspace and add a template from the library.
To create a new workspace, simply click on the + Create workspace button. Then, click on Add workspace.
If you’re just starting with Baserow, we recommend you read our support article on how to create a workspace and how to add collaborators to a workspace.
Now that the workspace is set up, you can either create a database from scratch or choose a template from our template library. Let’s use a template from the library.
Click on the + Create new button to start creating a new database.
Select the “From template” option to add a database from a template.
Input “Product Roadmap” in the template search box.
Click the Use this template button to add the template to the workspace.
That’s it! We’ve successfully created a new database. Now we can populate, manage, and organize data in Baserow.
Since we’re using the Product Roadmap template, already have a New feature request form view in the Features table. This automatically includes existing fields in the form. You can add or remove fields as needed. Review and customize the form settings, such as the form’s name, confirmation message, and other relevant options.
Alternatively, you can add a new form view and easily build forms in your table with the click-to-add functionality.
In this case, we have the form already set up, so we simply need to share the link publicly:
The form URL is generated by Baserow. Now that we have the form URL, we can add parameters to the form URL to pre-fill fields.
Let’s break down the code behind pre-filling forms in Baserow - query parameters.
Query parameters are components added to the end of a URL that provides additional information to a web server. They are usually in the form of key-value pairs and are separated from the base URL by a question mark (?
), with each parameter pair separated by an ampersand (&
).
For example, consider the URL: https://baserow.io/?utm_source=outreach&utm_medium=email
In this URL:
?
indicates the start of the query parameters.utm_source
and utm_medium
are the keys (parameter names).outreach
and email
are the values assigned to these parameters.Now that you understand how query parameters work, let’s pre-fill the Baserow form.
We want to enhance the form URL generated in the earlier step, by appending parameters to pre-fill specific fields.
All fields which can be added to form can be pre-filled. Note that the values are case-sensitive.
To pre-fill a form,
Copy your share form URL.
Add a ?
to the end of a URL: <form_url>?
Pre-fill query parameters are prefixed with prefill
, followed immediately by an underscore: [FORM_URL]?prefill_
URL parameters are made up of a key (
<field_name>
) and a value (<value>
), separated by an equal sign (=
). Multiple parameters are each separated by an ampersand (&
).
Type the name of the field. This must exactly match the field name as it appears in the form: [FORM_URL]?prefill_<field_name>
Type an =
equals sign, followed immediately by the value to pre-fill the field: <form_url>?prefill_<field_name>=<value>
The
<field_name>
and<value>
are placeholders. Replace with the actual name and value of your field.
Baserow will encode the URL to avoid any issues with the query parameter. URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits. URLs cannot contain spaces.
Whether you’re dealing with single line text, long text, URL, email field, phone number field, or number field, the pre-fill syntax is quite uniform.
Let’s pre-fill the Title field. For a quick, short response, we will pre-fill it like this in the URL:
<form_url>?prefill_Title=New font
Generally, the prefill value is the same as the field’s value. But, in some cases, the value is translated to a different value.
A rating field accepts a number to indicate how many stars should be filled.
Let’s pre-fill the Priority field:
<form_url>?prefill_Priority=3
A single select field type can accept the value that is shown in the select dropdown.
Let’s pre-fill the Category field:
<form_url>?prefill_Category=Enterprise
A multiple select field can accept multiple values shown in the dropdown. To pre-fill more than one value in a multiple select field, we can do so by adding a ,
between the values.
First, let’s convert our Category single select field to a multiple select field:
Next, we can pre-fill this field by separating the multiple select values with a ,
comma.
<form_url>?prefill_Category=Enterprise,Engagement
A link to table field can accept any row in the linked table.
Let’s pre-fill the Assigned team field:
<form_url>?prefill_Assigned team=Thor
A boolean field can accept either true or false values. The Features table does not have a boolean field, so we will add a new field named “Active”:
Let’s pre-fill the Active field:
<form_url>?prefill_Active=true
A date field can accept a date and time in the following formats and will use the date format of the field to parse the date:
// Standards
ISO_8601
// General formats
'YYYY-MM-DD',
'YYYY-MM-DD hh:mm A',
'YYYY-MM-DD HH:mm',
// EU
'DD/MM/YYYY',
'DD/MM/YYYY hh:mm A',
'DD/MM/YYYY HH:mm'
// US
'MM/DD/YYYY',
'MM/DD/YYYY hh:mm A',
'MM/DD/YYYY HH:mm'
Let’s pre-fill the Deadline field:
<form_url>?prefill_Deadline=2024-09-30
Now let’s pre-fill more than one field. To avoid any collision with other query parameters, we will:
&
) between the fieldprefill
?prefill_<field_name>=<value>&prefill_<field_name>=<value>
Let’s pre-fill the Category and Priority form fields at once:
<form_url>?prefill_Priority=3&prefill_Category=Enterprise
Now, let’s pre-fill a field that we do not want the respondent to edit, such as user data, internal ID, or a support ticket number.
If you don’t want to give respondents access to edit all other table data, Baserow allows you to pre-fill the field with the data, and then hide that field. Prefix the query parameter with hide_
, to avoid collision with other query parameters: ?hide_<field_name>
?hide_Name?hide_Full+Name
To hide the Feature ID field, we would write the following:
<form_url>?hide_Feature ID=ENG103
This hides every field that’s indicated. The hidden form field will not be shown to the respondent. However, the pre-filled value will still be entered into the row when the form is submitted.
Do not pre-fill values that may violate privacy or compliance policies. The pre-filled value will appear in the URL generated for the pre-filled form. When the form respondent clicks on the URL, the pre-filled value will appear in their browser’s address bar. If they delete the encoded URL components from the address bar, the hidden form fields will appear in the form.
In this tutorial, we learned how to pre-fill text fields, manage multi-select fields, and hide specific form fields. All of this can be achieved by adding parameters to the form’s URL. This simplifies data collection and improves its effectiveness. It reduces user effort, which in turn results in less errors, more form submissions, and a better user experience for all.
The following articles may also be helpful:
If you have any questions while following this tutorial, feel free to ask for help in the Baserow community.