combine_images.png

Reduce Form Abandonment with Google MAP API

Anonymous
Not applicable

Form abandonment is often viewed as a fact of life. Many would even say it's a good indicator of customers' readiness to "convert." In this blog post we’ll tackle one common reason for form abandonment--too many fields.

There are many reasons why users don't complete a form, one measurable truth is : the more fields you have, the more friction you add.

So, what’s the optimal number of fields a form should have? The simple answer is-- the must-haves.

Here’s a good example of a form requirement:

1. Email Address

2. Phone number

3. Street address

4. City

5. State

5. Country

7. Postal Code

As you can see, there are 7 fields to complete. So, how can we reduce the number of fields we present but still get the information we need?

One solution is to leverage Google Maps API.

Evaluate the following examples side by side:

combine_images.png

On both pages we have a call to action. However, the left form will result in a 3-10 percent higher conversion rate.

To achieve the above solution we are going to leverage Marketo form 2.0 with Google Maps API to create a single auto complete address field and then auto populate the data we need to Marketo.

So let's get started.

First, create a new form in Marketo, with  3 visible and 4 hidden fields. One of the visible fields will leverage Google address suggest API. After a user selects the address, all 4 hidden fields are populated with the required data.

Step 1: Create a new form in Marketo:

Screen Shot 2016-03-01 at 4.37.09 PM.png

Note that Google maps auto-complete only supports window.HTMLInputElement (INPUT tag). Therefore, text area is not supported.

Step 2:  Next, grab the form embed code

Screen Shot 2016-03-01 at 4.47.14 PM.png

It looks similar to this:

<script src="//app-sj15.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1014"></form>

<script>MktoForms2.loadForm("//app-sj15.marketo.com", "343-RRE-559", 1014);</script>

Step 3: To get an API key from Google, follow these instructions ​​. Once completed, you’ll have an API key like this:

AIZaSybF1RmsRtcYGDoRe2tITKNJ9NJEwGn3uhK

Step 4: Now, let's work on the Marketo form 2.0 JavaScript to add the new functionality.

This is how the end result looks like on the landing page:

<script src="//app-sj15.marketo.com/js/forms2/js/forms2.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIZaSybF1RmsRtcYGDoRe2tITKNJ9NJEwGn3uhK&libraries=places"></script>

<form id="mktoForm_1014"></form>

  <script>

  MktoForms2.loadForm("//app-sj15.marketo.com", "343-RRE-559", 1014,function(form) {

   //Locate the field to trigger the auto-compleat

  var location = document.getElementById('Address');

  //Pass Google the field

  var autocomplete = new google.maps.places.Autocomplete(location);

  //Trigger the callback function

  autocomplete.addListener('place_changed', function() {

      var place = autocomplete.getPlace();

      //Populate Marketo hidden fields

     form.vals({"streetAddress":place.address_components[0]['long_name']+' '+place.address_components[1]['long_name'],

        "City":place.address_components[3]['long_name'],

        "Country":place.address_components[5]['short_name'],

        "State": place.address_components[4]['short_name'],

        "postalCode":place.address_components[7]['long_name']});

      });

  });

</script>

Here’s the final result. A visitor uses the address suggest to select his location, after selected, the information populates to the hidden fields and submitted to Marketo.

You get the accurate information with fewer fields = less friction for the visitor means more

test1.gif

1467
6
6 Comments
SanfordWhiteman
Level 10 - Community Moderator

Hi Moris,

I posted a demo of this integration nearly a year ago which I think deserves a h/t.

Note that Google maps auto-complete only supports window.HTMLInputElement (INPUT tag). Therefore, text area is not supported.

If you're talking about the console error with textarea elements, it can be ignored and the autocomplete still functions, IIRC.

Also:

  • Your JS has a race condition. You can't load a script async defer and assume it will be ready when you want.  You need to create an actual event chain.
  • You're expecting the address_components to have a common set of properties.  This isn't the case, so your code breaks depending on the entry chosen from the autocomplete.
Anonymous
Not applicable

Hi Sanford,

That's a great post, it most definitely deserves a h/t !

You are correct, the text area error doesn't break functionality (currently), but can be easily avoided w/ a minor type change.

In an attempt to improve performance I used async non-blocking. As you correctly pointed out, async order of execution is explicitly not guaranteed.

Thank you for your input, it's greatly appreciated. I'll revise my code to better control JS load sequence.

SanfordWhiteman
Level 10 - Community Moderator

In an attempt to improve performance I used async non-blocking. As you correctly pointed out, async order of execution is explicitly not guaranteed.

Thank you for your input, it's greatly appreciated. I'll revise my code to better control JS load sequence.

Thanks, that would be good because otherwise people will experience seemingly "random" breakage.

Robb_Barrett
Level 10

Very cool.  Can you give some metrics on how this improved your conversion rates?

Anonymous
Not applicable

Thank you Robb,

From an internal study done by Marketo (2015), reducing the number of fields as shown above will result in ~3.4% higher conversion rate. If you look at external studies, the numbers may be higher.

Anonymous
Not applicable

Hi Moris,

Where Should I paste the <Script> code whether in LP meta tags section or with "Form > Embed Code" section. Am getting weird output using the above where I don't see the form at all or it loads 2 forms in LP. please advise.

Here is my page: http://qliktest.qlik.com/Vinu-Test1_Google_Map_testing.html

Best,

Vinu