Come aggiungere l'autocompletamento per i campi indirizzo in WordPress

Hai mai perso un cliente perché il tuo modulo WordPress era troppo lungo o frustrante da compilare? Succede continuamente. Un acquirente è pronto ad acquistare, ma poi si blocca a digitare un lungo indirizzo, specialmente su un dispositivo mobile.

Un piccolo errore di battitura può significare una consegna fallita e, in molti casi, il cliente si arrende prima di finire.

Ecco perché l'autocompletamento dell'indirizzo è così utile. Suggerisce l'indirizzo corretto non appena gli utenti iniziano a digitare, rendendo il processo più veloce, più facile e meno propenso a causare errori. Il risultato sono clienti più felici e meno vendite perse.

Inoltre, è facile da configurare. In questa guida, ti mostrerò come aggiungere l'autocompletamento dell'indirizzo ai tuoi moduli WordPress passo dopo passo utilizzando WPForms e il suo componente aggiuntivo Geolocation.

Perché aggiungere campi indirizzo con autocompletamento in WordPress?

Aggiungere l'autocompletamento dell'indirizzo al tuo sito WordPress è un modo semplice per migliorare l'esperienza utente del tuo sito web. In un negozio eCommerce, ad esempio, aiuta i clienti a inserire il proprio indirizzo più velocemente ed evitare errori di battitura.

Ecco come funziona: mentre gli acquirenti digitano, compaiono suggerimenti di indirizzi, estratti da Google Places/Maps. Questo permette loro di scegliere semplicemente quello giusto e il modulo si compila automaticamente.

Ciò riduce gli errori e velocizza il checkout. E checkout più veloci e accurati aumentano le vendite e rendono più probabile che gli acquirenti tornino.

Oltre ai negozi online, l'autocompletamento degli indirizzi aiuta a ridurre gli errori nelle registrazioni e nei moduli di prenotazione. Inoltre, rende molto più semplice la compilazione di qualsiasi tipo di modulo, specialmente da dispositivi mobili.

Ora che comprendi i vantaggi dell'aggiunta di campi indirizzo con autocompletamento in WordPress, ti mostrerò come farlo, passo dopo passo.

Ecco una rapida panoramica di tutti i passaggi che tratterò in questo articolo:

• Passaggio 1: Genera una chiave API di Google Places
• Passaggio 2: Installa il plugin WPForms e l'add-on Geolocation
• Passaggio 3: Abilita l'autocompletamento degli indirizzi nei tuoi moduli WordPress
• Passaggio 4: Crea un modulo con autocompletamento degli indirizzi
• Passaggio 5: Incorpora il tuo modulo WordPress con autocompletamento degli indirizzi
• Suggerimento bonus: Monitora e riduci l'abbandono dei moduli in WordPress
• Domande frequenti sull'autocompletamento dei campi indirizzo nei moduli WordPress
• Altre guide per l'utilizzo dei moduli WordPress

Pronto? Iniziamo.

Passaggio 1: Genera una chiave API di Google Places

Per connettere WPForms con Google Maps e abilitare la funzione di autocompletamento degli indirizzi, avrai bisogno di una chiave API di Google Places. Seguiamo il processo.

Per ottenere la tua chiave, dovrai accedere alla Piattaforma Google Maps, gestita all'interno della Google Cloud Console. La console può sembrare un po' complessa, ma non preoccuparti: ti guiderò attraverso i passaggi esatti di cui hai bisogno.

Innanzitutto, facciamo clic su 'Crea progetto'.

Nella schermata successiva, dovrai dare un nome al tuo nuovo progetto. Ti consiglio di utilizzare un nome che ti aiuti a identificarlo facilmente in seguito.

Quindi, se hai un'organizzazione a cui vuoi connetterti, puoi fare clic sul link 'Sfoglia' per visualizzare un menu a discesa di opzioni. In alternativa, puoi selezionare 'Nessuna organizzazione'.

Una volta che tutto sembra a posto, puoi premere il pulsante 'Crea'.

Nella schermata successiva, procedi e apri la scheda 'Libreria'.

Da lì, dovrai attivare tre API specifiche. Pensale come una squadra che lavora insieme:

• API Places: Questo è il giocatore di punta che fornisce i suggerimenti di completamento automatico dell'indirizzo mentre digiti.
• API JavaScript Maps: Questa ti consente di visualizzare una vista mappa dell'indirizzo selezionato direttamente sul tuo modulo (che è una funzionalità interessante e opzionale).
• API Geocoding: Questa funziona dietro le quinte per convertire gli indirizzi in coordinate della mappa.

Il modo più semplice per trovarli è usare la barra di ricerca: cerca, seleziona l'API e fai clic su 'Abilita'. Ripeti questa operazione finché tutte e tre le API non saranno attive.

Una volta fatto, genererai una chiave univoca che il tuo sito utilizzerà per comunicare con le API di Google.

Quindi, anche se hai abilitato tre diverse API, non hai bisogno di tre chiavi separate. Una singola chiave API può dare al tuo sito accesso a tutte, a patto che imposti le giuste restrizioni.

Per fare ciò, puoi passare alla scheda 'Credenziali'. Quindi, puoi fare clic su Crea credenziali » Chiave API.

Questo aprirà un pannello per la configurazione della chiave API.

Sotto 'Restrizioni dell'applicazione', seleziona 'Siti web' in modo che la chiave funzioni solo sul tuo sito web.

Questo aprirà l'opzione di configurazione 'Restrizioni del sito web'.

Qui, puoi semplicemente inserire il tuo nome di dominio e fare clic su 'Fatto'.

Dopodiché, puoi continuare alla sezione 'Restrizioni API'.

Abilitiamo prima l'opzione 'Restringi chiave'.

Quindi, nel menu a discesa 'Seleziona API', dovrai selezionare le tre API che hai appena abilitato e fare clic su 'Ok'.

Questo limiterà l'accesso della chiave solo a quelle API.

Dopo aver salvato le modifiche, vedrai la tua chiave API univoca.

Copiala pure: ti servirà nel passaggio successivo quando la collegherai a WPForms.

Passaggio 2: Installa il plugin WPForms e l'add-on Geolocation

Per questo tutorial, utilizzeremo WPForms, che è il miglior costruttore di moduli di contatto per WordPress. Viene fornito con un potente componente aggiuntivo Geolocation che rende l'aggiunta dell'autocompletamento dell'indirizzo incredibilmente semplice.

Su WPBeginner, utilizziamo WPForms per visualizzare il nostro modulo di contatto e gestire i nostri sondaggi annuali sui lettori. Consulta la nostra recensione completa di WPForms per ulteriori approfondimenti sul plugin.

La prima cosa da fare è registrarsi per un account WPForms. Sul loro sito web, fai clic su 'Ottieni WPForms Ora' per iniziare.

Puoi quindi selezionare un piano e procedere con il processo di checkout.

Una volta registrato, dovrai installare e attivare il plugin WPForms.

Dalla tua area di amministrazione di WordPress, naviga semplicemente su Plugin » Aggiungi Nuovo Plugin.

Dopodiché, puoi utilizzare la funzione di ricerca per trovare il plugin WPForms.

Nei risultati della ricerca, fai clic su 'Installa Ora' e quindi fai clic sul pulsante 'Attiva' quando appare.

Se hai bisogno di aiuto, puoi seguire la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, dovrai verificare la tua chiave di licenza.

Per iniziare, vai su WPForms » Impostazioni, inserisci la tua chiave di licenza nel campo fornito e fai clic sul pulsante 'Verifica chiave'. Puoi trovare la tua chiave di licenza nel tuo account WPForms.

Fatto ciò, puoi andare su WPForms » Addons dal pannello di amministrazione di WordPress per installare l'addon Geolocation.

Nella schermata successiva, scorri le opzioni (o usa la barra di ricerca) e fai clic su 'Installa Addon' per l'addon Geolocation.

WPForms installerà e attiverà automaticamente l'addon nel giro di pochi istanti.

Passaggio 3: Abilita l'autocompletamento degli indirizzi nei tuoi moduli WordPress

Ora che hai la tua chiave API univoca e il componente aggiuntivo Geolocation, è ora di abilitare il completamento automatico degli indirizzi nel tuo modulo WordPress.

Vai su WPForms » Impostazioni dalla tua dashboard di WordPress. Quindi, passa alla scheda 'Geolocation' in alto.

Qui troverai alcune opzioni che puoi regolare:

• Provider Luoghi – Per questa guida, selezioneremo 'Google Places'.
• Chiave API – Incolla la chiave API univoca che hai generato nel Passaggio 1. Questo abiliterà il completamento automatico degli indirizzi e visualizzerà Google Maps all'interno dei tuoi moduli.
• Posizione Corrente – Attiva questa opzione per popolare automaticamente le posizioni degli utenti nei tuoi moduli.

Non dimenticare di fare clic su 'Salva Impostazioni' in fondo a questo pannello.

Successivamente, devi solo abilitare il completamento automatico sul modulo in cui desideri utilizzarlo. Puoi modificare un modulo esistente o crearne uno nuovo.

Passaggio 4: Crea un modulo con autocompletamento degli indirizzi

A questo punto, hai collegato WPForms con Google Maps. In questo passaggio, creeremo un modulo con un campo Indirizzo.

Per iniziare, vai su WPForms » Aggiungi Nuovo dalla tua area di amministrazione di WordPress.

Nella schermata successiva, puoi procedere e dare un nome al tuo modulo.

Vorrai utilizzare un nome chiaro e descrittivo in modo che sia più facile da organizzare man mano che crei più moduli.

Dopodiché, sceglierai come vuoi costruire il tuo modulo: utilizzando una tela bianca, un modello predefinito o un generatore di moduli AI.

Se desideri utilizzare il generatore di moduli basato sull'intelligenza artificiale, tutto ciò che devi fare è inserire un semplice prompt. WPForms AI genererà quindi il modulo per te in pochi secondi.

Per questo tutorial, tuttavia, utilizzerò un modello pronto all'uso.

WPForms offre oltre 2.000 modelli di moduli, rendendo facile trovarne uno quasi perfetto per il tuo obiettivo.

Una volta trovato un buon modello da usare come base, passaci sopra il mouse e fai clic sul pulsante ‘Usa modello’. Qui, userò il modello Modulo di contatto semplice.

Questo aprirà il generatore di moduli drag-and-drop.

Successivamente, trascina il campo ‘Indirizzo’ dal pannello di sinistra e rilascialo nel tuo modulo (se non è già presente).

Una volta che il campo ‘Indirizzo’ è al suo posto, puoi fare clic su di esso per aprire il pannello ‘Opzioni campo’.

Qui, puoi regolare l'etichetta del campo, aggiungere una descrizione del campo o scegliere uno schema di indirizzo diverso: USA o internazionale.

Una volta personalizzate le impostazioni generali, puoi passare alla scheda ‘Avanzate’.

Quindi, scorri il pannello fino a trovare l'opzione ‘Abilita completamento automatico indirizzo’. Procedi e attivala.

Questo consentirà agli utenti di compilare rapidamente il proprio indirizzo completo, inclusi città, stato e codice postale, direttamente nel tuo modulo WordPress.

L'attivazione di questa funzionalità aprirà le opzioni ‘Mostra mappa’. Attivala semplicemente per aggiungere la mappa al tuo campo ‘Indirizzo’.

Quindi, puoi scegliere di mostrare la mappa sopra o sotto il campo nel tuo modulo.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva’ in alto per applicare le modifiche.

Da qui, puoi personalizzare le tue notifiche e conferme. Per maggiori dettagli, consulta la nostra guida su come creare un modulo di contatto.

Passaggio 5: Incorpora il tuo modulo WordPress con autocompletamento degli indirizzi

Ora sei pronto per aggiungere il tuo modulo al tuo sito WordPress.

Per iniziare, fai clic sul pulsante 'Incorpora' nella parte superiore del generatore di moduli.

Apparirà un popup in cui potrai aggiungere il modulo a una pagina esistente o crearne una nuova.

Per questo tutorial, sceglierò ‘Seleziona pagina esistente.’

Nel popup successivo, puoi procedere e scegliere una pagina dal menu a discesa.

Quindi, fai clic su ‘Andiamo!’ per continuare.

WPForms ti reindirizzerà all'editor a blocchi di WordPress.

Qui, fai clic sull'icona ‘+’ e aggiungi il blocco WPForms.

Quindi, seleziona il tuo modulo dal menu a discesa.

WPForms lo caricherà automaticamente nell'editor di contenuti.

Nel pannello di destra, puoi regolare le ‘Impostazioni modulo.’

Ad esempio, potresti voler visualizzare il titolo o la descrizione del modulo per fornire ai visitatori un maggiore contesto.

Puoi anche personalizzare il tuo modulo per adattarlo meglio al tema del tuo sito. E una volta soddisfatto del design, premi semplicemente il pulsante ‘Salva.’

Fatto! Ora puoi visitare la tua pagina modulo e provare a digitare un indirizzo.

Il campo indirizzo mostrerà automaticamente suggerimenti da Google Maps, consentendo agli utenti di compilare il proprio indirizzo con un solo clic.

Hai aggiunto con successo la funzionalità di completamento automatico degli indirizzi di Google ai tuoi moduli.

Gli utenti potranno compilare automaticamente il tuo modulo, sia che stiano completando un acquisto nel tuo negozio WooCommerce sia che stiano completando una registrazione per la registrazione utente.

Ecco come potrebbe apparire una volta che gli utenti selezionano un suggerimento di indirizzo con completamento automatico:

Suggerimento bonus: Monitora e riduci l'abbandono dei moduli in WordPress

L'abbandono del modulo si verifica quando le persone lasciano un modulo senza inviarlo, spesso a causa di una scarsa esperienza utente.

Ridurre l'abbandono dei moduli è importante perché può danneggiare la crescita della tua lista email, le tue vendite e-commerce e il successo generale dell'attività.

Gli studi dimostrano che oltre il 77% degli acquirenti online non completa i propri moduli di checkout, il che significa perdere molti soldi a causa di vendite incomplete.

Tracciando e migliorando i moduli che le persone abbandonano spesso, puoi ridurre queste perdite di entrate.

Sebbene l'autocompletamento possa aiutare, ci sono ancora altri fattori che possono contribuire all'abbandono dei moduli:

• Campi opzionali resi obbligatori: Costringere le persone a compilare informazioni non essenziali può essere davvero fastidioso.
• Istruzioni poco chiare: Campi del modulo confusi o vaghi possono far desistere le persone.
• Non ottimizzato per dispositivi mobili: I moduli difficili da usare sui dispositivi mobili possono essere un grosso deterrente.
• Problemi tecnici: Problemi come il malfunzionamento del modulo o tempi di caricamento lenti possono impedire alle persone di completarlo.

Per maggiori dettagli, puoi leggere la nostra guida su come monitorare e ridurre l'abbandono dei moduli in WordPress.

Domande frequenti sull'autocompletamento dei campi indirizzo nei moduli WordPress

Come funziona l'autocompletamento degli indirizzi?

Il tuo modulo si collega a un servizio di localizzazione come Google Places o Mapbox. Mentre gli utenti digitano, mostra suggerimenti di indirizzi corrispondenti. Quando ne scelgono uno, i campi (via, città, CAP, ecc.) si compilano automaticamente.

Funzionerà con il mio tema WordPress?

Di solito, sì. L'autocompletamento funziona con la maggior parte dei temi WordPress moderni, ma a volte script personalizzati o temi pesantemente modificati possono causare conflitti.

Quali plugin WordPress supportano l'autocompletamento degli indirizzi?

Diversi plugin per moduli offrono questa funzionalità, solitamente tramite componenti aggiuntivi o integrazioni. WPForms con il componente aggiuntivo Geolocation è una delle migliori opzioni.

Cosa succede se i suggerimenti non vengono visualizzati?

Alcune cause comuni includono una chiave API mancante o errata, errori JavaScript o conflitti di tema, e restrizioni API (come impostazioni di dominio errate).

Altre guide per l'utilizzo dei moduli WordPress

Spero che questo articolo ti abbia aiutato a imparare come aggiungere l'autocompletamento per i campi indirizzo in WordPress.

Se l'hai trovato utile, potresti anche voler vedere le nostre altre guide utili su:

• Come creare moduli WordPress con campi a discesa
• Come creare moduli multilingue in WordPress
• Come tracciare il percorso dell'utente sui moduli di lead di WordPress
• Suggerimenti degli esperti per creare moduli più interattivi e aumentare le conversioni
• Modi per utilizzare la logica condizionale nei moduli WordPress (Casi d'uso principali)
• Come creare un modulo Airtable personalizzato in WordPress
• Guida definitiva all'uso dei moduli WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.