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

You can auto-fill form fields in Webflow using values passed through the URL query string by using custom JavaScript. Here’s how to implement it correctly so fields autopopulate when specific parameters are present in the URL.

1. Build Your Form with Identifiable Field Names

• Create form fields in Webflow using unique Name (not Label) attributes. These should match the query string parameters.
• Example: A field with Name set to firstName will match ?firstName=John.

2. Add Custom JavaScript to Your Page

• Go to Page Settings or Project Settings > Custom Code and paste the following script inside the Before tag section:

<script>  window.addEventListener('DOMContentLoaded', () => {    const params = new URLSearchParams(window.location.search);    params.forEach((value, key) => {      const field = document.querySelector(`[name="${key}"]`);      if (field) field.value = value;    });  });</script>

• This script:
• Waits for the page to load.
• Checks the URL for query parameters.
• Finds matching form fields (by Name attribute).
• Sets the value of the fields accordingly.

3. Test with a URL and Query String

• Visit a URL like:
  https://yourdomain.com/page?firstName=John&email=test@example.com
• The corresponding fields with Name="firstName" and Name="email" will be pre-filled.

4. Use Proper Encoding in URLs

• Ensure query string values are URL-encoded to handle spaces and special characters.
  For example:
  ?firstName=John%20Doe&email=john%40example.com

Summary

To auto-fill form values in Webflow from a URL's query string, give form fields appropriate Name attributes and use a small JavaScript snippet that matches those names to query parameters. This works effectively for simple personalization or lead-tracking use cases.