Why add an address field with autocomplete? Improving the User Experience Ease of Use: Autocomplete can help users find and enter addresses more quickly and easily. Error reduction: It can reduce the risk of error by suggesting valid addresses.Data Accuracy Normalization: The addresses entered are often standardized in a standard format, which ensures the accuracy of the data.Validation: It allows addresses to be validated in real time, thus guaranteeing the accuracy of the information received.Effectiveness Time saving: This reduces the time users spend completing forms, which is especially useful on mobile devices where entering text can be difficult.Friction reduction: It minimizes the steps required to complete a form, thus reducing cart abandonment or registration.These are all factors that allow you to increase the conversion of your form and to make your data more reliable.
Here's how to do it!
Tutorial to add a mono field address field with autocompletion in Webflow
1. Create a Google Cloud Console account and access the Google Maps Platform Follow The following link to get there!
You should see a modal with your API key displayed (see screen below)
Copy your API key to have it handy, you will need it for the next steps.
2. Add the “address-input” ID to your input in Webflow
3. Add this custom code in your page or in an embed in your form Be sure to add your API key in place of {API key} in the first and second code below.
<script src="https://maps.googleapis.com/maps/api/js?key={API key}&libraries=places&callback=initMap" async defer></script>
<script>
"use strict";
function initMap() {
const CONFIGURATION = {
"mapOptions": {"center":{"lat":37.4221,"lng":-122.0841},"fullscreenControl":true,"mapTypeControl":false,"streetViewControl":true,"zoom":11,"zoomControl":true,"maxZoom":22,"mapId":""},
"mapsApiKey": "{API key}",
"capabilities": {"addressAutocompleteControl":true,"mapDisplayControl":false,"ctaControl":false}
};
const addressInput = document.getElementById('address-input');
const autocomplete = new google.maps.places.Autocomplete(addressInput, {
fields: ["address_components", "geometry", "name"],
types: ["address"],
});
autocomplete.addListener('place_changed', function () {
const place = autocomplete.getPlace();
if (!place.geometry) {
window.alert('Aucun détail disponible pour: \'' + place.name + '\'');
return;
}
fillInAddress(place);
});
function fillInAddress(place) {
const addressNameFormat = {
'street_number': 'short_name',
'route': 'long_name',
'locality': 'long_name',
'administrative_area_level_1': 'short_name',
'country': 'long_name',
'postal_code': 'short_name',
};
let completeAddress = "";
function getAddressComp(type) {
for (const component of place.address_components) {
if (component.types[0] === type) {
return component[addressNameFormat[type]];
}
}
return '';
}
completeAddress += getAddressComp('street_number') + ' ' + getAddressComp('route') + ', ';
completeAddress += getAddressComp('locality') + ', ';
completeAddress += getAddressComp('administrative_area_level_1') + ' ';
completeAddress += getAddressComp('postal_code') + ', ';
completeAddress += getAddressComp('country');
addressInput.value = completeAddress;
}
}
</script>
4. Publish and test the result It doesn't get any more complicated than that.
