Come aggiungere il completamento automatico dell'indirizzo a un modulo WordPress (passo dopo passo)

I campi dell'indirizzo sono frustranti. Gli utenti sbagliano a scrivere i nomi delle strade, dimenticano i codici postali, inseriscono indirizzi incompleti o abbandonano del tutto i moduli perché digitare indirizzi completi è noioso.

Il completamento automatico di Google Maps risolve questo problema suggerendo indirizzi completi e validati mentre gli utenti digitano. Dopo aver digitato 3-4 caratteri, gli utenti vedono un menu a discesa di indirizzi reali tra cui scegliere.

Vuoi configurare questo sul tuo modulo per eliminare gli errori di battitura e velocizzare il completamento del modulo? In questa guida, fornirò istruzioni passo passo su come creare un modulo di indirizzo con completamento automatico di Google Maps.

Come Creare un Modulo di Indirizzo con Completamento Automatico di Google Maps?

Con WPForms Pro e il componente aggiuntivo Geolocation, puoi aggiungere il completamento automatico degli indirizzi Google ai tuoi moduli WordPress in pochi minuti. Segui queste istruzioni passo passo per iniziare:

Passaggio 1: Installa il plugin WPForms

La prima cosa che dovrai fare è installare il plugin WPForms, che è un potente costruttore di moduli che semplifica la creazione di moduli di contatto, moduli di registrazione e altro ancora.

Ha oltre 2.100+ modelli di moduli WordPress che puoi utilizzare e viene fornito con strumenti di geolocalizzazione integrati per rendere davvero più semplice la visualizzazione di mappe sui tuoi moduli.

Per aggiungere mappe ai tuoi moduli di contatto, avrai bisogno di WPForms Pro, che include il componente aggiuntivo Geolocation e tutte le funzionalità di mappa che tratteremo in questo tutorial.

Se sei nuovo di WordPress o incontri difficoltà durante il processo di installazione del plugin, puoi consultare la guida passo passo su come installare un plugin WordPress.

Aggiorna subito a WPForms Pro! 🙂

Passaggio 2: Abilita il Componente Aggiuntivo Geolocation

Ora che WPForms Pro è installato, devi attivare il componente aggiuntivo Geolocation. Questo è ciò che alimenta tutte le funzionalità di mappa nei tuoi moduli di contatto.

Per attivare il componente aggiuntivo, vai alla tua bacheca di WordPress e fai clic su WPForms » Addons.

Nella barra di ricerca, digita Geolocation. Quindi fai clic sul pulsante Installa componente aggiuntivo per cambiare il suo stato in Attivo.

Il componente aggiuntivo si installa automaticamente. Non è necessario scaricare file o configurare nulla per ora. Successivamente, lo collegherai a Google Maps.

Passaggio 3: Configura le Impostazioni di Geolocation

Una volta abilitato il componente aggiuntivo Geolocation, devi configurare le sue impostazioni. Per fare ciò, fai clic su WPForms » Impostazioni.

Nella pagina delle impostazioni di WPForms, fai clic su Geolocation dalle schede in alto per accedere alle sue impostazioni.

Qui vedrai diverse opzioni per configurare il componente aggiuntivo Geolocation in base a diverse esigenze e requisiti:

• Provider Luoghi: Hai la possibilità di scegliere quale provider desideri ricevere le tue informazioni di geolocalizzazione. Qui selezioneremo l'API di Google Places come nostro provider di luoghi.

• Posizione Corrente: Abilita questa opzione per consentire la precompilazione della posizione del tuo utente nel modulo.

• API Google Places: Per abilitare la funzione di completamento automatico dell'indirizzo e visualizzare Google Maps all'interno dei tuoi moduli, dovrai generare una chiave API e collegarla a WPForms.

Vediamo il processo completo di generazione di una chiave API.

Genera una chiave API dalla Google Developer Console

Vai alla Google Developer Console e seleziona il progetto dal menu Seleziona un progetto in alto.

Se non hai progetti creati in precedenza, fai clic su Nuovo progetto per crearne uno nuovo.

Una volta creato con successo un nuovo progetto, fai clic su Attiva API e servizi.

Questo aprirà una Libreria API di Google.

Da qui, dovrai abilitare tre API:

1. API Geocoding
2. API Maps JavaScript
3. API Places

Questa libreria API fornisce un'opzione di ricerca semplice; digita il nome dell'API nella casella di ricerca, vai alla tua API e fai clic sul pulsante ATTIVA.

Una volta abilitate tutte le tue API, torna alla dashboard della tua Console Google e naviga nella scheda Credenziali.

Fai clic sul pulsante Crea credenziali in alto e seleziona l'opzione Chiave API.

Si aprirà un popup con una chiave API. Fai clic sull'opzione RESTRINGI CHIAVE nell'angolo in basso a destra del popup.

Si aprirà una nuova pagina, dove dovrai configurare le seguenti impostazioni:

• Restrizioni applicazione: Da qui, puoi selezionare quali siti web, indirizzi IP o applicazioni possono utilizzare la chiave API. Qui dovrai scegliere l'opzione Riferimenti HTTP per consentire l'utilizzo della tua chiave all'interno dei tuoi siti web.

• Restrizioni sito web: Una volta selezionati i Riferimenti HTTP, verrà visualizzata una nuova opzione, restrizioni sito web. Qui devi aggiungere il nome del dominio del tuo sito web per limitare la chiave API all'uso solo da parte dei siti web specificati.

• Restrizioni API: Dopo aver limitato la tua chiave per Applicazione e Sito web, dovrai limitare la tua chiave per API. Per fare ciò, fai clic sull'opzione Restringi chiave.

Si aprirà un menu a discesa con un'opzione per più API. Seleziona le seguenti API dal menu a discesa:

• API Places
• API Maps JavaScript
• API Geocoding

Una volta terminate le selezioni delle API, fai clic sul pulsante Salva per salvare le impostazioni, che ti reindirizzeranno alla pagina Credenziali. Copia la tua chiave dalla pagina e torna alle impostazioni di WPForms.

Nelle impostazioni di WPForms, incolla questo nel campo Chiave API sotto l'API Google Places e fai clic sul pulsante Salva impostazioni.

Le tue impostazioni di geolocalizzazione sono ora configurate. Successivamente, creerai un modulo con l'autocompletamento dell'indirizzo abilitato.

Passaggio 4: Crea il Tuo Modulo di Indirizzo con Completamento Automatico

Con l'addon Geolocation configurato, sei pronto per creare il tuo modulo di contatto. Ci vogliono circa 5 minuti. Vai su WPForms » Aggiungi Nuovo nella tua bacheca di WordPress per aprire il generatore di moduli.

Dai un nome al tuo modulo nel campo Dai un nome al tuo modulo. Qualcosa come "Contattaci" funziona bene. Vedrai alcune opzioni qui. Se vuoi risparmiare tempo, puoi scegliere tra uno qualsiasi dei nostri oltre 2.100 modelli di moduli WordPress.

Ti consiglio di scegliere il Modello di modulo di contatto semplice. Questo ti fornisce un modulo di contatto già pronto con i campi essenziali già aggiunti.

Il modello include un campo Nome, un campo Email e un campo Commento o Messaggio. Puoi personalizzare questi campi, aggiungerne di nuovi o rimuovere quelli che non ti servono.

Ora, ci sono probabilmente alcune altre impostazioni del modulo che potresti voler configurare, come notifiche e conferme. In tal caso, (e lo consiglio vivamente) consulta la nostra guida dettagliata sulla creazione del tuo primo modulo.

Prova il Generatore di Moduli AI di WPForms! :)

Passaggio 5: Aggiungi il Campo Indirizzo al Tuo Modulo

Ora che abbiamo il nostro modulo pronto, dobbiamo solo aggiungere il Campo Indirizzo. Sulla sinistra, trascina il Campo Indirizzo dalla sezione Campi Fantasia e posizionalo sul tuo modulo.

Il campo Indirizzo include già un testo per l'etichetta e la sotto-etichetta per tua comodità. Hai la flessibilità di personalizzare il testo dell'etichetta, selezionare lo schema dell'indirizzo, personalizzare le dimensioni del campo e nascondere etichette e sotto-etichette.

Ora attiverai la funzionalità di completamento automatico per il tuo campo Indirizzo. Questa è una semplice opzione che collega il campo alla tua API Google Places.

Fai clic sul campo Indirizzo nel tuo modulo, quindi fai clic sulla scheda Avanzate nelle impostazioni del campo a sinistra.

Scorri verso il basso finché non vedi l'opzione Abilita completamento automatico indirizzo. Attiva questa impostazione per abilitare il completamento automatico dell'indirizzo nel tuo modulo.

Consentire questa opzione aprirà un'altra funzionalità: Mostra mappa. Se desideri visualizzare una mappa nel tuo modulo di contatto, attiva anche questa opzione.

Utilizza il menu a discesa per specificare se desideri che la mappa appaia sopra o sotto i sotto-campi dell'indirizzo.

Fai clic sul pulsante Salva in alto. Ora che il tuo modulo di indirizzo con completamento automatico è pronto, è ora di aggiungerlo al tuo sito web.

Passaggio 6: Pubblica il tuo modulo di indirizzo con completamento automatico di Google Maps

WPForms ti consente di aggiungere il tuo modulo in più posizioni, incluse pagine, post del blog e persino widget della barra laterale del tuo sito web.

Prima di incorporare il tuo modulo in una pagina, se lo desideri, puoi verificare come apparirà il tuo modulo nella pagina live. Per visualizzare in anteprima il tuo modulo, fai clic sul pulsante Anteprima in alto.

Se sei soddisfatto del tuo modulo di indirizzo con completamento automatico di Google Maps, sei pronto per aggiungerlo alla tua pagina. Fai clic sull'icona "+" e aggiungi il blocco WPForms dall'editor dei blocchi.

Quindi, seleziona il tuo modulo dal menu a discesa nel blocco. In questo caso, selezionerò il Modulo di completamento automatico indirizzo che ho appena creato seguendo i passaggi precedenti.

Dopodiché, tutto ciò che devi fare è pubblicare la pagina e il tuo modulo sarà online e pronto per accettare le richieste. Ecco come appare il campo Indirizzo con la mappa interattiva su una pagina pubblicata. Non è fantastico?

Ottimo lavoro! Hai creato con successo un modulo di indirizzo con completamento automatico di Google Maps. Dai un'occhiata a questa guida per maggiori dettagli su Indirizzo Riga 1 e 2.

FAQ su Come Creare un Modulo di Indirizzo con Completamento Automatico Google Maps

Il modulo di indirizzo con completamento automatico è un argomento di interesse popolare tra i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:

Cos'è un indirizzo con completamento automatico in un modulo?

L'indirizzo con completamento automatico è una funzionalità che suggerisce indirizzi completi e validati mentre gli utenti digitano in un campo del modulo. Dopo aver inserito 3-4 caratteri, appare un menu a discesa con gli indirizzi corrispondenti dal database di Google.

Gli utenti selezionano il proprio indirizzo invece di digitare manualmente ogni campo. Questo elimina errori di battitura, velocizza il completamento (soprattutto su dispositivi mobili) e garantisce che gli indirizzi siano accurati e consegnabili.

Come aggiungo un indirizzo con completamento automatico al mio modulo WordPress?

Installa WPForms Pro o superiore, attiva il componente aggiuntivo Geolocation, genera una chiave API gratuita di Google Places da Google Cloud Console, incolla la chiave API in WPForms » Impostazioni » Geolocation.

Dopodiché, tutto ciò che devi fare è creare un modulo, aggiungere un campo Indirizzo e attivare "Abilita completamento automatico indirizzi" nelle impostazioni Avanzate del campo.

La configurazione completa richiede 20-30 minuti ed è trattata passo dopo passo in questa guida. Una volta configurato, il completamento automatico funziona su qualsiasi modulo con un campo Indirizzo.

Il completamento automatico degli indirizzi di WPForms funziona con Google Maps?

Sì, WPForms utilizza l'API Google Places per il completamento automatico degli indirizzi, che è la stessa tecnologia che alimenta la ricerca di indirizzi di Google Maps.

È necessario abilitare tre API di Google (Places API, Maps JavaScript API e Geocoding API) per la piena funzionalità.

WPForms può anche visualizzare una mappa interattiva di Google sul tuo modulo che mostra la posizione dell'indirizzo selezionato, attivala nelle impostazioni Avanzate del campo Indirizzo sotto "Visualizza mappa".

Il completamento automatico degli indirizzi di Google Maps è gratuito?

Google fornisce 28.000 richieste gratuite di completamento automatico degli indirizzi al mese. Dopodiché, paghi $ 2,83 per 1.000 richieste. La maggior parte dei siti Web di piccole e medie dimensioni rimane all'interno del livello gratuito.

Una "richiesta" conta ogni volta che un utente digita nel tuo campo indirizzo e compaiono suggerimenti (non per ogni pressione di tasto, ma per sessione di ricerca). Monitora l'utilizzo nella tua Google Cloud Console.

Se superi frequentemente i limiti, considera l'aggiornamento del tuo piano Google Cloud o la restrizione del completamento automatico solo ai moduli essenziali.

Qual è la differenza tra Google Places API e Mapbox per il completamento automatico?

Google Places API offre una copertura di indirizzi mondiale più completa (oltre 200 paesi) e una migliore convalida degli indirizzi, ma ha un livello gratuito di 28.000 al mese.

Mapbox ha richieste illimitate gratuite di completamento automatico ma dati di indirizzo meno dettagliati nelle aree rurali e in alcune regioni internazionali.

WPForms supporta entrambi. Scegli Google Places per l'accuratezza o Mapbox per l'utilizzo illimitato. Puoi cambiare provider in WPForms » Impostazioni » Geolocation senza ricostruire i tuoi moduli.

Posso usare il completamento automatico degli indirizzi sui moduli di checkout di WooCommerce?

Il completamento automatico degli indirizzi di WPForms funziona solo sui moduli creati con WPForms, non sul checkout nativo di WooCommerce. Tuttavia, puoi creare un modulo di checkout personalizzato utilizzando WPForms con integrazione di pagamento e completamento automatico degli indirizzi.

In alternativa, installa un plugin di completamento automatico degli indirizzi specifico per WooCommerce che si integra direttamente con i campi di checkout di WooCommerce.

Se hai bisogno specificamente dell'integrazione con WooCommerce, controlla la directory dei plugin di WooCommerce per plugin "completamento automatico indirizzi" o "Google Places" progettati per il checkout.

Qual è il miglior plugin di Google Maps per WordPress?

WPForms Pro è uno dei migliori plugin di mappe per WordPress. Include un potente componente aggiuntivo Geolocation che viene fornito con una funzionalità di completamento automatico degli indirizzi predefinita che funziona con Google Maps o Mapbox.

Questa funzionalità individua automaticamente e suggerisce automaticamente le posizioni dei tuoi utenti mentre compilano e digitano i loro indirizzi.

Inoltre, con il componente aggiuntivo Geolocation, puoi aggiungere una mappa al tuo modulo di contatto WordPress e consentire ai tuoi utenti di aggiungere una posizione regolando il segnaposto sulla mappa.

Cosa succede al mio modulo se supero il livello gratuito di Google?

Se superi 28.000 richieste di completamento automatico al mese, Google addebiterà il tuo account Cloud (se la fatturazione è abilitata) o smetterà di fornire suggerimenti di completamento automatico (se la fatturazione non è abilitata).

Il tuo modulo continua a funzionare e il campo Indirizzo diventa semplicemente un normale campo di testo senza suggerimenti. Gli utenti possono comunque digitare gli indirizzi manualmente.

Monitora il tuo utilizzo nella Google Cloud Console e imposta avvisi di fatturazione per evitare sorprese. La maggior parte dei siti rimane ben al di sotto del limite gratuito a meno che non abbiano un traffico molto elevato.

Successivamente, Migliora i Tuoi Moduli con Mappe Interattive

Ottimo lavoro! Hai creato con successo un modulo di indirizzi con completamento automatico di Google Maps che migliora l'esperienza utente e garantisce dati di indirizzo accurati. Ora che hai il completamento automatico degli indirizzi funzionante, porta i tuoi moduli al livello successivo con il Campo Mappa di WPForms.

Questa funzionalità ti consente di incorporare mappe interattive direttamente nei tuoi moduli, dove gli utenti possono fare clic per selezionare posizioni, visualizzare più sedi aziendali con indicatori personalizzati o scegliere la loro area di servizio preferita da una mappa visiva. Il Campo Mappa è perfetto per:

• Moduli di prenotazione multisede: Consenti ai clienti di vedere tutte le sedi su una mappa e selezionare la loro filiale preferita.
• Selezione dell'area di servizio: Visualizza le tue zone di copertura in modo visivo in modo che i clienti sappiano se servi la loro area.
• Moduli di contatto con sedi dell'ufficio: Aiuta i visitatori a trovare l'ufficio più vicino prima ancora che inviino.
• Registrazione eventi: Mostra le sedi degli eventi con indicazioni stradali integrate nel modulo.

Dai un'occhiata a queste guide per esplorare cosa è possibile:

• Come visualizzare una mappa con il tuo modulo di contatto WordPress
• Come creare un modulo di prenotazione WordPress per più sedi

Vuoi monitorare quali moduli convertono meglio? Scopri come monitorare una fonte di lead in WordPress per vedere quali fonti di traffico ti portano il maggior numero di invii di moduli.

Crea ora il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.