How can I auto-fill form values in Webflow based on the URL querystring?

To auto-fill form values in Webflow using data from the URL query string, you need to extract query parameters and map them to form fields.

​

1. Understand URL Query Strings

• URL query strings allow you to pass data to a website through parameters in the URL.
• They follow a ? and contain key-value pairs separated by &, such as ?name=John&email=john@example.com.

​

2. Access Custom Code Settings

• Go to Project Settings in Webflow.
• Navigate to the Custom Code tab.

​

3. Add Custom JavaScript

• In the "Before </body> tag" section, add a script to extract query parameters.
• Use URLSearchParams to loop through key-value pairs:

​

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  urlParams.forEach(function(value, key) {
    const inputElement = document.querySelector(`[name="${key}"]`);
    if (inputElement) {
      inputElement.value = value;
    }
  });
});

​

4. Publish and Test

• Publish your Webflow site to apply changes.
• Test by visiting your form page with a query string, e.g., /form-page?name=John&email=john@example.com.
• Verify that the form fields are pre-filled with the correct values.

​

Summary

To auto-fill Webflow form values using URL query strings, add custom JavaScript to extract and apply query parameters to corresponding form fields.