Why Prepopulate Form Values?

Prepopulating form fields with known values can help increase conversion rates by making it easier for subscribers to submit information. This technique is especially useful for subscription management forms and referral forms.

The values and which fields they belong to will be passed in via the query part of the URL. The field names are the same as the id values of the HTML input elements, which you can see in the embedded form HTML.

<form action="https://www.getdrip.com/forms/527434357/submissions" method="post" data-drip-embedded-form="527434357">
  <h3 data-drip-attribute="headline">Referral Form</h3>
  <div data-drip-attribute="description"></div>
    <div>
        <label for="drip-email">Email Address</label><br />
        <input type="email" id="drip-email" name="fields[email]" value="" />
    </div>
    <div>
        <label for="drip-referrer-email">Referrer Email</label><br />
        <input type="text" id="drip-referrer-email" name="fields[referrer_email]" value="" />
    </div>
  <div>
    <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" />
  </div>
</form>

In this example the form field to be prepopulated is "drip-referrer-email", so an example URL to prepopulate that field with the email address ref@lcfermi.com would look like this:

https://www.lcfermi.com/referrer-form?drip-referrer-email=ref@lcfermi.com

Next, a small bit of javascript code needs to be added after the form in order to take the URL parameters and put them in the form fields. Add the following code snippet below the form code.

<script type="application/javascript">
(new URL(window.location.href)).searchParams.forEach((field_value, field_id) =>
    document.getElementById(field_id).value = field_value)
</script>

You can continue to customize the form however you like, just make sure that the form field ids match the names you provide in the URL.