Riepilogo AI
I campi relativi all'indirizzo sono frustranti. Gli utenti scrivono male i nomi delle vie, dimenticano i codici postali, inseriscono indirizzi incompleti o abbandonano completamente i moduli perché digitare indirizzi completi è noioso.
Il completamento automatico di Google Maps risolve questo problema suggerendo indirizzi completi e convalidati mentre gli utenti digitano. Dopo aver digitato 3-4 caratteri, gli utenti vedono un menu a tendina con indirizzi reali tra cui scegliere.
Vuoi configurarlo sul tuo modulo per eliminare gli errori di battitura e velocizzare la compilazione? In questa guida ti fornirò istruzioni dettagliate su come creare un modulo di completamento automatico degli indirizzi su Google Maps.
Come si crea un modulo per il completamento automatico dell'indirizzo in Google Maps?
Con WPForms Pro e l'add-on Geolocation, puoi aggiungere funzionalità di mappa ai tuoi moduli in pochissimo tempo. Segui queste semplici istruzioni passo passo per iniziare:
- Passo 1: Installare il plugin WPForms
- Passo 2: Abilitare l'addon di geolocalizzazione
- Passo 3: Configurare le impostazioni di geolocalizzazione
- Passaggio 4: crea il tuo modulo di completamento automatico degli indirizzi
- Passaggio 5: aggiungi il campo Indirizzo al modulo
- Passaggio 7: Pubblica il tuo modulo di completamento automatico degli indirizzi di Google Maps
- Successivamente, migliora i tuoi moduli con mappe interattive
Passo 1: Installare il plugin WPForms
La prima cosa da fare è installare il plugin WPForms, un potente generatore di moduli che semplifica la creazione di moduli di contatto, moduli di registrazione e altro ancora.
Dispone di oltre 2.100 modelli di moduli WordPress che puoi utilizzare e include strumenti di geolocalizzazione integrati che semplificano notevolmente la visualizzazione delle mappe sui tuoi moduli.
Per aggiungere mappe ai tuoi moduli di contatto, avrai bisogno di WPForms Pro, che include l'add-on Geolocation e tutte le funzionalità relative alle mappe che tratteremo in questo tutorial.
Se siete alle prime armi con WordPress o avete difficoltà durante il processo di installazione dei plugin, potete consultare la guida passo-passo su come installare un plugin di WordPress.
Passate subito a WPForms Pro! 🙂
Passo 2: Abilitare l'addon di geolocalizzazione
Ora che WPForms Pro è installato, devi attivare l'add-on Geolocalizzazione. È questo che alimenta tutte le funzionalità della mappa nei tuoi moduli di contatto.
Per attivare l'addon, andate nella vostra dashboard di WordPress e cliccate su WPForms " Addons.
Nella barra di ricerca, digita Geolocalizzazione. Quindi fai clic sul pulsante Installa componente aggiuntivo per modificarne lo stato in Attivo.
L'add-on si installa automaticamente. Non è necessario scaricare file o configurare nulla. Successivamente, lo collegherai a Google Maps.
Passo 3: Configurare le impostazioni di geolocalizzazione
Una volta abilitato l'addon Geolocation, è necessario configurare le sue impostazioni. Per farlo, cliccate su WPForms " Impostazioni.
Nella pagina delle impostazioni di WPForms, fare clic su Geolocalizzazione dalle schede in alto per accedere alle impostazioni.
Qui sono disponibili diverse opzioni per configurare l'addon Geolocation in base a esigenze e requisiti diversi:
- Provider dei luoghi: È possibile scegliere il provider che si desidera ricevere le informazioni di geolocalizzazione. In questo caso, selezioneremo l'API di Google Places come fornitore di luoghi.
- Posizione attuale: Attivare questa opzione per consentire che la posizione dell'utente sia precompilata nel modulo.
- API di Google Places: Per abilitare la funzione di completamento automatico dell'indirizzo e visualizzare Google Maps all'interno dei vostri moduli, dovrete generare una chiave API e collegarla a WPForms.
Vediamo il processo completo di generazione di una chiave API.
Generare una chiave API da Google Developer Console
Accedere a Google Developer Console e selezionare il progetto dal menu Seleziona un progetto in alto.
Se non ci sono progetti creati in precedenza, fare clic su Nuovo progetto per crearne uno nuovo.
Una volta creato un nuovo progetto, fare clic su Abilita API e servizi.
Si aprirà una libreria API di Google.
Da qui, è necessario abilitare tre API:
- API di geocodifica
- Mappe API JavaScript
- Luoghi API
Questa libreria API offre una facile opzione di ricerca; digitate il nome dell'API nella casella di ricerca, andate alla vostra API e fate clic sul pulsante ENABLE.
Una volta abilitate tutte le API, tornare alla dashboard di Google Console e navigare nella scheda Credenziali.
Fare clic sul pulsante Crea credenziali in alto e selezionare l'opzione Chiave API.
Si aprirà un pop-up con una chiave API. Fare clic sull'opzione RESTRICT KEY nell'angolo in basso a destra del pop-up.
Si aprirà una nuova pagina in cui si dovranno configurare le seguenti impostazioni:
- Restrizioni delle applicazioni: Da qui è possibile selezionare quali siti web, indirizzi IP o applicazioni possono utilizzare la chiave API. Qui dovrete scegliere l'opzione Referenti HTTP per consentire l'uso della chiave all'interno dei vostri siti web.
- Restrizioni del sito web: Una volta selezionati i referenti HTTP, verrà visualizzata una nuova opzione, restrizioni del sito web. Qui è necessario aggiungere il nome di dominio del sito web per limitare l'uso della chiave API solo ai siti web specificati.
- Restrizioni API: Dopo aver limitato la chiave per applicazione e sito web, è necessario limitare la chiave per API. A tal fine, fare clic sull'opzione Limita chiave.
Si aprirà una tendina con l'opzione API multiple. Selezionare le seguenti API dal menu a tendina:
- Luoghi API
- Mappe API JavaScript
- Geocodifica AP
Una volta completata la selezione delle API, clicca sul pulsante Salva per salvare le impostazioni, che ti reindirizzerà alla pagina Credenziali. Copia la tua chiave dalla pagina e torna alle impostazioni di WPForms.
Nelle impostazioni di WPForms, incollare questa chiave nel campo API sotto Google Places API e fare clic sul pulsante Salva impostazioni.
Le impostazioni di geolocalizzazione sono ora configurate. Successivamente, creerai un modulo con la funzione di completamento automatico dell'indirizzo abilitata.
Passaggio 4: crea il tuo modulo di completamento automatico degli indirizzi
Una volta configurato l'add-on Geolocalizzazione, sei pronto per creare il tuo modulo di contatto. Ci vorranno circa 5 minuti. Vai su WPForms » Aggiungi nuovo nella tua dashboard WordPress per aprire il generatore di moduli.
Assegna un nome al tuo modulo nel campo "Assegna un nome al tuo modulo". Qualcosa come "Contattaci" va bene. Qui vedrai alcune opzioni. Se vuoi risparmiare tempo, puoi scegliere uno dei nostri oltre 2.100 modelli di moduli WordPress.
Ti consiglio di scegliere il modello di modulo di contatto semplice. In questo modo avrai a disposizione un modulo di contatto già pronto con i campi essenziali già aggiunti.
Il modello include un campo Nome, un campo E-mail e un campo Commento o Messaggio. È possibile personalizzare questi campi, aggiungerne di nuovi o rimuovere quelli non necessari.
Probabilmente ci sono altre impostazioni del modulo che potresti voler configurare, come le notifiche e le conferme. In tal caso (e te lo consiglio vivamente), consulta la nostra guida dettagliata sulla creazione del tuo primo modulo.
Suggerimento professionale
Un'altra opzione, se non desideri impostare manualmente ogni campo ma hai requisiti personalizzati, è quella di lasciare che sia WPForms AI Form Builder a occuparsene per te.
Passa semplicemente con il mouse sul pulsante viola Genera con AI e clicca su Genera modulo. Verrai reindirizzato alla schermata del generatore di moduli AI. Qui potrai descrivere il tipo di modulo che desideri.
Puoi digitare il tuo prompt o scegliere tra i suggerimenti a sinistra. Una volta premuto il pulsante "Genera", l'IA impiegherà alcuni secondi per creare il tuo modulo.
Passaggio 5: aggiungi il campo Indirizzo al modulo
Ora che il nostro modulo è pronto, dobbiamo solo aggiungere il campo Indirizzo. A sinistra, trascinare il campo Indirizzo dalla sezione Campi fantasia e posizionarlo nel modulo.
Il campo Indirizzo include già un'etichetta e un testo secondario per facilitare l'inserimento dei dati. È possibile personalizzare il testo dell'etichetta, selezionare lo schema dell'indirizzo, personalizzare le dimensioni del campo e nascondere l'etichetta e le etichette secondarie.
Ora attiverai la funzionalità di completamento automatico per il campo Indirizzo. Si tratta di un semplice interruttore che collega il campo alla tua API Google Places.
Clicca sul campo Indirizzo nel tuo modulo, quindi clicca sulla scheda Avanzate nelle impostazioni del campo a sinistra.
Scorrere fino a visualizzare l'opzione Abilita completamento automatico indirizzo. Attivare questa impostazione per abilitare il completamento automatico degli indirizzi nel modulo.
Consentendo questa opzione, si aprirà un'altra funzione: Visualizza mappa. Se si desidera visualizzare una mappa nel modulo di contatto, attivare anche questa opzione.
Utilizzare il menu a tendina per specificare se si desidera che la mappa appaia sopra o sotto i campi secondari dell'indirizzo.
Fare clic sul pulsante Salva in alto. Ora che il modulo per il completamento automatico degli indirizzi è pronto, è il momento di aggiungerlo al vostro sito web.
Passaggio 7: Pubblica il tuo modulo di completamento automatico degli indirizzi di Google Maps
WPForms vi permette di aggiungere il vostro modulo in più posizioni, comprese le pagine, i post del blog e persino i widget della barra laterale del vostro sito web.
Prima di incorporare il modulo in una pagina, se lo si desidera, è possibile verificare l'aspetto del modulo nella pagina live. Per visualizzare l'anteprima del modulo, fare clic sul pulsante Anteprima in alto.
Se sei soddisfatto del modulo di completamento automatico degli indirizzi di Google Maps, sei pronto per aggiungerlo alla tua pagina. Clicca sull'icona "+" e aggiungi il blocco WPForms dall'editor dei blocchi.
Quindi, seleziona il modulo dal menu a tendina nel blocco. In questo caso, selezionerò il modulo di completamento automatico dell'indirizzo che ho appena creato seguendo i passaggi sopra indicati.
Dopodiché, non ti resta che pubblicare la pagina e il tuo modulo sarà attivo e pronto per ricevere le richieste. Ecco come appare il campo Indirizzo con la mappa interattiva su una pagina pubblicata. Non è fantastico?
Ottimo lavoro! Avete creato con successo un modulo di Google Maps per il completamento automatico dell'indirizzo. Consultate questa guida per maggiori dettagli sulle linee di indirizzo 1 e 2.
Domande frequenti su Come creare un modulo per il completamento automatico dell'indirizzo su Google Maps
Il modulo di autocompletamento degli indirizzi è un argomento di grande interesse per i nostri lettori. Ecco le risposte ad alcune domande comuni su questo argomento:
Che cos'è il completamento automatico dell'indirizzo nel modulo?
Il completamento automatico dell'indirizzo è una funzione che suggerisce indirizzi completi e convalidati mentre gli utenti digitano in un campo del modulo. Dopo aver inserito 3-4 caratteri, appare un menu a tendina con gli indirizzi corrispondenti presenti nel database di Google.
Gli utenti selezionano il proprio indirizzo invece di digitare manualmente ogni campo. Ciò elimina gli errori di battitura, velocizza il completamento (soprattutto sui dispositivi mobili) e garantisce che gli indirizzi siano accurati e recapitabili.
Come posso aggiungere un indirizzo con completamento automatico al mio modulo WordPress?
Installa WPForms Pro o superiore, attiva l'add-on Geolocalizzazione, genera una chiave API Google Places gratuita dalla Google Cloud Console, incolla la chiave API in WPForms » Impostazioni » Geolocalizzazione.
Dopodiché, tutto ciò che devi fare è creare un modulo, aggiungere un campo Indirizzo e attivare l'opzione "Abilita completamento automatico indirizzo" nelle impostazioni avanzate del campo.
La configurazione completa richiede 20-30 minuti ed è descritta passo dopo passo in questa guida. Una volta configurato, il completamento automatico funziona su qualsiasi modulo con un campo Indirizzo.
WPForms supporta la funzione di completamento automatico con Google Maps?
Sì, WPForms utilizza l'API di Google Places per il completamento automatico degli indirizzi, la stessa tecnologia che alimenta la ricerca degli indirizzi di Google Maps.
Per poter usufruire di tutte le funzionalità, è necessario abilitare tre API Google (Places API, Maps JavaScript API e Geocoding API).
WPForms può anche visualizzare una mappa interattiva di Google sul tuo modulo che mostra la posizione dell'indirizzo selezionato. Attiva questa opzione nelle impostazioni avanzate del campo Indirizzo sotto "Visualizza mappa".
Il completamento automatico degli indirizzi di Google Maps è gratuito?
Google offre 28.000 richieste gratuite di completamento automatico degli indirizzi al mese. Oltre tale limite, il costo è di 2,83 dollari per ogni 1.000 richieste. La maggior parte dei siti web di piccole e medie dimensioni rientra nella fascia gratuita.
Una "richiesta" viene conteggiata ogni volta che un utente digita nel campo dell'indirizzo e vengono visualizzati i suggerimenti (non per ogni battitura, ma per ogni sessione di ricerca). Monitora l'utilizzo nella tua Google Cloud Console.
Se superi spesso i limiti, valuta la possibilità di passare a un piano Google Cloud superiore o di limitare il completamento automatico solo ai moduli essenziali.
Qual è la differenza tra Google Places API e Mapbox per il completamento automatico?
L'API Google Places offre una copertura più completa degli indirizzi in tutto il mondo (oltre 200 paesi) e una migliore convalida degli indirizzi, ma ha un limite gratuito di 28.000 richieste al mese.
Mapbox offre richieste di completamento automatico gratuite illimitate, ma i dati relativi agli indirizzi sono meno dettagliati nelle zone rurali e in alcune regioni internazionali.
WPForms supporta entrambi. Scegli Google Places per la precisione o Mapbox per un utilizzo illimitato. Puoi cambiare fornitore in WPForms » Impostazioni » Geolocalizzazione senza dover ricostruire i tuoi moduli.
Posso usare il completamento automatico dell'indirizzo nei moduli di checkout di WooCommerce?
Il completamento automatico dell'indirizzo di WPForms funziona solo sui moduli creati con WPForms, non sul checkout nativo di WooCommerce. Tuttavia, è possibile creare un modulo di checkout personalizzato utilizzando WPForms con integrazione dei pagamenti e completamento automatico dell'indirizzo.
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 specificatamente dell'integrazione con WooCommerce, controlla nella directory dei plugin di WooCommerce i plugin "address autocomplete" 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 addon di geolocalizzazione con una funzione di completamento automatico dell'indirizzo precostituita che funziona con Google Maps o Mapbox.
Questa funzione consente di localizzare e suggerire automaticamente la posizione degli utenti mentre compilano e digitano i loro indirizzi.
Inoltre, con l'addon Geolocation, potete aggiungere una mappa al vostro modulo di contatto WordPress e consentire agli utenti di aggiungere una posizione regolando il pin sulla mappa.
Cosa succede al mio modulo se supero la soglia gratuita di Google?
Se superi le 28.000 richieste di completamento automatico al mese, Google addebiterà il costo sul tuo account Cloud (se la fatturazione è abilitata) oppure interromperà la fornitura dei suggerimenti di completamento automatico (se la fatturazione non è abilitata).
Il modulo continua a funzionare e il campo Indirizzo diventa semplicemente un campo di immissione testo normale 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 completamento automatico degli indirizzi di Google Maps che migliora l'esperienza dell'utente e garantisce dati accurati. Ora che il completamento automatico degli indirizzi funziona, porta i tuoi moduli a un livello superiore con il campo mappa di WPForms.
Questa funzione consente di incorporare mappe interattive direttamente nei moduli, dove gli utenti possono cliccare per selezionare località, 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 multi-sede: consenti ai clienti di visualizzare tutte le sedi su un'unica mappa e selezionare la filiale preferita.
- Selezione dell'area di servizio: mostra visivamente le zone coperte dal tuo servizio, in modo che i clienti sappiano se la loro zona è servita.
- Moduli di contatto con ubicazione degli uffici: aiuta i visitatori a trovare l'ufficio più vicino prima ancora che inviino il modulo.
- Registrazione all'evento: mostra le sedi degli eventi con le indicazioni stradali integrate nel modulo.
Consulta queste guide per scoprire tutte le possibilità:
- Come visualizzare una mappa con il modulo di contatto WordPress
- Come creare un modulo di prenotazione WordPress multi-location
Vuoi monitorare quali moduli hanno il miglior tasso di conversione? Scopri come monitorare una fonte di lead in WordPress per vedere quali fonti di traffico ti portano il maggior numero di invii di moduli.
Costruite ora il vostro modulo WordPress
Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.
Questo NON funziona restituire errore nel campo!
Ciao Nathan! Mi dispiace sapere che il completamento automatico degli indirizzi del tuo modulo ti dà degli errori. Potresti contattarci con qualche dettaglio in più sul problema che stai riscontrando, in modo da poterti aiutare a risolvere il problema?
Non vedo l'ora di sentirvi!
Buon pomeriggio,
Il componente aggiuntivo di Google Maps funziona bene, ottimo lavoro!
Ma c'è un modo per salvare le coordinate lat e long all'interno dell'indirizzo selezionato?
Grazie in anticipo!
Ho notato che questo cattura l'indirizzo in un unico campo, il che rende difficile l'analisi nei campi standard di indirizzo, città, stato e codice postale. C'è un modo per farlo?
Ciao Adam,
Per realizzare quanto descritto, è possibile creare un campo indirizzo personalizzato nel modulo utilizzando campi di testo a riga singola e un campo a discesa.
È possibile aggiungere rapidamente opzioni in un campo a discesa utilizzando l'opzione Aggiungi in blocco nel costruttore di moduli. A tale scopo, fate clic sul campo a discesa e nel pannello delle opzioni del campo a sinistra fate clic su Aggiungi in blocco. Nella nuova sezione visualizzata, selezionare Mostra preimpostazioni. È quindi possibile selezionare dall'elenco delle scelte preimpostate. Ecco un breve screencast del processo di aggiunta di Paesi come esempio.
Se può essere utile, abbiamo anche un tutorial dettagliato al riguardo.
Per il sottocampo Codice postale è possibile utilizzare il campo Numeri o richiedere che gli utenti possano aggiungere solo numeri a un campo di testo a riga singola utilizzando il metodo della maschera di input. Per maggiori dettagli, consultare il nostro tutorial qui.
Se lo si desidera, si può anche formattare il modulo in modo da avere più colonne. Abbiamo un ottimo tutorial su come farlo qui.
Spero che questo sia d'aiuto! 🙂
Ho notato che l'e-mail di notifica non include i dati della mappa: c'è un modo per includerli quando viene inviata una richiesta tramite il modulo di contatto?
Ciao Rob,
Per impostarlo, aprire il costruttore di moduli e andare su Impostazioni " Notifiche". Scorrere quindi fino alla sezione Messaggio e-mail e aggiungere l'opzione
{entry_geolocation}Etichetta intelligente.In caso di aiuto, ecco una guida per includere i dettagli della geo-localizzazione nelle vostre e-mail.
Spero che questo sia d'aiuto! 🙂
C'è un modo per limitare solo una città o uno stato/provincia invece di mostrare gli indirizzi di tutto il mondo? Grazie! Per il resto l'addon funziona benissimo 🙂
Ciao Rodney - Al momento non disponiamo della funzione nell'addon Geolocation per limitare l'autocompilazione degli indirizzi in base al paese o alla località. Sono d'accordo che questa sarebbe una grande funzionalità e la aggiungerò al nostro tracker delle richieste di funzionalità in modo che sia all'attenzione dei nostri sviluppatori.
Salve, ho notato che funziona solo per gli indirizzi. Ho bisogno di un modo per consentire il riempimento automatico di aeroporti, hotel, ecc. Attualmente quando l'utente scrive qualcosa come "aeroporto di Vienna" non c'è nulla da scegliere. C'è un modo per abilitarlo? Pensavo che sarebbe stato bello aggiungerlo al mio sito web sui taxi, ma ora confonde le persone e le fa abbandonare durante l'invio del modulo.
Ciao Matej,
Per abilitare l'autocompletamento di località come aeroporti e hotel in WPForms, è possibile utilizzare la funzione di completamento automatico degli indirizzi fornita dall'addon Geolocation. Questa funzione sfrutta servizi come Google Places o Mapbox, che possono completare automaticamente un'ampia gamma di tipi di località, tra cui indirizzi, aeroporti, hotel e altri punti di interesse, a seconda dei dati disponibili dal fornitore di mappe collegato.
Spero che questo sia d'aiuto!