Improve Pardot Form Conversions by Using Google Places

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.

<script src="https://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>

$('#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.