# 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:**

```perl
https://eazyform.app/form/mfs-jYr6HDcK?name=Nate+Smith&email=natesmith@gmail.com
```

In this example:

* `name` is the key, and `Nate Smith` is the value.
* `email` is another key, and `natesmith@gmail.com` 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:**

```arduino
https://eazyform.app/form/mfs-jYr6HDcK?interests=sports&interests=music
```

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:

| Character | Description                         | URL Encoded Value |
| --------- | ----------------------------------- | ----------------- |
| (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](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).

## Sharing the form with URL parameters

### Getting the form URL

Get the form URL by clicking the *Share* button and copying the *Shareable link*:

<figure><img src="/files/IWvVX7a9RVypqN8bSNJ2" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

### Getting the form field URL parameter name

To get the form field URL parameter name:

1. Open the field settings by clicking the field in the form.
2. Click the copy button to copy the URL parameter name to the clipboard.

<figure><img src="/files/T4I8XmtiL51UcsE1HS1A" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

### 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](https://gist.github.com/brandonjp/ac259099ba95868c4826fc0f58f9e7b4). 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` and `1`.
* **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:<br>

  <figure><img src="/files/lb6hiNMCjFejwxWLiMz6" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

### Testing the form with URL parameters

Load the form with URL parameters in a browser and make sure everything works.

<figure><img src="/files/G1kwXC4ayqklBzcz9zht" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

## 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:

```
CONCATENATE( "https://eazyform.app/form/mfs-jYr6HDcK?name=", 
SUBSTITUTE({Name}, " ", "+"), "&email=", {Email} )
```

Note that since *Name* can include spaces, the formula will substitute spaces with plus signs in the Name, as described [here](#handling-spaces-in-url-parameters).

Clicking the form link in the formula column will open the form with the dynamic pre-filled values.

<figure><img src="/files/simUXlv4lVAhTGp3gZdP" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

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):

{% code overflow="wrap" %}

```
SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( {YourColumnName}, " ", "+" ), """", "%22" ), "<", "%3C" ), ">", "%3E" ), "#", "%23" ), "%", "%25" ), "{", "%7B" ), "}", "%7D" ), "|", "%7C" ), "", "%5C" ), "^", "%5E" ), "~", "%7E" ), "[", "%5B" ), "]", "%5D" ), "'", "%27" ) ) )
```

{% endcode %}

{% hint style="info" %}
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.
{% endhint %}

## 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:

<figure><img src="/files/ZzFFjSfk5qJMMibHorRH" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

## 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:

```
<script>
    // Your dynamic value - replace this with your actual dynamic value
    var myParamValue = "natesmith@gmail.com";

    // Select the EasyForm iframe
    var iframe = document.querySelector('.eazyform-embed');

    // Modify the src attribute to include the dynamic parameter
    var src = iframe.getAttribute('src');
    src += "&email__1=" + encodeURIComponent(myParamValue);
    iframe.setAttribute('src', src);
</script>

```

## Hiding field when URL Param is provided

You can dynamically hide fields on the form, depending on whether a URL param value was provided.&#x20;

<figure><img src="/files/JENA2z3URlC616XryP34" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

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.

<figure><img src="/files/KmfYg19jIVmDQu3e20t1" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

## Make field read-only if URL param provided

This feature allows you to pre-set form values and display those values as read-only.

<figure><img src="/files/gQn6eOoOvg0ZvBQCuSow" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

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.&#x20;

<figure><img src="/files/zWsUXxxZJw7RnBZwMagZ" alt=""><figcaption><p>Click to view in full screen</p></figcaption></figure>

## 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](https://calendly.com/easyform).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.easyappshq.com/easyform/url-parameters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
