Wouldn’t it be awesome if you knew your visitor’s city, state, and country without even asking for it? You could use this information to reduce the complexity of your web forms while retaining the ability to market to specific regions. Thanks to Google’s free geolocation service and a pinch of JavaScript, this is possible!
Edit your web form in Infusionsoft. Add an Address field to your form with City, State, and Country. Make sure these fields are not required.
Add the following to an HTML snippet if you are using the Billing address:
<script src="https://www.google.com/jsapi"></script>
<script>
/**
* Free script provided by Novak Solutions
* https://novaksolutions.com/tips/get-your-visitors-city-and-state-without-even-asking-for-it/
*/
jQuery(document).ready(function(){
jQuery('#inf_field_City').parent().parent().hide();
jQuery('#inf_field_State').parent().parent().hide();
jQuery('#inf_field_Country').parent().parent().hide();
jQuery('label[for=inf_field_City]').parent().parent().hide();
jQuery('label[for=inf_field_State]').parent().parent().hide();
jQuery('label[for=inf_field_Country]').parent().parent().hide();
if(
google.loader.ClientLocation &&
!jQuery('#inf_field_City').val() &&
!jQuery('#inf_field_State').val()
) {
jQuery('#inf_field_City').val(google.loader.ClientLocation.address.city);
jQuery('#inf_field_State').val(google.loader.ClientLocation.address.region);
switch(google.loader.ClientLocation.address.country_code) {
case 'AU':
jQuery('#inf_field_Country').val('Australia');
break;
case 'BR':
jQuery('#inf_field_Country').val('Brazil');
break;
case 'CA':
jQuery('#inf_field_Country').val('Canada');
break;
case 'IN':
jQuery('#inf_field_Country').val('India');
break;
case 'UK':
jQuery('#inf_field_Country').val('United Kingdom');
break;
case 'US':
jQuery('#inf_field_Country').val('United States');
break;
}
}
});
</script>
If you want to use the Optional address (recommended if you really want to make sure you don’t overwrite an address the customer entered themselves), use this code in an HTML snippet:
<script src="https://www.google.com/jsapi"></script>
<script>
/**
* Free script provided by Novak Solutions
* https://novaksolutions.com/tips/get-your-visitors-city-and-state-without-even-asking-for-it/
*/
jQuery(document).ready(function(){
jQuery('#inf_field_City3').parent().parent().hide();
jQuery('#inf_field_State3').parent().parent().hide();
jQuery('#inf_field_Country3').parent().parent().hide();
jQuery('label[for=inf_field_City3]').parent().parent().hide();
jQuery('label[for=inf_field_State3]').parent().parent().hide();
jQuery('label[for=inf_field_Country3]').parent().parent().hide();
if(
google.loader.ClientLocation &&
!jQuery('#inf_field_City3').val() &&
!jQuery('#inf_field_State3').val()
) {
jQuery('#inf_field_City3').val(google.loader.ClientLocation.address.city);
jQuery('#inf_field_State3').val(google.loader.ClientLocation.address.region);
switch(google.loader.ClientLocation.address.country_code) {
case 'AU':
jQuery('#inf_field_Country3').val('Australia');
break;
case 'BR':
jQuery('#inf_field_Country3').val('Brazil');
break;
case 'CA':
jQuery('#inf_field_Country3').val('Canada');
break;
case 'IN':
jQuery('#inf_field_Country3').val('India');
break;
case 'UK':
jQuery('#inf_field_Country3').val('United Kingdom');
break;
case 'US':
jQuery('#inf_field_Country3').val('United States');
break;
}
}
});
</script>
Your address fields will automatically be hidden by the code so your visitor won’t see them. This code will populate the address fields only if they aren’t already filled in. When your visitor submits the form, the hidden address fields will be saved to their contact record.
The country selection only works for Australia, Brazil, Canada, India, United Kingdom, and the United States. If you are marketing to a different region, you can easily add more countries to the code.
tried the hosted form and tried to put it on my website. Fields are empty in both cases…
Too bad, this could be very useful
Can you provide a link to your form that isn’t working? This code is working in our production and sandbox apps, so it may just be a minor configuration issue.
here it is:
https://vz190.infusionsoft.com/app/form/f654965955580e445691eb76a0590b9b
Looks like it is working for me… My city, state, and country is being populated in the fields at the URL you provided. Perhaps you have a browser extension that is blocking the code from running?
I tried another Browser but still doesn`t work.
I live in Europe, so I edited the script like this:
case ‘DE’:
jQuery(‘#inf_field_Country3’).val(‘Germany’);
break;
case ‘CH’:
jQuery(‘#inf_field_Country3’).val(‘Switzerland’);
break;
case ‘AT’:
jQuery(‘#inf_field_Country3’).val(‘Austria’);
break;
did I screw something up?
That looks fine. The code relies on Google to provide the location. It’s possible that the Google code can’t get the city/state/country for your location, or it may not be allowed to based on the laws of your country.
thats possible… we are a little bit paranoid over here in europe
It also relies on the accuracy of the IP address databases in each country. From our experience using GeoIP, only the US seems to be accurate to a city level, although we often get accurate state results, and certainly ‘country’ at the very least.
It is a different scenario when using the “current location” feature on a mobile device as it uses GPS instead of IP address.. much more accurate.
It did not work for me either (USA). It hid the fields but did not populate them in the contacts record. I used Optional Address as recommended.
I’d be happy to take a look if you can provide a link to the form that isn’t working.
The form is located on the following page:
http://www.presidenttuxedo.com/win-six-free.php
Hmm… I went to your page and it populated my address correctly. The code isn’t perfect and doesn’t work for every location. It’s possible that your location isn’t in Google’s database.
Thanks for checking that for me Jacob. I’m sure it is probably soemthing to do with google not recognizing our location. Great tool though, and I’m sure we’ll get lotsa use out of it! Thanks again!
Not working for this form… https://gm252.infusionsoft.com/app/form/default-campaign-form17 can you check on this Jacob?
I set it up on this page (https://ffp1.infusionsoft.com/app/form/2076d7d5817fe5852f32985c8c93f66b), but it’s not working.
Any help would be appreciated.
Thanks
The code snippet hides everything I tried embedding a form to our website using un-styled html code using the code snippet and it hides everything the form is not showing up if I remove the code the form shows up again. I don’t what I am missing here but I have followed what you instructed up top. So far its not working for Us