How to pass a Subscriber Email Address to a Form using URL Parameters

TLDR; It’s easy to pre-populate the email field in a form using a few lines of Javascript. This method should work with any ESP that allows you to embed a subscriber email address as a URL parameter in a link.

By passing the email address in a URL, you can pre-populate the email field (even hide it altogether) and make surveys or feedback forms completely frictionless for existing subscribers.

You can use this to tag & segment existing subscribers extremely effectively, a feature usually reserved for pricey paid services like rightmessage.

What we’re building (demo above)

Above, you’ll find an example form that can pre-populate the email field from the query parameter in the URL.

Try it Yourself: Click the button to reload the page with a query string. You’ll note the form will be filled with the email shown in the URL. You can change the email address is in the URL, hit enter (to load the new URL) and note the form is filled with whatever email address to entered.

Why prepopulate a form?

I’ve been using Convertkit to grow my email list and engage my audience. One of my favorite Convertkit features is its robust automation system and subscriber tagging.

And I wanted to leverage this automation to let subscribers self-direct their content journey. They can fill out a short form or quiz and I’ll direct them to the customized email sequences. It’s a win-win. Except for one problem:

Convertkit (and many other ESP’s) don’t have a built-in way to recognize existing subscribers when they fill out a form. This causes two problems:

1. Duplicate Subscribers: They may use a different email to complete the 2nd form, defeating the purpose and bloating your list.
2. Abandonment: Seeing an empty email field, they may abandon the form altogether.

And I’m not alone in wanting this. I found several threads in the Convertkit forum asking for a solution to this problem.

Why I want to do it

Surveying your list is incredibly valuable. Not only can you get an amazing insights about your audience, it’s also a fantastic segmentation opportunity.

For example, with just a few questions, I can find exactly where each subscriber is in their journey and meet them with the right content at the right moment.

Example Questions:

1. How long have you been building websites?
   • Total Beginner
   • 1 year or less
   • 2 – 5 years
   • More than 5 years
2. Who do you want to build websites for?
   • Myself
   • Clients
3. What type of website(s) are you building?
   • Blog / Affiliate
   • E-commerce
   • Business
   • Personal

It’s easy to imagine how different the needs of each person will be, based on their answers. And with these insights I can help them achieve their goals faster and more effectively.

Existing Solutions

The only pre-built solution I’ve found (that integrates with Converkit anyway) is RightMessage.

RightMessage is a full-featured personalization platform that is amazingly powerful. Pat Flynn of Smart Passive Income uses RightMessage for this exact purpose, to segment his list. But he also uses it to personalize content on his website, gather user feedback, and more.

And while I think the product is fantastic, it’s also overkill. And pretty darn expensive if I’m being honest.

Typeform is also capable of this (on paid plans) if you use custom fields to grab the URL parameter. It would definitely work for me, but it costs nearly as much as my email list for what is in all honesty a pretty simple product.

My Solution: Javascript Snippet

I’m an amateur developer at best but this script was easy enough to put together.

Here’s what it does:

1. Check if the page is loaded
2. Pull the query string from the URL
3. Find the ‘Subscriber’ parameter and store the value (email address) in a variable
4. Fill the form’s email field with that email address

Easy Peezy!

The Code

function fillFormEmail(){
  
  const input = document.getElementById('id');  // replace 'id' with id of email field
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);  //parse the query string
  const email = urlParams.get('subscriber');  // Store the parsed email address in variable
  
   input.value = email;  // fill the form with the email address
}

if (document.readyState === 'loading') {  // Loading hasn't finished yet
  document.addEventListener('DOMContentLoaded', fillFormEmail)
} 
else {  // `DOMContentLoaded` has already fired
  fillFormEmail();
}Code language: JavaScript (javascript)

Usage Instructions

There are two things you have to do to make this code work for you:

1. Add the id of your email form input in the line document.getElementById(‘id’);
2. Construct your link URL property (to pass the email)

Get the ID of your form field

1. Using Chrome or Firefox, you can right-click the email field and choose ‘inspect’.
2. Then find the the element <input type=”email” id=”some-id”> and note the text in the id attribute.
3. Edit the javascript and replace ‘id’ with the id of your form (as shown below).

Pass the subscriber email as a URL Parameter

The exact instructions will vary depending on which email provider you use, but here’s the basic URL format to use:

https://yoursite.com/[email protected]

So all you have to do is add that last part, starting with the question mark.

Instructions for Convertkit

When you link to the form in your email, simply add this text string to the end of your url:

?subscriber={{ subscriber.email_address }}

That’s it. That shortcode will programmatically be replaced with the email address for each subscriber when your newsletter goes out.