How to Pre-Fill a Webflow Form from URL Parameters and UTM Tags

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to automatically prefill Webflow form fields from UTM parameters or URL parameters.

Example

Use cases

This script is especially useful for multi-step conversion funnels: you pass data from one page to the next through the URL, and each form gets prefilled automatically. It also works well for personalized email campaigns: a link with ?prenom=Jean&entreprise=Acme opens a form that's already partially filled in, which reduces friction.

1. Set up your fields in Webflow

For each field you want to prefill, add a custom name attribute or an id that matches the URL parameters. For example, on the Email field, add name="email". On the First name field, add id="prefill-prenom".

2. Hide the UTM fields (optional)

For the UTM fields you want to send with the form without showing them to the user, create input type="hidden" fields in an Embed. The script will fill them in and send them with the submission.

3. Add the script in Footer code

Customize the mapping based on the parameters you use in your URLs.

(function() {
  var params = new URLSearchParams(window.location.search);
  var mapping = {
    'utm_source':   'input[name="utm-source"], #utm-source',
    'utm_medium':   'input[name="utm-medium"], #utm-medium',
    'utm_campaign': 'input[name="utm-campaign"], #utm-campaign',
    'utm_content':  'input[name="utm-content"], #utm-content',
    'utm_term':     'input[name="utm-term"], #utm-term',
    'prenom':       'input[name="prenom"], #prefill-prenom',
    'email':        'input[name="email"], #prefill-email',
    'entreprise':   'input[name="entreprise"], #prefill-entreprise',
  };

  Object.keys(mapping).forEach(function(param) {
    var value = params.get(param);
    if (!value) return;
    document.querySelectorAll(mapping[param]).forEach(function(el) {
      el.value = value;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    });
  });
})();

Conclusion

Prefilling from UTMs reduces friction and improves form completion rates. Use cases:

• Nurture emails with a link to a prefilled demo form
• LinkedIn Ads campaigns with prefilled first names and companies
• Multi-step funnels that pass data between pages

UTM parameters detected in the current URL

No UTM parameters in the current URL. Add ?prenom=Jean&utm_source=linkedin to the URL to test it.