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

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.

L'agence Webflow Gemeos vous montre 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.

4. Publiez et testez le résultat

C'est pas plus compliqué que ça.