It’s a fact that shorter forms have a higher conversion rate, but in B2B marketing longer forms are needed to capture essential information for lead scoring and lead routing. In this tutorial, I will show you how to use the Google Places API to auto-fill city, state/province, country and postal code/zip code within your Pardot forms. Don’t worry, you don’t need to know how to code to implement this, you just need to know how to copy & paste.
Demo
Once the user starts typing in their company name, the Google Places API returns a list of company names that match. The user can click on their company name which fills out the city, state/province, country and postal code/zip code.
You can choose to make the geographic fields hidden and Google Places will populate the hidden fields, but given that Google Places might not be able to find the company, it’s best keep the fields visible so the user can enter the correct information.
How to add Google Places to your Pardot form
Add the fields
Add the standard Pardot fields for company, city, state, country and postal code to your form. The company field is required to do the look up, but you can choose to omit any of the geographic fields based on your requirements and it will not affect the functionality of the form.
Add the auto-fill code
Under Look & Feel in your form, select the below form tab and click the HTML icon.
Copy & paste this code into the editor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places"></script> <script type="text/javascript"> $('#Companypi_Company').attr("placeholder", ""); google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('Companypi_Company')); google.maps.event.addListener(places, 'place_changed', function () { var place = places.getPlace(); $('.city input').val(place.address_components[3]['long_name']); $('.zip input').val(place.address_components[7]['long_name']); $('.country option').each(function(){ if($(this).text() == place.address_components[6]['long_name']){ $(this).prop('selected', true).trigger('change'); } }); $('.state option').each(function(){ if($(this).text() == place.address_components[5]['long_name'] ){ $(this).prop('selected', true).trigger('change'); } }); $('#Companypi_Company').val(place.name); }); }); </script> |
Note: This is just a basic example of using the Google Places API to pre-fill Pardot form fields. You can also pre-fill street address, company phone number, and website address. If you’re interested in populating this information contact me.
That’s it!
You can test the auto-fill functionality by viewing a landing page that contains the form, or simply by previewing the form.
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
Hi Jenna
Does this still work? It’s a great solution!
Hi Ayrielle, Yes, the solution still works, but Google Place now charges for access to the API. When this article was written, the API was free for use. Cheers, Jenna
This post hasn’t been updated with latest information. Google now want us to use an API key in order to utilize the service. earlier it was free but now you need to generate API key using below URL
https://console.developers.google.com/apis/library
Can you enter a zip/postcode and it pre-populate the address fields Jenna? (p.s. love your work!)
Thanks, Clare! Yes, you could do it the reverse way, but you would need to update the JavaScript.
I just emailed! I hope we can get it sorted — this would be great!