Come incorporare una Google Map nei moduli di contatto (con segnaposto)

Abbiamo compilato la nostra giusta dose di moduli online e spesso ci ritroviamo a digitare continuamente lo stesso indirizzo.

Immagina questo invece: un visitatore arriva sulla tua pagina dei contatti, vede il proprio indirizzo precompilato e un segnaposto già posizionato sulla mappa. È veloce, personale e gli fa risparmiare tempo.

Aggiungere una Google Map con un segnaposto di posizione al tuo modulo di contatto WordPress può sembrare un piccolo tocco, ma può fare una grande differenza. Nella nostra esperienza con WPForms, può aiutare ad aumentare i tassi di completamento dei moduli e offrire agli utenti un'esperienza più fluida e soddisfacente.

In questa guida passo passo, ti mostreremo come incorporare una Mappa Google interattiva direttamente nel tuo modulo di contatto WordPress, senza bisogno di codice. 🗺️

Perché incorporare una Mappa Google nel tuo modulo di contatto?

Quando imposti il tuo sito WordPress, probabilmente hai aggiunto un modulo di contatto in modo che i visitatori possano raggiungerti riguardo ai tuoi prodotti o servizi. E se hai un negozio fisico, probabilmente hai aggiunto una Google Map per aiutare le persone a trovare facilmente la tua posizione.

Ciò che molti proprietari di attività commerciali non sanno è che puoi utilizzare la geolocalizzazione per compilare automaticamente il campo dell'indirizzo sul tuo modulo di contatto e visualizzare la posizione del visitatore su una mappa. Quindi, possono verificare facilmente che il loro indirizzo sia corretto o trascinare il segnaposto per modificarlo, se necessario.

Questo migliora l'esperienza utente complessiva e può aiutare a ridurre l'abbandono dei moduli.

Conoscere le posizioni dei tuoi utenti ti consente anche di utilizzare il geotargeting per mostrare contenuti personalizzati e aumentare i tassi di conversione.

Ora, vediamo come incorporare una Google Map nei tuoi moduli di contatto. Ecco una panoramica di tutti gli argomenti che tratteremo in questo articolo:

• How to Embed a Google Map in a Contact Form
  • Generazione di una chiave API Google Places
  • Restrizione della tua chiave API Google Places
  • Aggiungere la chiave API di Google alle impostazioni di WPForms
  • Creare un modulo di contatto con una mappa Google incorporata in WordPress
  • Aggiungere il modulo di contatto al tuo sito web
  • Visualizzazione della mappa di Google nel modulo di contatto
• Come visualizzare i dati di localizzazione dell'utente su un modulo
• Tutorial video: Incorpora una Google Map nei moduli di contatto
• Risorse bonus 🔗: Le migliori guide sull'uso delle mappe su WordPress

Iniziamo!

Come incorporare una Google Map in un modulo di contatto

Per questo tutorial, utilizzeremo WPForms, il miglior plugin per moduli di contatto per WordPress. Ti consente di creare facilmente qualsiasi tipo di modulo con un semplice costruttore di moduli drag-and-drop.

Esiste una versione gratuita di WPForms disponibile con tutte le funzionalità necessarie per creare un modulo di contatto di base. Per questo tutorial, tuttavia, utilizzeremo WPForms Pro poiché include l'addon Google Map.

ℹ️ Lo sapevi? Su WPBeginner, utilizziamo WPForms per molte cose. Ad esempio, alimenta il nostro modulo di contatto e i sondaggi annuali sulla soddisfazione dei lettori. Abbiamo avuto un'ottima esperienza con esso e puoi saperne di più nella nostra recensione approfondita di WPForms.

La prima cosa da fare è creare un account WPForms. Sul sito web di WPForms, fai clic su ‘Get WPForms Now’ e poi completa il processo di registrazione.

Fatto ciò, atterrerai nella dashboard del tuo account WPForms, dove potrai accedere al tuo file ZIP di WPForms Pro e alla chiave di licenza.

Successivamente, puoi installare e attivare il plugin WPForms.

Dalla tua area di amministrazione di WordPress, puoi andare su Plugin » Aggiungi Nuovo Plugin.

Quindi, procedi e usa la barra di ricerca per trovare rapidamente il plugin WPForms.

Nei risultati della ricerca, fai semplicemente clic sul pulsante ‘Installa Ora’ e poi su ‘Attiva’ per iniziare a usarlo sul tuo sito WordPress.

Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi visitare la pagina WPForms » Impostazioni per inserire la tua chiave di licenza. Puoi trovare queste informazioni nell'area del tuo account WPForms. Assicurati di fare clic sul pulsante 'Verifica chiave' per attivare la tua licenza.

Successivamente, devi navigare su WPForms » Add-on e trovare l'Add-on Geolocation.

Puoi utilizzare l'opzione di ricerca in alto nella schermata o semplicemente scorrere gli add-on disponibili.

Una volta trovato, procedi e fai clic sul pulsante ‘Installa Addon’.

Ora che l'add-on Geolocation è attivo, dovrai configurare le sue impostazioni. Per farlo, naviga su WPForms » Impostazioni e fai clic sulla scheda 'Geolocation'.

In questa pagina, devi selezionare un provider di geolocalizzazione.

Per questo tutorial, sceglieremo ‘Google Places API.’

Dovresti anche fare clic sulla casella di controllo ‘Posizione Corrente’. Questo chiede al browser dell'utente la sua posizione per precompilare automaticamente il campo dell'indirizzo. Ciò consente di risparmiare tempo e aiuta a migliorare l'accuratezza.

Successivamente, devi scorrere verso il basso fino alle impostazioni dell'API Google Places.

Qui, WPForms ti chiederà di inserire la tua chiave API di Google. Puoi ottenere la tua chiave da Google e poi incollarla nel campo di inserimento. Ti mostreremo come fare nella prossima sezione.

Generazione di una chiave API Google Places

Puoi ottenere una chiave API per Google Places visitando il sito web della Google Cloud Console.

Innanzitutto, seleziona semplicemente il tuo paese da un menu a discesa e accetta i termini di servizio. In alcuni paesi, potrebbe anche esserti offerta la possibilità di iscriverti a una mailing list.

Quando sei pronto per passare al passaggio successivo, fai clic su ‘Accetta e continua’.

Successivamente, dovrai selezionare un progetto per la chiave API. Fai semplicemente clic su ‘Seleziona un progetto’ e fai clic sul progetto che desideri utilizzare dall'elenco.

Se non hai mai creato un progetto prima, o se questo è un nuovo sito web che non hai ancora aggiunto a Google, allora dovresti fare clic su ‘Nuovo progetto’ per impostarne uno.

Ora dovresti trovarti nella pagina ‘API e servizi’, dove puoi abilitare le API necessarie per visualizzare Google Maps sul tuo sito WordPress.

Dovrai fare clic sul pulsante ‘+ Abilita API e servizi’ nella parte superiore della pagina.

Questo ti porterà alla Libreria API di Google, dove dovrai attivare tre API di mappatura:

• Google Places API – consente al tuo modulo di recuperare indirizzi suggeriti mentre gli utenti digitano.
• Maps JavaScript API – visualizza la mappa interattiva sul tuo sito.
• API Geocoding – trasforma un indirizzo in coordinate esatte in modo che la mappa possa posizionare correttamente il segnaposto.

Puoi trovarli utilizzando la barra di ricerca in alto o facendo clic sul pulsante 'Visualizza tutto' nella sezione Mappe.

Da qui, troviamo e abilitiamo l'API Places. Una volta individuata, dovrai fare clic su di essa.

Nella pagina successiva, fai clic sul pulsante 'Abilita'.

Dopodiché, dovresti fare la stessa cosa per l'API JavaScript Maps e l'API Geocoding.

E una volta abilitate le tre API, puoi creare una chiave API.

Nel menu a sinistra, devi navigare su API e servizi » Credenziali.

Da qui, potrai fare clic sul pulsante ‘+ Crea credenziali’ in cima allo schermo e quindi selezionare l'opzione ‘Chiave API’.

La tua chiave API verrà creata e visualizzata in una finestra popup.

Più avanti in questo tutorial, dovrai copiare quella chiave nelle impostazioni di WPForms. Per ora, diamo un'occhiata a come applicare alcune restrizioni all'uso della chiave API.

Restrizione della tua chiave API Google Places

L'uso eccessivo della chiave API potrebbe farti uscire dal livello gratuito e costare più del previsto. Ti consigliamo di limitare la chiave per prevenire usi non autorizzati o imprevisti.

Per farlo, devi fare clic sul link ‘Limita chiave’ in fondo al popup ‘Chiave API creata’ nello screenshot sopra.

Nella pagina successiva, puoi impostare diverse restrizioni. La prima di queste è ‘Restrizioni dell'applicazione’.

In questa sezione, dovresti fare clic sull'opzione 'Riferimenti HTTP (siti web)'. Quindi, la chiave verrà utilizzata solo sui siti web.

Successivamente, dovresti assicurarti che venga utilizzata solo sul tuo sito web. Per farlo, dovresti scorrere verso il basso fino alla sezione ‘Restrizioni del sito web’ e quindi fare clic sul pulsante ‘Aggiungi elemento’.

Ora, dovresti digitare il nome del dominio del tuo sito web nel campo ‘Nuovo elemento’ utilizzando il modello *example.com/*.

Se utilizzerai Google Maps su più di un sito web, puoi fare clic sul pulsante ‘Aggiungi un elemento’ e aggiungere tutti i domini di cui hai bisogno.

Ora che hai limitato la chiave API solo ai tuoi siti web, puoi anche limitarla a funzionare solo con le API di Google che hai aggiunto sopra.

Devi scorrere verso il basso fino alla sezione 'Restrizioni API' della pagina e selezionare l'opzione 'Restringi chiave'. Questo rivelerà un menu a discesa dove dovresti selezionare le caselle 'API Geocoding', 'API JavaScript Maps' e 'API Places'.

Una volta fatto ciò, dovresti fare clic sul link ‘OK’ per salvare le tue impostazioni.

Infine, assicurati di fare clic sul pulsante ‘Salva’ in fondo alla pagina per attivare tutte le restrizioni che hai scelto.

Nota che potrebbero essere necessari fino a 5 minuti affinché le impostazioni abbiano effetto.

Aggiungere la chiave API di Google alle impostazioni di WPForms

Ora vedrai la chiave API elencata accanto a qualsiasi altra che hai disponibile. Dovresti fare clic sull'icona 'Copia' in modo da poter aggiungere la chiave alla pagina delle impostazioni di geolocalizzazione di WPForms.

Nota che se avrai mai bisogno di modificare le impostazioni o le restrizioni di una qualsiasi delle API, puoi fare clic sull’icona Modifica sulla destra.

Ora devi tornare al tuo sito web, che dovrebbe essere ancora sulla pagina WPForms » Impostazioni » Geolocalizzazione.

Una volta lì, incolla la chiave nel campo 'API Google Places' nelle impostazioni di WPForms. E assicurati di fare clic sul pulsante 'Salva impostazioni'.

Creare un modulo di contatto con una mappa Google incorporata in WordPress

Ora che hai configurato WPForms e Google Places, sei pronto per creare un modulo di contatto in WordPress.

Ci sono diversi modi per creare i tuoi moduli WordPress con WPForms.

Innanzitutto, puoi iniziare con una tela bianca. Questo ti dà il pieno controllo per aggiungere e disporre i campi del modulo da zero, rendendolo perfetto per design completamente personalizzati.

In secondo luogo, puoi utilizzare il generatore di moduli AI per creare un modulo completo basato su un semplice prompt di testo. Questo è un ottimo modo per risparmiare tempo se non sei sicuro da dove iniziare.

Infine, puoi scegliere tra oltre 2.000 modelli di modulo predefiniti. Che tu abbia bisogno di un modulo di contatto, un sondaggio, un modulo di prenotazione o qualcosa di più complesso, c'è probabilmente un modello che soddisfa le tue esigenze!

Puoi iniziare seguendo la nostra guida su come creare un modulo di contatto in WordPress.

Una volta creato un modulo di base, devi aggiungere un campo indirizzo. Puoi utilizzare un blocco Indirizzo o un campo Testo a riga singola.

Per questo tutorial, utilizzeremo un campo 'Testo a riga singola'. Quindi, trasciniamo semplicemente il blocco 'Testo a riga singola' sul modulo.

Successivamente, personalizzeremo le impostazioni del campo.

Per farlo, devi fare clic sul campo per visualizzare le impostazioni del Testo a riga singola.

Innanzitutto, dovresti cambiare l'etichetta del campo in 'Indirizzo'. Questo renderà chiaro ai tuoi utenti cosa dovrebbero digitare nel campo.

Dopodiché, devi modificare le impostazioni del campo in modo che visualizzi una mappa sul modulo WordPress. Per farlo, dovrai fare clic sulla scheda Avanzate.

Una volta lì, dovresti cercare l'opzione 'Abilita completamento automatico indirizzo' in fondo alle impostazioni e attivarla su 'On'.

Vedrai quindi un'altra opzione, 'Mostra mappa', che dovresti anche abilitare. Puoi scegliere di visualizzare la mappa sopra o sotto il campo.

Aggiungere il modulo di contatto al tuo sito web

Il modo più semplice per aggiungere il modulo di contatto al tuo sito web è fare clic sul pulsante 'Incorpora'. Lo troverai accanto al pulsante 'Salva' in cima alla schermata dell'editor del modulo.

Ti verrà chiesto se aggiungere il modulo a una pagina esistente o crearne una nuova.

Per questo tutorial, faremo clic sul pulsante 'Crea nuova pagina'.

Successivamente, dovresti dare un nome alla pagina e quindi fare clic sul pulsante 'Iniziamo!'.

Verrà creata una nuova pagina con quel nome e il tuo modulo di contatto verrà aggiunto automaticamente.

Tutto quello che devi fare è fare clic sul pulsante 'Pubblica' per rendere la pagina attiva.

Visualizzazione della mappa di Google nel modulo di contatto

Quando un utente visita il tuo modulo di contatto, gli verrà chiesto se desidera consentire al tuo sito web di accedere alla sua posizione.

Se clicca sul pulsante ‘Consenti’, la sua posizione attuale verrà inserita nel campo indirizzo e un segnaposto di quella posizione verrà aggiunto alla mappa.

Questa funzione di completamento automatico farà risparmiare tempo ai tuoi visitatori rendendo più veloce e facile l'inserimento dei loro indirizzi.

Se hanno bisogno di cambiare l'indirizzo, possono semplicemente digitarne uno nuovo o trascinare il segnaposto in una posizione diversa sulla mappa.

Come visualizzare i dati di localizzazione dell'utente su un modulo

Una volta abilitata la geolocalizzazione, WPForms registrerà anche la posizione di ciascun utente quando invia il tuo modulo. Conoscere la posizione dei tuoi utenti può aiutarti a trovare lead migliori.

Dovrai navigare su WPForms » Voci e quindi cliccare sul tuo modulo di contatto.

Ora vedrai un elenco delle voci compilate dai tuoi utenti per quel modulo.

Per visualizzare una particolare sottomissione del modulo, clicca semplicemente sul link ‘Visualizza’ sulla destra.

Ora vedrai i dati del modulo inviati dall'utente, come il loro nome, l'email aziendale e il numero di telefono aziendale, insieme ad alcuni dati di localizzazione.

Questo include un segnaposto su Google Maps, la posizione dell'utente, il codice postale e il paese. Tieni presente che l'accuratezza dipende dal dispositivo dell'utente; i dati GPS dei telefoni cellulari sono solitamente molto precisi, mentre la localizzazione basata su IP dai computer desktop può essere approssimativa.

Naturalmente, se l'utente non ha concesso l'autorizzazione al modulo per conoscere la sua posizione, nessun dato di localizzazione verrà visualizzato.

Fatto. Hai aggiunto con successo una Google Map al tuo modulo di contatto in WordPress. Puoi anche usare WPForms per creare sondaggi in WordPress, creare un modulo di pagamento per accettare pagamenti online e altro ancora.

Tutorial video: Incorpora una Google Map nei moduli di contatto

Vuoi vedere come funziona? Fai semplicemente clic sul pulsante Play ▶️ nel video tutorial qui sotto per imparare come incorporare una Google Map nel tuo modulo di contatto.

Iscriviti a WPBeginner

Risorse bonus 🔗: Le migliori guide sull'uso delle mappe su WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come incorporare una Google Map nei moduli di contatto. Successivamente, potresti anche voler consultare alcune delle nostre altre guide sull'uso delle mappe sul tuo sito web:

• Come aggiungere Google Maps in WordPress (Il modo GIUSTO)
• Come aggiungere un localizzatore di negozi Google Maps in WordPress
• Come incorporare Bing Maps in WordPress (Passo dopo passo)
• Come aggiungere una mappa interattiva in WordPress
• I migliori plugin per Google Maps per WordPress (la maggior parte sono gratuiti)
• I migliori plugin WordPress per Mapbox
• I migliori plugin per la geolocalizzazione e GeoIP di WordPress

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