#48 - Autocomplete Address Inputs v0.1

Prefill all address inputs using the Google Places API!

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo

Head Code

Place this in your page <head>


<!-- 💙 MEMBERSCRIPT #48 HEAD CODE v0.1 💙 AUTOFILL ADDRESS INPUTS -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&libraries=places&callback=initAutocomplete" async defer> </script>
<style>
.pac-logo::after {
display: none;
}
.pac-container {
border-radius: 5px;
border: 1px solid #ccc;
}
.pac-item {
padding: 0 10px;
}
</style>

Body Code

Place this in your page </body>


<!-- 💙 MEMBERSCRIPT #48 BODY CODE v0.1 💙 AUTOFILL ADDRESS INPUTS -->
<script>
let autocomplete;

function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
    document.querySelector('input[ms-code-input="address"]'),
    {
      componentRestrictions: { country: ['US'] },
      fields: ['address_components'],
      types: ['address']
    }
  );

  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();

    if (place) {
      const addressInput = document.querySelector('input[ms-code-input="address"]');
      const cityInput = document.querySelector('input[ms-code-input="city"]');
      const regionInput = document.querySelector('input[ms-code-input="region"]');
      const countryInput = document.querySelector('input[ms-code-input="country"]');
      const postalCodeInput = document.querySelector('input[ms-code-input="postal-code"]');

      addressInput.value = extractAddress(place);
      cityInput.value = extractCity(place);
      regionInput.value = extractRegion(place);
      countryInput.value = extractCountry(place);
      postalCodeInput.value = extractPostalCode(place);
    }
  });
}

function extractAddress(place) {
  let address = '';
  const streetNumber = extractComponent(place, 'street_number');
  const route = extractComponent(place, 'route');

  if (streetNumber) {
    address += streetNumber + ' ';
  }
  if (route) {
    address += route;
  }

  return address.trim();
}

function extractComponent(place, componentType) {
  for (const component of place.address_components) {
    if (component.types.includes(componentType)) {
      return component.long_name;
    }
  }
  return '';
}

function extractCity(place) {
  for (const component of place.address_components) {
    if (component.types.includes('locality')) {
      return component.long_name;
    }
  }
  return '';
}

function extractRegion(place) {
  for (const component of place.address_components) {
    if (component.types.includes('administrative_area_level_1')) {
      return component.long_name;
    }
  }
  return '';
}

function extractCountry(place) {
  for (const component of place.address_components) {
    if (component.types.includes('country')) {
      return component.long_name;
    }
  }
  return '';
}

function extractPostalCode(place) {
  for (const component of place.address_components) {
    if (component.types.includes('postal_code')) {
      return component.long_name;
    }
  }
  return '';
}
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Build an Auto-fill Address Input on your Webflow Form

Memberscripts needed:

https://www.memberstack.com/scripts/autocomplete-address-inputs

Tutorial:

Cloneable:

https://webflow.com/made-in-webflow/website/address-autocomplete

Why/When would you need to build an auto-fill address input on your Webflow form?

Improve the user experience by saving users time when filling in their addresses with auto-filling fields.

If your users need to fill in their addresses on your site, you can make things a lot quicker and easier for them by auto-filling the address fields.

We’re going to take a look at how you can do just that using the Google Places API. This means you’ll need to have a Google Cloud Console account where you’ll need to have the Google Places API enabled. You’ll then get an API key which we’ll talk about adding to your site a bit later.

The form we’re building will allow users to start typing their addresses and a list will pop up with matching addresses. Once they select their address from the list, the form will auto-fill the rest of the fields.

Building an auto-fill address input in Webflow forms

To add an auto-fill address input to a Webflow form, we’re going to use MemberScript #48 – Autocomplete address inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is build out the form itself and style it however you want.

Next up, select each input field and add the corresponding attribute to it:

ms-code-input=”address”
ms-code-input=”postal-code”
ms-code-input=”city”
ms-code-input=”region”
ms-code-input=”country”

Making it work

Now that you’ve got the form set up, all you need to do is add the MemberScript #48 custom code to your page.

For this MemberScript, we’ve got two pieces of code, one that goes before the closing head tag and another that goes before the closing body tag. Be sure to paste them in the right places!

By default, the custom code that goes in the body of your site will limit the autofill functionality to addresses in the US, and it does this through this line of code:

componentRestrictions: { country: [ ‘US’ ] }

You can either add countries using ISO standard two-letter country codes, or you can delete this line entirely to have it search for matching addresses worldwide.

We also mentioned earlier an API key which you’ll need to add to the custom code that you placed in the head of your site, replacing “YOUR-API-KEY.”

Conclusion

That’s everything, you can now go ahead and test your form’s address autofill functionality.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add an address auto-fill feature to your Webflow form using the Google Places API.

Take me to Script!

Read full documentation

Button Text

Something not working as expected?