Riepilogo AI
Vuoi aggiungere una mappa al tuo modulo di contatto WordPress in modo che i visitatori possano trovare facilmente la sede della tua attività? Aggiungere una mappa al tuo modulo aiuta i visitatori a sapere esattamente dove ti trovi prima di contattarti.
È particolarmente utile se disponi di un negozio fisico, un ufficio o un'area servizi che i clienti devono visitare. Ma le mappe sui moduli di contatto possono fare molto di più che mostrare la tua posizione.
Con la giusta configurazione, puoi anche aiutare i visitatori a compilare più rapidamente i campi relativi all'indirizzo grazie alla funzione di completamento automatico, o persino visualizzare più sedi se disponi di diversi uffici o negozi.
In questo tutorial ti mostrerò due modi per aggiungere mappe ai tuoi moduli di contatto in WordPress. Entrambi i metodi utilizzano WPForms e il suo add-on Geolocation. Cominciamo!
Costruite ora il vostro modulo WordPress
Perché aggiungere una mappa in un modulo di contatto?
Certo, non è un segreto che la maggior parte dei proprietari di piccole imprese con siti web sappia perché è necessario un modulo di contatto. Ma forse ti starai chiedendo perché aggiungere una mappa a quel modulo di contatto.
Se gestisci un'attività locale, aggiungere una mappa al tuo modulo di contatto rende immediatamente chiaro dove ti trovi. Questa può essere un'ottima idea per diversi motivi:
- Se i clienti hanno bisogno di visitare la tua attività di persona, una mappa elimina ogni dubbio. Possono vedere esattamente dove ti trovi prima di contattarti, riducendo così il numero di domande del tipo "dove ti trovi?" nella tua casella di posta.
- Quando si abilita il completamento automatico dell'indirizzo, i visitatori possono digitare alcune lettere e selezionare il loro indirizzo completo da un menu a tendina. Ciò velocizza la compilazione del modulo e riduce gli errori di battitura che potrebbero causare problemi di comunicazione.
- Hai più di un ufficio o negozio? Puoi incorporare una mappa interattiva che mostra tutte le tue sedi e consente ai visitatori di selezionare quella che desiderano contattare o visitare. In questo modo le richieste vengono indirizzate automaticamente al team giusto.
- Una mappa sulla tua pagina dei contatti indica che sei un'azienda reale con una presenza fisica. Ciò è particolarmente importante per i servizi locali, i negozi al dettaglio o gli studi professionali.
La parte migliore? Invece di dover codificare una mappa nel tuo sito web da solo o pagare uno sviluppatore web, puoi farlo facilmente con WPForms Pro. È uno dei migliori plugin per mappe per WordPress!
Come aggiungere una mappa al modulo di contatto di WordPress
Con WPForms Pro e l'add-on Geolocation, puoi aggiungere in un attimo funzionalità di mappa ai tuoi moduli di contatto. Segui queste semplici istruzioni passo passo per iniziare:
Passo 1: Scaricare il plugin WPForms
WPForms è un potente generatore di moduli che semplifica la creazione di moduli di contatto, moduli di registrazione e altro ancora. Offre oltre 2.100 modelli di moduli WordPress che puoi utilizzare.
Ciò che mi piace di più di WPForms è il modo in cui combina la creazione di moduli con strumenti di geolocalizzazione integrati. Non è necessario mettere insieme più plugin o scrivere codice personalizzato per aggiungere mappe ai 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.
Per iniziare, acquista una licenza WPForms Pro. Quindi, installa e attiva WPForms sul tuo sito web. Se hai bisogno di aiuto con l'installazione, segui questa guida passo passo su come installare un plugin WordPress.
Passate subito a WPForms Pro! 🙂
Passaggio 2: installare e attivare l'add-on 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.
Nella dashboard di WordPress, vai su WPForms » Addons. Utilizza la barra di ricerca per individuare l'addon Geolocation, quindi fai clic su Installa addon. Una volta installato (di solito bastano pochi secondi), fai clic su Attiva.
Con l'addon attivato, ora hai accesso a tre modi per utilizzare le mappe nei tuoi moduli:
- Mostra le sedi della tua attività: mostra ai visitatori dove si trova esattamente la tua attività con una mappa incorporata nel modulo. Questa funzione è particolarmente utile per le attività commerciali locali, gli uffici o i negozi che i clienti visitano di persona.
- Abilita completamento automatico dell'indirizzo: i visitatori possono compilare i campi dell'indirizzo più rapidamente grazie ai suggerimenti di completamento automatico. Man mano che digitano, il loro indirizzo completo appare in un menu a tendina, riducendo gli errori e velocizzando la compilazione del modulo.
So che sembra complicato, ma WPForms offre una guida passo passo che rende il tutto molto più semplice di quanto sembri. Per le istruzioni complete di configurazione, consulta la documentazione dell'add-on Geolocation.
Una volta aggiunta la chiave API e salvate le impostazioni, il gioco è fatto. L'add-on Geolocalizzazione è ora pronto per l'uso e puoi iniziare ad aggiungere mappe interattive ai tuoi moduli.
Passaggio 3: crea il tuo modulo di contatto
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. Il generatore di moduli utilizza il drag-and-drop, quindi riorganizzare i campi è semplicissimo.
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 4: aggiungi una mappa al tuo modulo di contatto
Ora arriva la parte importante: aggiungere una mappa al tuo modulo di contatto. WPForms ti offre due modi per farlo, a seconda di ciò che desideri ottenere:
- Opzione 1: Visualizza la posizione della tua attività (campo mappa)
- Opzione 2: aggiungi il completamento automatico dell'indirizzo per i visitatori (campo di testo a riga singola o campo indirizzo)
Esaminiamo entrambe le opzioni in modo che tu possa scegliere quella più adatta alle tue esigenze.
Opzione 1: Visualizza la tua posizione con il campo Mappa
Utilizza questa opzione se desideri mostrare ai visitatori dove si trova la tua attività. In questo modo verrà incorporata una mappa interattiva direttamente nel tuo modulo di contatto.
Nel generatore di moduli, scorri il pannello di sinistra fino a Fancy Fields e vedrai il campo Mappa elencato lì. Procedi e trascinalo nell'anteprima del modulo sulla destra.
La posizione dipende dalle tue preferenze. Alcuni preferiscono posizionarlo in alto, in modo che sia immediatamente visibile. Altri preferiscono posizionarlo più in basso. Scegli la posizione che ti sembra più naturale per il layout del tuo modulo.
Dopo aver aggiunto il campo Mappa, selezionalo per visualizzare le opzioni di configurazione sulla sinistra. Trova la sezione Posizioni, poiché è qui che inserirai gli indirizzi della tua attività.
Clicca nella casella Indirizzo e inizia a inserire la tua posizione. Noterai che durante la digitazione appariranno dei suggerimenti di completamento automatico. Scegli quello corretto per fissare le coordinate precise sulla mappa.
Ora aggiungi un nome per questo luogo. Usa qualcosa di descrittivo come "West Branch" o "Sede centrale". I visitatori vedranno questa etichetta quando interagiscono con il marker, quindi è importante che sia chiara.
È inoltre disponibile un campo Descrizione, nel caso in cui desideriate aggiungere informazioni supplementari quali orari di apertura, recapiti specifici o note relative alla posizione.
Sei pronto ad aggiungere un'altra sede?
Clicca sul pulsante più (+) sotto la voce corrente. Apparirà una nuova serie di campi di immissione dati. Segui gli stessi passaggi: inserisci l'indirizzo, attendi il completamento automatico, seleziona la corrispondenza, assegna un nome e, se lo desideri, aggiungi una descrizione.
Una volta completata, la mappa si popolerà automaticamente con dei marcatori per ogni indirizzo inserito. I visitatori potranno interagire con questi marcatori per visualizzare i nomi e le descrizioni forniti.
Ora che hai impostato la tua mappa con più posizioni, puoi scegliere se visualizzare le posizioni o persino renderle selezionabili (ideale soprattutto per i moduli di prenotazione).
Nel pannello delle opzioni del campo Mappa, cerca il pulsante Mostra elenco delle posizioni e attivalo. In questo modo tutti gli indirizzi delle tue posizioni verranno visualizzati in un elenco ordinato proprio sotto la mappa.
Noterai immediatamente che sotto compare un'opzione utile: Consenti selezione della località. I visitatori possono ora cliccare su qualsiasi località per selezionarla come luogo preferito per la prenotazione.
Opzione 2: Aggiungi completamento automatico dell'indirizzo per i visitatori
Utilizza questa opzione se desideri che i visitatori compilino un campo indirizzo nel tuo modulo di contatto (ad esempio per richieste di preventivi, prenotazioni di servizi o richieste di spedizione). La mappa li aiuta a inserire il loro indirizzo in modo accurato.
Nel generatore di moduli, aggiungi al tuo modulo un campo Testo a riga singola o un campo Indirizzo. Puoi cliccare sul nome del campo o trascinarlo sul tuo modulo.
Clicca sul campo appena aggiunto per aprire le relative impostazioni. Modifica l'etichetta in "Il tuo indirizzo" o qualcosa di simile. Quindi clicca sulla scheda Avanzate nelle impostazioni del campo.
Scorri verso il basso e attiva Abilita completamento automatico indirizzo. Ciò consente ai visitatori di iniziare a digitare il proprio indirizzo e selezionarlo da un menu a tendina.
Quindi, attiva l'opzione Visualizza mappa. Puoi scegliere se visualizzare la mappa sopra o sotto il campo di immissione utilizzando il menu a tendina.
Ora, quando i visitatori compilano questo campo, vedranno una mappa che si aggiorna man mano che digitano. Possono anche trascinare il segnaposto sulla mappa per perfezionare la loro posizione esatta.
Questa opzione è ideale per le aziende di servizi, i moduli di consegna o qualsiasi situazione in cui sia necessario l'indirizzo del visitatore. Dopo aver aggiunto la mappa utilizzando una delle due opzioni, clicca su Salva nell'angolo in alto a destra.
Passaggio 5: Pubblica la mappa del tuo modulo di contatto
Sei pronto a pubblicare il tuo modulo di contatto con una mappa? Con il plugin WPForms Pro, incorporare il tuo modulo nel tuo sito è semplicissimo. Con il modulo ancora aperto nel builder, clicca sul pulsante Embed (Incorpora) nell'angolo in alto a destra.
Qui puoi selezionare qualsiasi pagina WordPress desideri, sia essa una pagina esistente o una nuova. In questo tutorial, cliccherò su Crea nuova pagina.
Assegna un titolo alla tua pagina. Qualcosa come "Contattaci" o "Contattaci", qualsiasi cosa desideri e che soddisfi le tue esigenze, quindi fai clic sul pulsante "Let's Go!".
WPForms inserisce automaticamente il modulo nella pagina. Vedrai il tuo modulo di contatto con la mappa già posizionata. Da qui, puoi aggiungere un testo introduttivo sopra il modulo, modificare il layout della pagina o personalizzare leggermente lo stile del modulo.
Per modificare l'aspetto del modulo di contatto, clicca in un punto qualsiasi del modulo nell'editor di pagina. Si aprirà il pannello di stile sul lato destro, dove potrai personalizzare l'aspetto del modulo.
Per uno styling rapido, scegli un design predefinito dal menu a tendina Tema modulo. Opzioni come Moderno, Classico o Minimal conferiscono al tuo modulo un aspetto professionale immediato che si abbina al design del tuo sito.
Se desideri un maggiore controllo, il pannello ti consente anche di personalizzare singoli elementi come colori, caratteri, spaziatura e stili dei pulsanti.
Una volta che tutto sembra corretto e la mappa mostra correttamente la tua posizione, clicca su Pubblica. Il tuo modulo di contatto con mappa è ora online. Ecco un'idea di come apparirà:
Domande frequenti su come aggiungere un modulo di contatto con mappa in WordPress
Hai domande sull'aggiunta di mappe ai tuoi moduli di contatto WordPress? Ecco le risposte alle domande più frequenti che riceviamo:
Ho bisogno di una chiave API di Google Maps per utilizzare le mappe in WPForms?
Sì, per utilizzare le funzionalità della mappa in WPForms è necessaria una chiave API di Google Maps o una chiave API di Mapbox. L'add-on Geolocalizzazione richiede una di queste chiavi per connettersi al servizio di mappatura.
Non preoccuparti! WPForms fornisce istruzioni dettagliate per ottenere la tua chiave API nella documentazione dell'add-on Geolocalizzazione. La configurazione richiede solitamente circa 10 minuti.
Qual è la differenza tra il campo Mappa e il completamento automatico dell'indirizzo con una mappa?
- Il campo Mappa mostra ai visitatori la posizione della tua attività. Mostra loro dove ti trovi. Utilizzalo quando desideri che le persone vedano il tuo ufficio, negozio o area di servizio sul tuo modulo di contatto.
- Il completamento automatico dell'indirizzo con mappa aiuta i visitatori a compilare più rapidamente il proprio indirizzo. Durante la digitazione, suggerisce il loro indirizzo e lo mostra su una mappa. Utilizzalo quando devi raccogliere la posizione del visitatore.
Posso mostrare più sedi aziendali su una sola mappa?
Sì. Il campo Mappa consente di aggiungere tutte le località necessarie, come più uffici, negozi, filiali o centri di assistenza.
Ogni luogo viene contrassegnato sulla mappa con un indicatore personalizzabile in termini di icona e colore. I visitatori possono cliccare su ciascun indicatore per visualizzare il nome e i dettagli del luogo.
Per istruzioni dettagliate, consulta la documentazione relativa al campo Mappa.
La mappa funzionerà sui dispositivi mobili?
Assolutamente sì. Le mappe create con WPForms sono completamente reattive e funzionano perfettamente su smartphone e tablet.
I visitatori possono ingrandire, scorrere e interagire con la mappa proprio come farebbero su un computer desktop. Anche la funzione di completamento automatico dell'indirizzo funziona perfettamente sui dispositivi mobili.
L'aggiunta di una mappa rallenta il mio modulo di contatto?
No. WPForms carica le mappe in modo efficiente, quindi non rallentano la tua pagina. La mappa viene caricata solo quando necessario e non influisce sulle prestazioni del tuo modulo.
WPForms è ottimizzato per mantenere veloce il tuo sito anche con funzionalità interattive come le mappe.
Posso personalizzare l'aspetto della mappa sul mio modulo?
Sì. Con il campo Mappa, puoi personalizzare le icone e i colori dei marcatori in modo che corrispondano al tuo marchio.
È inoltre possibile controllare quali comandi della mappa vengono visualizzati (zoom, schermo intero, tipo di mappa, ecc.) e regolare il livello di zoom iniziale.
Per le mappe con completamento automatico dell'indirizzo, è possibile scegliere se visualizzare la mappa sopra o sotto il campo di immissione.
Potrò vedere su una mappa da dove provengono i moduli inviati?
Sì. Quando l'add-on Geolocalizzazione è attivo, WPForms acquisisce automaticamente i dati di localizzazione (con il permesso del visitatore) per ogni invio di modulo.
Puoi visualizzare questi dati su una mappa nella tua dashboard WordPress quando guardi le singole voci del modulo. Questo ti aiuta a capire da dove provengono geograficamente i tuoi lead e clienti.
Successivamente, scopri le altre funzionalità di WPForms Pro
Acquista WPForms Pro oggi stesso per accedere all'add-on Geolocation che ti consente di aggiungere queste fantastiche mappe.
Avrai accesso anche a tantissime altre funzioni utili.
- Un costruttore facile da usare - Create i vostri moduli in pochi minuti senza scrivere una sola riga di codice.
- Sondaggi - Raccogliete dati attraverso indagini e sondaggi e visualizzateli in splendidi report. È anche possibile aggiungere una funzione Salva e continua ai sondaggi lunghi, in modo che gli utenti possano mettere in pausa e completare i moduli in un secondo momento.
- Pagine di moduli - Per far sì che più persone completino i vostri moduli creando pagine di moduli prive di distrazioni con un solo clic.
- Moduli d'ordine - Integrate Stripe (tutti i piani), Square (Pro) e PayPal (Pro) direttamente nei vostri moduli e accettate denaro online.
- Rapporti sul percorso dell'utente : per vedere a che punto del sito si trovavano le persone prima di compilare il modulo.
- Moduli sicuri - Proteggete i moduli con opzioni anti-spam come captcha personalizzati, hCaptcha o Google reCAPTCHA v2 o v3.
- Moduli conversazionali - I tassi di conversione salgono alle stelle grazie a moduli altamente coinvolgenti e dall'aspetto moderno.
- Oltre 2.100 modelli: non dovrai più creare moduli da zero grazie ai modelli predefiniti dei tipi di moduli più diffusi.
- Assistenza Premium - Accesso a un team amichevole e competente che vi guiderà nella giusta direzione se avete bisogno di aiuto con i moduli del vostro sito web.
- ...e molto altro ancora.
In effetti, se si guarda a WPForms Lite vs. Pro, si vedrà che ci sono molte ragioni per cui Pro è così popolare.
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.
Ciao a tutti,
È possibile utilizzare una mappa personalizzata come riferimento di base per verificare se l'indirizzo inserito dall'utente rientra o meno in una determinata area?
Ehi Elia - Al momento non abbiamo la possibilità di utilizzare la mappa personalizzata come riferimento per vedere se l'indirizzo inserito dall'utente rientra in un'area. Sono d'accordo che sarebbe utile e aggiungerò questo aspetto al nostro tracker delle richieste di funzionalità in modo che sia all'attenzione dei nostri sviluppatori.