URL auto fill special fields in forms

Feature requests
,
1

enhance the URL functionality to automatically populate special fields like dates, phone numbers, and multiple-choice selections, as it currently only supports auto-filling text fields.

2

Hey @shaharWeaver

We just officially launched URL Parameters in our monday form builder Easyform, check out our community post here.

3

Hello,

To enhance the URL functionality for automatically populating special fields like dates, phone numbers, and multiple-choice selections, you’ll want to implement a system that can recognize and parse specific query parameters in the URL. Here’s a general approach you can take:

Step 1: Define URL Structure
Establish a clear structure for your URL parameters. For example: https://example.com/form?date=YYYY-MM-DD&phone=1234567890&option=choice1
Step 2: Parse URL Parameters
In your front-end JavaScript, write a function to parse the URL and extract parameters: function getQueryParams() {
const params = new URLSearchParams(window.location.search);
return {
date: params.get(‘date’),
phone: params.get(‘phone’),
option: params.get(‘option’),
};
}
Step 3: Populate Fields
Once you’ve extracted the parameters, you can populate the relevant fields. For example: document.addEventListener(‘DOMContentLoaded’, () => {
const params = getQueryParams();

// Populate date field
if (params.date) {
    document.querySelector('input[type="date"]').value = params.date;
}

// Populate phone number field
if (params.phone) {
    document.querySelector('input[type="tel"]').value = params.phone;
}

// Populate multiple-choice selection
if (params.option) {
    const selectElement = document.querySelector('select');
    if (selectElement) {
        selectElement.value = params.option;
    }
}

});
Step 4: Handle Multiple Choices
If you want to support multiple selections, you can modify the URL to include a list: https://example.com/form?options=choice1,choice2 Then split the values in your script: if (params.options) {
const optionsArray = params.options.split(‘,’);
optionsArray.forEach(option => {
const checkbox = document.querySelector(input[type="checkbox"][value="${option}"]);
if (checkbox) {
checkbox.checked = true;
}
});
}
Step 5: Testing and Validation
Make sure to thoroughly test your implementation to handle various input scenarios, such as:

Missing parameters
Incorrect formats (e.g., invalid dates)
Handling of default values for each field

Hope that helps!