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
13 comment(s)
David Owens-Hill
Have we decided that this doesn't work anymore? That's a shame -- it was a great solution!
Jenna Molby
to David Owens-Hill
Hi David, I just tested it a couple weeks ago and it worked. If you're having trouble implementing it, send me an email at [email protected] and I can investigate. Cheers, Jenna
Meghan
Hi Jenna! We added this to a test form but it doesn't appear to be working. I know this post was from last year, is there something more than just copying and pasting that we should be doing? This could be a game changer for us :)
Jenna Molby
to Meghan
Hi Meghan, Sorry it's not working for you. Feel free to shoot me an email at [email protected] with the link to your form and I can take a look :)
Ed Bisquera
Great explanation, I tried this in Active Campaign and it worked similarly to the Pardot implementation. Question though: How do you increase the Google API call limit per day? Can that easily be integrated, to get some kind of API Developer limit increase or something?
Jenna Molby
to Ed Bisquera
Hi Ed, You have to pay to increase your API call limit, however, the limit is quite high, so it's probably not necessary. Users with an API key are allowed 1 000 requests per 24 hour period. Users who have also verified their identity through the APIs console are allowed 100 000 requests per 24 hour period. Hope that helps!
Shannon M
Hi Jenna, This is a great way to get the information many business development teams need, without making it hard on user experience. Would you be able to share a live link or demo of the form in action?
Jenna Molby
to Shannon M
Hi Shannon, Here's a link to the demo form: http://codepen.io/jennamolby/pen/ozxzWZ. Let me know if you have any questions.
Jesse Kedy
Awesomely useful post! Can this be done with Marketo forms too?
Jenna Molby
to Jesse Kedy
Hi Jesse, I haven't tried it myself, but this looks like a good solution for implementing the Google Places API with Marketo forms: http://codepen.io/figureone/pen/GJVpNx