How can I prefill a form field with information from the URL in Webflow, specifically for unsubscribes using a passed email, so that the user only needs to click the submit button?

To prefill a form field with information from the URL in Webflow, you can use JavaScript code in combination with query parameters. Specifically for your case of unsubscribes using a passed email, you can follow these steps:

​

1. Add a regular form field to your Webflow form. Give it a unique ID or class name that you can later reference in your JavaScript code.

​

2. Add a query parameter to your unsubscribe URL to pass the email value. For example, if your unsubscribe link is `https://www.example.com/unsubscribe?email=test@example.com`, the query parameter is `?email=test@example.com`.

​

3. Open the page where you have placed your form in the Webflow Designer. Go to the page's Settings panel, and under the Custom Code tab, paste the following JavaScript code:

​

```javascript

<script>

  // Function to get the value of a query parameter from the URL

  function getQueryParameter(param) {

    var urlParams = new URLSearchParams(window.location.search);

    return urlParams.get(param);

  }

​

  // Function to prefill the form field with the email value

  function prefillEmail() {

    var emailField = document.getElementById('your-email-field'); // Replace 'your-email-field' with the actual ID or class name of your form field

​

    var emailValue = getQueryParameter('email');

    if (emailValue) {

      emailField.value = emailValue;

    }

  }

​

  // Call the prefillEmail function when the page has finished loading

  window.addEventListener('load', prefillEmail);

</script>

```

Make sure to replace `'your-email-field'` in the code with the actual ID or class name of the form field where you want to prefill the email.

​

4. Publish your Webflow site, and when a user clicks on an unsubscribe link with the email query parameter, the form field will be automatically filled with the passed email address. The user can then simply click the submit button to complete the unsubscribe process.

​

This JavaScript code uses the `getQueryParameter` function to get the value of the `email` query parameter from the URL. It then assigns the value to the form field specified by its ID or class name using JavaScript's `getElementById` or `document.querySelector` method. The `prefillEmail` function is called when the page finishes loading using the `window.addEventListener` method.