Come visualizzare una mappa con il tuo modulo di contatto WordPress

Vuoi aggiungere una mappa al tuo modulo di contatto WordPress in modo che i visitatori possano trovare facilmente la posizione della tua attività? Aggiungere una mappa al tuo modulo aiuta i visitatori a sapere esattamente dove ti trovi prima di contattarti.

È particolarmente utile se hai un negozio fisico, un ufficio o un'area di servizio che i clienti devono visitare. Ma le mappe sui moduli di contatto possono fare più che semplicemente visualizzare la tua posizione.

Con la giusta configurazione, puoi anche aiutare i visitatori a compilare più velocemente i campi dell'indirizzo con l'autocompletamento, o persino visualizzare più posizioni se hai 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 componente aggiuntivo Geolocation. Iniziamo!

Crea ora il tuo 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é hai bisogno di un modulo di contatto. Ma potresti chiederti perché aggiungere una mappa a quel modulo di contatto.

Se gestisci un'attività locale, aggiungere una mappa al tuo modulo di contatto rende immediatamente chiara la tua posizione. Questa può essere un'ottima idea per diverse ragioni:

• Se i clienti devono visitare la tua attività di persona, una mappa elimina ogni congettura. Possono vedere esattamente dove ti trovi prima di contattarti, il che riduce le domande "dove ti trovi?" nella tua casella di posta.
• Quando abiliti l'autocompletamento dell'indirizzo, i visitatori possono digitare poche lettere e selezionare il loro indirizzo completo da un menu a discesa. Ciò velocizza il completamento 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. Questo instrada automaticamente le richieste al team giusto.
• Una mappa sulla tua pagina dei contatti segnala che sei un'attività reale con una presenza fisica. Questo è particolarmente importante per servizi locali, negozi al dettaglio o uffici 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 tuo modulo di contatto WordPress

Con WPForms Pro e il componente aggiuntivo Geolocation, puoi aggiungere funzionalità di mappa ai tuoi moduli di contatto in pochissimo tempo. Segui queste istruzioni facili e passo passo per iniziare:

Passaggio 1: Scarica il plugin WPForms

WPForms è 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.

Ciò che mi piace di più di WPForms è come combina la creazione di moduli con strumenti di geolocalizzazione integrati. Non è necessario assemblare più plugin o scrivere codice personalizzato per aggiungere mappe ai 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.

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.

Aggiorna subito a WPForms Pro! 🙂

Passaggio 2: Installa e attiva 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.

Nella tua bacheca di WordPress, vai su WPForms » Addon. Usa la barra di ricerca per trovare 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:

• Visualizza le sedi della tua attività: mostra ai visitatori esattamente dove si trova la tua attività con una mappa incorporata nel tuo modulo. Questo funziona benissimo per le attività locali, gli uffici o i negozi dove i clienti visitano di persona.
• Abilita il completamento automatico dell'indirizzo: i visitatori possono compilare i campi dell'indirizzo più velocemente con i suggerimenti di completamento automatico. Mentre digitano, il loro indirizzo completo appare in un menu a discesa, riducendo gli errori e velocizzando il completamento del modulo.

So che sembra tecnico, ma WPForms ha una guida passo passo che lo rende molto più semplice di quanto sembri. Per istruzioni complete sull'installazione, consulta la documentazione dell'Addon Geolocation.

Una volta aggiunta la chiave API e salvate le impostazioni, sei pronto. L'Addon Geolocation è ora pronto per l'uso e puoi iniziare ad aggiungere mappe interattive ai tuoi moduli.

Passaggio 3: Crea il tuo modulo di contatto

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. Il generatore di moduli utilizza il trascinamento della selezione, quindi riorganizzare i campi è semplice.

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 4: Aggiungi una mappa al tuo modulo di contatto

Ora arriva la parte importante dell'aggiunta di una mappa al tuo modulo di contatto. WPForms ti offre due modi per farlo, a seconda di ciò che vuoi realizzare:

• Opzione 1: Visualizza la sede della tua attività (Campo Mappa)
• Opzione 2: Aggiungi il completamento automatico dell'indirizzo per i visitatori (Campo Testo a Riga Singola o Indirizzo)

Esaminiamo entrambe le opzioni in modo che tu possa scegliere quella che si adatta alle tue esigenze.

Opzione 1: Visualizza la tua sede con il campo Mappa

Usa questa opzione se vuoi mostrare ai visitatori dove si trova la tua attività. Questo incorpora una mappa interattiva direttamente nel tuo modulo di contatto.

Nell'editor del modulo, scorri il pannello di sinistra fino a Campi Fantasia e vedrai il campo Mappa elencato lì. Trascinalo nell'anteprima del tuo modulo sulla destra.

Dove lo posizioni dipende dalle tue preferenze. Ad alcune persone piace metterlo in cima in modo che sia immediatamente visibile. Altre lo preferiscono più in basso. Scegli ciò che ti sembra naturale per il layout del tuo modulo.

Dopo aver aggiunto il campo Mappa, selezionalo per visualizzare le sue opzioni di configurazione sulla sinistra. Trova la sezione Località, poiché è qui che inserirai gli indirizzi della tua attività.

Fai clic nella casella Indirizzo e inizia a inserire la tua sede. Noterai che compaiono suggerimenti di completamento automatico mentre digiti. Scegli la corrispondenza corretta per bloccare le coordinate precise della mappa.

Ora aggiungi un Nome per questo luogo. Usa qualcosa di descrittivo come "Filiale Ovest" o "Sede Centrale". I visitatori vedranno questa etichetta quando interagiranno con il segnaposto, quindi la chiarezza è importante.

C'è anche un campo Descrizione se desideri aggiungere informazioni supplementari come orari di apertura, dettagli di contatto specifici o note relative alla sede.

Opzione 2: Aggiungi il completamento automatico dell'indirizzo per i visitatori

Usa questa opzione se hai bisogno che i visitatori compilino un campo indirizzo nel tuo modulo di contatto (come per richieste di preventivo, prenotazioni di servizi o richieste di spedizione). La mappa li aiuta a inserire il loro indirizzo in modo accurato.

Nella costruttore di moduli, aggiungi al tuo modulo un campo Testo a riga singola o un campo Indirizzo. Puoi fare clic sul nome del campo o trascinarlo sul tuo modulo.

Fai clic sul campo che hai appena aggiunto per aprire le sue impostazioni. Cambia l'etichetta in "Il tuo indirizzo" o qualcosa di simile. Quindi fai clic 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 discesa.

Successivamente, attiva Mostra mappa. Puoi scegliere se la mappa appare sopra o sotto il campo di immissione utilizzando il menu a discesa.

Ora, quando i visitatori compilano questo campo, vedranno una mappa che si aggiorna mentre digitano. Possono anche trascinare il segnaposto della mappa per perfezionare la loro posizione esatta.

Questa opzione funziona benissimo per le attività di servizio, i moduli di consegna o qualsiasi situazione in cui hai bisogno dell'indirizzo del visitatore. Una volta aggiunto la mappa utilizzando una delle opzioni, fai clic su Salva nell'angolo in alto a destra.

Passaggio 5: Pubblica la mappa del tuo modulo di contatto

Pronto a pubblicare il tuo modulo di contatto con una mappa? Con il tuo plugin WPForms Pro, è facilissimo incorporare il tuo modulo sul tuo sito. Con il modulo ancora aperto nel costruttore, fai clic sul pulsante Incorpora nell'angolo in alto a destra.

Qui, puoi selezionare qualsiasi pagina WordPress che desideri, sia una pagina esistente che una nuova pagina. In questo tutorial, farò clic su Crea nuova pagina.

Dai un titolo alla tua pagina. qualcosa come "Contattaci" o "Mettiti in contatto", quello che preferisci e che si adatta alle tue esigenze, quindi fai clic sul pulsante Iniziamo!.

WPForms inserisce automaticamente il tuo modulo nella pagina. Vedrai il tuo modulo di contatto con la mappa già al suo posto. Da qui, puoi aggiungere testo introduttivo sopra il modulo, regolare il layout della pagina o stilizzare un po' il tuo modulo.

Per regolare l'aspetto del tuo modulo di contatto, fai clic in qualsiasi punto intorno al modulo nell'editor della pagina. Questo apre il pannello di stile sul lato destro dove puoi personalizzare l'aspetto del modulo.

Per uno stile rapido, scegli un design predefinito dal menu a discesa Tema modulo. Opzioni come Moderno, Classico o Minimo conferiscono al tuo modulo un aspetto professionale istantaneo che si abbina al design del tuo sito.

Se desideri un maggiore controllo, il pannello ti consente anche di personalizzare elementi individuali come colori, font, spaziatura e stili dei pulsanti.

Una volta che tutto sembra a posto e la mappa mostra correttamente la tua posizione, fai clic su Pubblica. Il tuo modulo di contatto con mappa è ora attivo. 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ù comuni che sentiamo:

Ho bisogno di una chiave API di Google Maps per utilizzare le mappe in WPForms?

Sì, hai bisogno di una chiave API di Google Maps o di una chiave API di Mapbox per utilizzare le funzionalità della mappa in WPForms. Il componente aggiuntivo Geolocation ne richiede una per connettersi al servizio di mappatura.

Non preoccuparti! WPForms fornisce istruzioni passo-passo per ottenere la tua chiave API nella documentazione del componente aggiuntivo Geolocation. 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 visualizza la/le posizione/i della tua attività ai visitatori. Mostra loro dove ti trovi. Usalo quando vuoi che le persone vedano il tuo ufficio, negozio o area di servizio sul tuo modulo di contatto.
• Il completamento automatico dell'indirizzo con una mappa aiuta i visitatori a compilare più velocemente il proprio indirizzo. Mentre digitano, suggerisce il loro indirizzo e lo mostra su una mappa. Usalo quando devi raccogliere la posizione del visitatore.

Posso mostrare più sedi aziendali su una mappa?

Sì. Il campo Mappa ti consente di aggiungere tutte le posizioni di cui hai bisogno, come più uffici, negozi, filiali o centri di assistenza.

Ogni posizione ottiene il proprio segnaposto sulla mappa e puoi personalizzare le icone e i colori dei segnaposto. I visitatori possono fare clic su ciascun segnaposto per vedere il nome e i dettagli della posizione.

Per istruzioni passo-passo, consulta la documentazione del campo Mappa.

La mappa funzionerà sui dispositivi mobili?

Assolutamente. Le mappe create con WPForms sono completamente responsive e funzionano perfettamente su smartphone e tablet.

I visitatori possono ingrandire, spostare e interagire con la mappa proprio come farebbero da desktop. Anche la funzione di completamento automatico dell'indirizzo funziona senza problemi su 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 il tuo sito veloce 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 segnaposto per adattarli al tuo marchio.

Puoi anche controllare quali controlli della mappa appaiono (zoom, schermo intero, tipo di mappa, ecc.) e regolare il livello di zoom iniziale.

Per le mappe di completamento automatico dell'indirizzo, puoi scegliere se la mappa appare sopra o sotto il campo di immissione.

Vedrò da dove provengono le richieste di modulo su una mappa?

Sì. Quando il componente aggiuntivo Geolocation è attivo, WPForms acquisisce automaticamente i dati di localizzazione (con il permesso del visitatore) per ogni richiesta di modulo.

Puoi visualizzare questi dati su una mappa nella tua bacheca di WordPress quando esamini le singole richieste di modulo. Questo ti aiuta a capire da dove provengono geograficamente i tuoi lead e clienti.

Successivamente, scopri altre funzionalità di WPForms Pro

Acquista WPForms Pro oggi stesso per accedere al componente aggiuntivo Geolocation che ti consente di aggiungere queste fantastiche mappe.

Avrai accesso anche a un sacco di altre funzionalità utili.

• Un Costruttore Facile da Usare – Crea i tuoi moduli in pochi minuti senza scrivere una sola riga di codice.
• Sondaggi – Raccogli dati tramite sondaggi e quiz e visualizzali in splendidi report. Puoi anche aggiungere una funzionalità Salva e Continua ai sondaggi lunghi in modo che gli utenti possano mettere in pausa e completare i loro moduli in seguito.
• Pagine Modulo – Fai in modo che più persone completino i tuoi moduli creando pagine modulo senza distrazioni con un solo clic.
• Moduli d'Ordine – Integra Stripe (tutti i piani), Square (Pro) e PayPal (Pro) direttamente sui tuoi moduli e accetta pagamenti online.
• Report sul Percorso Utente – Vedi dove si trovavano le persone sul tuo sito prima di compilare il tuo modulo.
• Moduli Sicuri – Proteggi i moduli con opzioni anti-spam come captcha personalizzato, hCaptcha o Google reCAPTCHA v2 o v3.
• Moduli Conversazionali – Guarda i tassi di conversione salire alle stelle con moduli estremamente coinvolgenti e dall'aspetto moderno.
• Oltre 2.100 Modelli – Non costruire mai più un modulo da zero con modelli predefiniti dei tipi di modulo più diffusi.
• Supporto Premium – Accedi a un team amichevole e competente che ti aiuterà a guidarti nella giusta direzione se hai bisogno di aiuto con i moduli del tuo sito web.
• ...e molto altro.

Infatti, se guardi WPForms Lite vs Pro, vedrai un sacco di ragioni per cui Pro è così popolare.

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.