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.