Formulaire

Ajouter un champ adresse avec autocomplétion dans Webflow grâce à l'API Google Maps

outils :
Illustration croce

Sommaire

Pourquoi ajouter un champ adresse avec autocomplétion ?

Amélioration de l'Expérience Utilisateur

  • Facilité d'Utilisation : L'autocomplétion peut aider les utilisateurs à trouver et entrer leurs adresses plus rapidement et plus facilement.
  • Réduction des Erreurs : Elle peut réduire le risque d'erreur en suggérant des adresses valides.

Précision des Données

  • Normalisation : Les adresses saisies sont souvent normalisées selon un format standard, ce qui garantit la précision des données.
  • Validation : Elle permet de valider les adresses en temps réel, garantissant ainsi l'exactitude des informations reçues.

Efficacité

  • Gain de Temps : Cela réduit le temps que les utilisateurs passent à remplir les formulaires, ce qui est particulièrement utile sur les appareils mobiles où la saisie de texte peut être difficile.
  • Réduction de la Friction : Elle permet de minimiser les étapes nécessaires pour compléter un formulaire, réduisant ainsi les abandons de panier ou d'inscription.

Autant de facteurs vous permettant d'augmenter la conversion de votre formulaire et de fiabiliser vos données.

Voici comment faire !

Tutoriel pour ajouter un champ adresse mono field avec autocomplétion dans Webflow

1. Créez un compte Google Cloud Console et accédez à Google Maps Plateform

Suivez le lien suivant pour vous y rendre !

Vous devriez voir afficher une modale avec votre clé API (cf screen ci dessous)

Copier votre clé API afin de l'avoir à porter de main, vous en aurez besoin pour les étapes suivantes.

2. Ajoutez l'ID "address-input" à votre input dans Webflow

3. Ajoutez ce code personnalisé dans votre page ou dans un embed dans votre formulaire

Veillez à bien ajouter votre clé API à la place de {API key} dans le premier et second code ci-dessous.

 <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. Publiez et testez le résultat

C'est pas plus compliqué que ça.

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Avoir un "radio button" selectionné par defaut dans Webflow

Webflow
Embed
Formulaire

Ajouter un border color à un input lorsqu'il est renseigné dans Webflow

Webflow
Embed
Formulaire
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps