How to Pre-Fill Webflow Forms with URL Parameters Using Finsweet

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to prefill form fields and text elements from URL parameters with Finsweet Attributes Query Params.

Understand the use case

Query Params reads URL parameters (for example: ?first-name=Jean&email=jean@example.com) and automatically injects them into the matching form fields or text elements. Super useful for multi-step conversion funnels, personalized emails with prefilled links, or landing pages with UTM data.

1. Add the script in the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-queryparams@1/queryparams.js" defer>script>

2. Mark the fields you want to prefill

On each form input you want to prefill, add fs-queryparams-element="[parameter-name]". For example, to prefill an email field from the URL ?email=jean@example.com, add fs-queryparams-element="email" to the email input.

3. Prefill text elements

You can also inject URL values into Text Blocks or Headings. Just add fs-queryparams-element="[parameter-name]" to any text element. Handy for personalizing a landing page title with the visitor's company name: ?company=Gemeos → <h1>Welcome to Gemeos</h1>.

4. Set default values

If a parameter might be missing from the URL, add fs-queryparams-default="Your first name" to show a fallback value. Essential for publicly displayed text elements.

Conclusion

Query Params personalizes the user experience using URL data. Use cases:

• Prefilled forms from personalized nurturing emails
• Landing pages with the visitor's company name in the title
• Multi-step funnels that pass data from one page to the next