Populate Donor Info with One-Click

Make it even easier for your donors to donate by populating their info in your form automagically. Read the tutorial.

Wouldn’t it be great to give your donors a link in an email that would take them to a donation form with their name and email and a custom amount already pre-filled? Here’s how to do it with Give.

This tutorial and snippet is now compatible with both the Legacy and Multi-Step form templates!

Importance of minimizing the steps to donation

When it comes to your donation page, you want your donors to have to do as few things as possible to send you their donation. One way to do that is to populate as many fields as you can with info that they need in advance.

Typically, the bare minimum of what you want is their first and last name, their email address, the amount they want to donate, and their payment information. The easiest way to get that done is to send your donors a personalized email with a customized “Invite” link.

Imagine how effective your next donation campaign will be if when your donor clicks on a button in an email, it takes them to a form where they only have to fill in payment information and they’re done! That’s what we’re going to do in this tutorial.

Read or Watch

Because this involves a few steps both in WordPress, with code, and in MailChimp we put together a video tutorial as well. Choose your own adventure, watch here, or keep scrolling to read all the details below.

 

What you’ll need for this tutorial:

  • To make this happen you’ll need just a few things:
  • Comfortability adding custom code
  • We’re going to add a custom snippet to your Give forms.
  • Your Email Marketing Platform of Choice
  • This can be MailChimp, Constant Contact, Emma. You could even do this with a MailMerge into Outlook. For this tutorial, we’ll be using MailChimp.

That’s all you need. Once you are comfortable with those two items, this is pretty straight forward.

How Pre-population of Forms Works:

Before we jump into the details, I’ll explain quickly how this works from a technical perspective.

Form fields are made to take input. They can receive that input in a wide variety of ways. The way we’re all comfortable and familiar with is by clicking inside the field and typing it in with our keyboards. But you can also insert data into the fields with Javascript/jQuery. That’s what we’ll be doing.

The only way Javascript can insert the data into the fields is if it can grab it from somewhere. In this case, we’re going to tell Javascript to take the info from the URL of the page. Typically, your URL would be something like this:

https://example.com/donations/my-form/

We can add additional information to that URL and it will still go to the right page. That additional information is called a “Query String.” For example, if we wanted to add a dollar amount to your form URL, we could do it like this:

https://example.com/donations/my-form/?amount=42

It’s that simple. With that in place, the Javascript can grab that dollar amount from the URL and put it into your donation amount field.

In our case though, we’re adding multiple Query Strings. Each string starts with that question mark (?). But when you want multiples, you just add an ampersand to the end and string them together, like so:

https://example.com/donations/give-form/?amount=42&first=Peter&last=Joseph&email=testing@givewp.com

That URL now has the following data that the Javascript can handle:

  • Amount: 42
  • First: Peter
  • Last: Joseph
  • Email: testing@givewp.com

Now that we understand how it works, let’s make it happen.

Implement the String Listener

If you’ve interacted with our Support Team at all, you might have seen us refer to our “Give Snippet Library.” It’s a repository of small snippets that let you make minor customizations to your Give forms or other Give features.

We created a snippet just for this tutorial. You can grab it here.

If you need guidance adding custom PHP snippets to your website, we wrote this guide just for you.

That code does several things at once:

  • It outputs our custom jQuery snippet to the end of ALL your Give Donation forms. It’s possible that you’ll want to add this only to ONE form on your site. Reach out to our Support Team for help on that. But the snippet was also written in a way that it won’t interfere with your other forms at all.
  • The first function simply grabs the query strings from the URL to make it easy for us to use them in the second function.
  • The second function grabs the query string data and outputs it into our Give Form.

There’s several geeky things about that code as well that developers will appreciate, but for now that’s what it does. Once it’s implemented on your site, your Give forms are all prepped to listen for those query strings.

Create dynamic URLS in MailChimp

Now we need to send your donors to that form with that URL filled out with their first and last name and their email address. The best way to do that in MailChimp is with what they call “Merge Tags.”

Here’s a snapshot of a simple Call for Donations Email Campaign that I created in MailChimp.

Here’s a snapshot of a simple Call for Donations Email Campaign that I created in MailChimp.
A simple Call for Donations campaign email built in MailChimp

In this email, I want to make it clear to my donors that we have an urgent need and that certain donation amounts will help achieve certain goals. In this case, I’m saying that:

  • $100 will save ONE tree
  • $250 will save FIVE trees
  • $500 will save a small forest

Your levels will be unique to your campaign, but the point is simply to provide multiple DONATE NOW buttons that empower your donors to choose the commitment that suits them best. You certainly could do just one “Donate Now” button with one amount, but you’ll end up either pricing some donors out of clicking at all if the cost is too high; or limit those who want to give more. Having a range attracts a wider target group of donors who would feel comfortable giving at least one of the amounts that you list.

If you’ve been curating your email list well, you hopefully have both the first and last names of all of your potential donors. While it’s not totally necessary (the script can handle it if the name isn’t there), it makes for a much better experience if you do have their full names.

MailChimp can take the first and last names and the email address of each of the recipients of your list and dynamically insert them anywhere into your email. In this case, we need to insert them directly into the “DONATE NOW” links. It’s actually very easy, here’s the tags you need:

  • *|FNAME|*
  • *|LNAME|*
  • *|EMAIL|*

So we’ll take those tags, then take our URL with the query strings and update it to the following:

https://example.com/donations/give-form/?amount=100&first=*|FNAME|*&last=*|LNAME|*&email=*|EMAIL|*

In the case of my email, I’ll enter that into Web Address field like so:

Web Address Field
Web Address Field

I’ll do the same for the $250 and $500 level buttons and just update their “amount” value in the query string.

Of course, next you want to test these buttons to make sure they work. To do that, make sure you are logged out of your website. Then in MailChimp click on the “Preview & Test > Enter Preview Mode” link at the top. There you’ll see a preview of what your email will look like. But if you hover over the button links, you’ll notice that they show the raw merge tags rather than a complete URL. To show actual merged data, look to the top right and toggle the “Enable live merge tag info” button. Now your buttons should work exactly as expected.

Here’s what it should look like:

It's automagic!
It’s automagic!

Are you ready to try it?

There are so many ways you can leverage query string with Give like this. Taking a little bit extra time on your end to make your donors take less time will definitely pay off in the long run.

About the Author

Share this post

Join Our Newsletter

Get fundraising insights directly in your inbox. Plus a 15% discount off all plans.

  • This field is for validation purposes and should be left unchanged.

Copyright © 2024 Liquid Web, L.L.C.

GiveWP™ is a trademark of Liquid Web, L.L.C.

A Liquid Web Brand

© 2024 All Rights Reserved.