Pre-filling form fields with URL parameters
EasyForm now supports the ability to pre-fill form fields using URL parameters. This feature can be especially useful when you want to streamline the user experience by providing default values or when you need to pass specific data into a form dynamically.
What are URL parameters?
URL parameters are a way to pass information to a web page through the URL. They appear after the question mark (?
) in the URL and are typically used to send data from one web page to another or to customize the content of a web page based on certain inputs.
A URL parameter consists of a key-value pair, where the key is the name of the parameter and the value is the data you want to pass. Multiple parameters can be included in a URL, separated by an ampersand (&
).
Example of a URL with parameters:
In this example:
name
is the key, andNate Smith
is the value.email
is another key, and[email protected]
is its value.
Handling Spaces in URL Parameters
Since URLs cannot include spaces, when a parameter value contains spaces, you will need to replace each space with a plus sign (+
), as in the example above. Web pages such as EasyForm will change plus signs back to spaces when processing the URL.
Passing Multiple Values for the Same Parameter
For multiple select form fields, you may need to pass multiple values for the same parameter. This can be done by repeating the parameter with different values in the URL.
Example:
In this example, the interests
parameter is repeated with different values (sports
and music
). In this case, EasyForm will select both options in an Interests multiple select form field.
Dealing with Other Special Characters
In addition to spaces, there are other special characters that cannot be directly used in URL parameters. These characters need to be encoded to ensure that the URL is valid and correctly interpreted. Below are some common special characters and how they should be encoded:
(space)
Space
+
or %20
&
Ampersand
%26
=
Equals sign
%3D
?
Question mark
%3F
/
Forward slash
%2F
#
Hash/Pound sign
%23
%
Percent sign
%25
+
Plus sign (when not used for space)
%2B
@
At symbol
%40
:
Colon
%3A
For a full list of special characters and how they should be encoded in URLs, visit this page.
Sharing the form with URL parameters
Getting the form URL
Get the form URL by clicking the Share button and copying the Shareable link:
Getting the form field URL parameter name
To get the form field URL parameter name:
Open the field settings by clicking the field in the form.
Click the copy button to copy the URL parameter name to the clipboard.
Supported field types and valid values
All field types other than the Files field are supported. Following is a list of accepted values by field type. For field types other than Phone and Link, if the value is invalid, it is dropped.
Text, Long text - any string
Phone, Link - any string (so that the user can edit it, if it's invalid)
Date - any format accepted by the Moment.js library. See the complete list here. We do recommend sticking to the following format: YYYY-MM-DD, e.g. 2024-08-31.
Numbers - a valid number.
Checkbox - valid values are
true
and1
.Rating - a numeric value ranging from 1 to the monday column's scale setting (i.e. 1 to 3, 4, or 5).
Status - any non-deactivated label in the status field.
Dropdown - any non-deactivated label in the dropdown field.
Country - any country from the monday country column.
Connect Boards - any item from the connected board(s), by item name or item ID. To get the item ID, add an item ID column to a connected board and click on the ID to copy it:
Testing the form with URL parameters
Load the form with URL parameters in a browser and make sure everything works.
Generating personalized pre-filled form URLs using a monday formula column
You can generate personalized pre-filled form URLs using a monday formula column. This allows you to automatically create unique form links for each item in your board, pre-filling specific form fields with data from board columns.
For example, to create a pre-filled Contact us form URL with information from the Name and Email columns in in the Users board, you can use the following formula:
Note that since Name can include spaces, the formula will substitute spaces with plus signs in the Name, as described here.
Clicking the form link in the formula column will open the form with the dynamic pre-filled values.
Once the user fill the form, it will create a new item in the Contact us board with their name and email address.
Dealing with special characters in formula columns
If a parameter value can include special characters other than spaces, we recommend using a more comprehensive SUBSTITIUTE function for the parameter value. Here's a formula snippet that substitutes most common special characters you can use (replace YourColumnName, with the actual column name of for the parameter value):
Formula column values cannot be used in monday's built-in automations. If you want to include this URL in an email sent by an automation, you will need to use an app such as General Caster or .... to accomplish that.
Embedding a form with URL parameters
Copy the embed code and add the URL parameters to the end of the iframe src
attribute. Make sure to leave the embedded
and autoheight
URL parameters intact.
Here's an example of adding a URL parameter to load a form embedded in Wix with the New features checkbox checked:
Using dynamic URL parameters in embedded forms
If you want to load an embedded form with dynamic information from the web page the form is embedded in, you can do it with a JavaScript script block. For example, if the web page "knows" the email address of the user, you can append the following script block to the end of the form embed code:
Hiding field when URL Param is provided
You can dynamically hide fields on the form, depending on whether a URL param value was provided.
A use case for this feature is prefilling forms with user-specific info. If the values exist in the URL params, the user will not see the fields on the form, but if the values do exist, the user can fill them in himself.
Make field read-only if URL param provided
This feature allows you to pre-set form values and display those values as read-only.
A use case for this feature is prefilling forms with user-specific information. If the values exist in the URL parameters, the user will see the fields with their information but cannot edit them. However, if the URL Param values do not exist, users can fill them in themselves.
Getting Help
If you need help with setting up forms with URL parameters or any other help with setting up your monday boards or easyforms, feel free to book a call with us here.
Last updated