Comment optimiser le formulaire d'adresse ?

La réponse courte

Pour optimiser le formulaire d’adresse :

1. Autocomplétion avec Google Places
2. Un seul champ adresse (pas numéro + rue séparés)
3. Détection automatique du pays et de la ville

Pourquoi c’est important

• 25% des utilisateurs abandonnent s’ils doivent re-saisir leur adresse
• Le formulaire d’adresse est souvent le plus long du checkout
• Les erreurs de saisie causent des problèmes de livraison

Optimisations essentielles

1. Autocomplétion d’adresse

Utilisez Google Places Autocomplete :

const autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('adresse'),
  {
    types: ['address'],
    componentRestrictions: { country: 'fr' }
  }
);

autocomplete.addListener('place_changed', () => {
  const place = autocomplete.getPlace();
  // Remplit automatiquement les autres champs
  document.getElementById('ville').value = getCity(place);
  document.getElementById('cp').value = getPostalCode(place);
});

Impact : -50% de temps de saisie, -80% d’erreurs

2. Un seul champ d’adresse

❌ Avant (3 champs)

N° : [____]
Rue : [________________________]
Complément : [________________]

✅ Après (1 champ)

Adresse : [12 rue de la Paix, Apt 5]

L’autocomplétion gère le reste.

3. Pré-remplissage intelligent

Champ	Méthode
Pays	Géolocalisation IP
Ville	Déduite du code postal
Code postal	Suggéré par l’adresse

4. Format adapté au pays

// France
Code postal : [_____]
Ville : [___________]

// États-Unis
City : [___________]
State : [▼]
ZIP Code : [_____]

Structure de formulaire optimisée

┌─────────────────────────────────────┐
│  Adresse de livraison               │
│                                     │
│  Adresse *                          │
│  [Commencez à taper...         🔍]  │ ← Autocomplétion
│                                     │
│  Complément (optionnel)             │
│  [Apt, étage, code porte...]        │
│                                     │
│  Code postal *    Ville *           │
│  [75001    ]      [Paris      ]     │ ← Auto-rempli
│                                     │
│  Pays *                             │
│  [France ▼]                         │ ← Pré-sélectionné
│                                     │
│  Téléphone (pour le transporteur)   │
│  [+33 ___________]                  │ ← Clavier numérique
└─────────────────────────────────────┘

Bonnes pratiques UX

Labels clairs

• ✅ “Adresse de livraison”
• ✅ “Code postal”
• ❌ “Adresse 1”, “Adresse 2”

Placeholders utiles

Adresse : "12 rue de la Paix"
Complément : "Bâtiment B, 3ème étage, code 1234"

Validation en temps réel

.input-valid {
  border-color: #28a745;
}

.input-error {
  border-color: #dc3545;
}

Avec message :

❌ Ce code postal ne correspond pas à la ville sélectionnée

Clavier adapté sur mobile

<input type="tel" inputmode="numeric" name="codepostal">
<input type="tel" inputmode="tel" name="telephone">

Erreurs courantes

1. Champs séparés numéro/rue : Inutile et confus
2. Région obligatoire : Peut être déduite du CP
3. Pas d’autocomplétion : Saisie manuelle longue
4. Validation bloquante : Empêche les adresses atypiques
5. Pays par défaut : États-Unis : Pour un site français

Cas particuliers

Adresses atypiques

Permettez toujours la saisie manuelle en plus de l’autocomplétion :

• Nouvelles rues (pas encore sur Google Maps)
• Lieux-dits
• Boîtes postales

Adresse de facturation

☑ Utiliser la même adresse pour la facturation

Par défaut coché = un formulaire en moins.

International

• Adaptez le format selon le pays sélectionné
• Traduisez les labels
• Ajustez les validations (codes postaux, etc.)

Outils recommandés

Outil	Usage
Google Places API	Autocomplétion adresses
La Poste API	Validation codes postaux FR
SmartyStreets	Vérification internationale
Algolia Places	Alternative à Google