Address autocompletion on donation forms?

Gaby Gollub

Does anyone use a service on your donation forms to autocomplete donors' addresses? Or a service to populate the city and state based on zip code? I'd love to know how it's working for you.


Thanks very much,

Gaby


--------------------------------------

Gaby Gollub

Manager, Online Marketing

World Wildlife Fund


 

Philip Nawrocki

Noah Cooper‍ has something for the zipcode to populate the city/state. He presented it at a BBCon a few years ago. We implemented it:
https://secure3.convio.net/cmf/site/SPageServer?pagename=donate_main

Brian Mucha‍ will have more info on it. We used google maps to do this but had to change to mapquest.


Thanks,


Phil

Brian Mucha

I built a little JQuery plugin to handle this a couple of years ago.


My first one used Google Geocoding. We've since changed it (Thanks, Wilson Acosta) to use MapQuest instead, but they are pretty similar. You need a Google Dev account for one, and a MapQuest API Key for the other. (Add your MapQuest API key to the defaults in the JS file or pass it in the init.)


I've attached both versions.


Here's that same link Phil posted, but with uncompressed scripts so you can see it working. https://secure3.convio.net/cmf/site/SPageServer?pagename=donate_main&s_debug=true


Aside from the plugin itself, the key part is the init.


            // Initialize Zip Code Geocoding

            $('#postcard_details').geocoding({

                'selectorZip': '#tribute_notify_address_zip',

                'selectorCity': '#tribute_notify_address_city',

                'selectorState': '#tribute_notify_address_state',

                'selectorCountry': '#tribute_notify_address_country',

                'callback': function() { $('#postcard_details .row.location').removeClass('hidden'); $('#postcard_details .row.location .col-4').animate({backgroundColor: '#FFFF00'}, 'fast').animate({backgroundColor: '#FFFFFF'}, 'slow'); }

            });


The basic functionality just does an API call when the zip code field changes, and populates the city, state and country with what gets returned. It then fires the optional callback function.


Here you can see we use that callback to unhide the address fields and flash them in yellow to draw attention to that data. It's pretty accurate in general, but errors do happen - especially with non-us postal codes.



BPM

Gaby Gollub

Thanks for this information! Did you see an increase in the conversion rate where this was added? Or other benefits?


Thanks for your insights,

Gaby

Brian Mucha

We rolled it out with a bunch of other features, so we never tested it on its own.


To me the big benefit is being able to initially hide those three fields. Its the same logic behind collapsing sections like Tribute until needed. No one likes a ten foot tall form.


I don't have a real number, but the idea is that each field on a form costs you X conversions due to abandonment. The less perceived effort for the donor the better.

Gaby Gollub

Thanks for letting me know. Presenting a shorter form definitely sounds like a better option. 


Thanks much,

Gaby