Come aggiungere un selettore di località interattivo a qualsiasi modulo WordPress

Immaginate questa situazione: un sostenitore visita il sito web di un’organizzazione no profit per donare alcuni cappotti invernali. È pronto a consegnarli, ma il modulo mostra solo un menu a tendina con tre indirizzi. Non ci sono né mappe né informazioni di contesto. Apre Google Maps in una nuova scheda, incolla ogni indirizzo uno per uno, individua quello più vicino e poi torna indietro per completare il modulo.

Alcuni lo faranno. La maggior parte no…

Ora immagina una mappa interattiva direttamente all'interno del modulo. I tre punti di consegna sono contrassegnati da icone personalizzate, con le diciture «North Community Center», «Downtown Library» e «Eastside Church». L'utente tocca quello più vicino a lui, il segnaposto rimbalza per confermare e la sua selezione viene registrata in modo chiaro nel tuo modulo. Il tutto avviene in pochi secondi e senza mai uscire dalla pagina.

Ecco il campo "Mappa" di WPForms in azione! E anche se un modulo di prenotazione con selezione della località è probabilmente il primo caso d'uso che viene in mente, non è affatto l'unico. Ritiro in negozio, resi dei prodotti, registrazione agli eventi, selezione dell'area di servizio, iscrizioni al volontariato... qualsiasi modulo che preveda la scelta di una località fisica ne guadagna in funzionalità.

Ti mostro come configurarlo e ti spiego diversi modi per utilizzarlo.

Come aggiungere un selettore di località interattivo a qualsiasi modulo WordPress

Cosa vi serve

• WPForms Pro — Il campo «Mappa» fa parte del componente aggiuntivo «Geolocalizzazione», incluso in tutti i piani Pro
• Una chiave API di Google Places — gratuita da configurare; questa funzione alimenta la mappa e il completamento automatico degli indirizzi
• L'ultima versione di WPForms installata sul tuo sito WordPress

Se utilizzi WPForms Lite, dovrai passare alla versione Pro per poter accedere al componente aggiuntivo di geolocalizzazione. Se non hai mai utilizzato WPForms prima d'ora, la versione Pro è il punto di partenza ideale.

Costruite ora il vostro modulo WordPress

Passaggio 1: Installa l'estensione di geolocalizzazione

Dalla dashboard di WordPress, vai su WPForms » Componenti aggiuntivi, cerca “Geolocalizzazione” e clicca su Installa componente aggiuntivo.

Una volta attivata, vai su WPForms » Impostazioni » Geolocalizzazione e inserisci la tua chiave API di Google Places per collegarti a Google Maps.

Per una guida completa alla configurazione della chiave API, consulta la documentazione del componente aggiuntivo Geolocation.

Passaggio 2: Aggiungi il campo mappa al tuo modulo

Apri un modulo qualsiasi nel generatore di WPForms, sia esso nuovo o esistente. Cerca il campo «Mappa» nella sezione «Campi avanzati» nel pannello di sinistra e trascinalo nel modulo.

Funziona con qualsiasi tipo di modulo: moduli di contatto, moduli per appuntamenti, moduli di registrazione, moduli per donazioni e chi più ne ha più ne metta.

Passaggio 3: Aggiungi le tue sedi

Fai clic sul campo "Mappa" per aprire le impostazioni delle opzioni del campo. Nella scheda "Generale ", alla voce " Posizioni", inizia a digitare un indirizzo: la funzione di completamento automatico di Google Places ti suggerirà i risultati corrispondenti.

Seleziona quella giusta, poi assegnale un nome (ad esempio «Sede in Via Principale») e, se lo desideri, una descrizione (orari, indicazioni sul parcheggio o qualsiasi altra informazione utile per il visitatore).

Clicca su + per aggiungere altre località. Non c'è alcun limite.

Attiva l'opzione " Mostra elenco delle località " per visualizzare i nomi e gli indirizzi delle località in un elenco chiaro sotto la mappa.

In questo modo i visitatori hanno a disposizione un testo di riferimento accanto alla mappa visiva, il che risulta particolarmente utile sui dispositivi mobili, dove toccare i piccoli segnaposti può risultare complicato.

Passaggio 4: Abilita la selezione della posizione

Se sono state aggiunte due o più località, attiva l'opzione «Consenti selezione della località», situata sotto l'interruttore «Elenco delle località». In questo modo, sotto la mappa vengono visualizzati dei pulsanti di opzione e il campo passa da una visualizzazione statica a un campo di inserimento attivo.

Quando un visitatore clicca su un segnaposto o seleziona un'opzione dall'elenco, l'indicatore lampeggia a conferma dell'operazione. L'invio dei dati registra il nome, l'indirizzo e le coordinate del luogo — oltre al link "Visualizza sulla mappa " — direttamente nel campo del modulo.

Nota: per selezionare una località è necessario che sia attiva l'opzione "Mostra elenco località" e che siano state configurate almeno due località.

Passaggio 5: Personalizza i tuoi indicatori

È qui che il campo "Mappa" si distingue da un semplice incorporamento di Google Maps. Accanto a ciascuna posizione che hai aggiunto, c'è un menu a tendina "Icona".

Selezionando "Icona" avrai accesso a un'ampia libreria di icone Font Awesome. Elementi semplici come i segnaposti delle mappe o le icone degli edifici sono spesso ideali come indicatori, ma sono disponibili anche opzioni più specifiche, come calendari, cuori e così via.

Ogni spilla è completamente personalizzabile:

• Icone: scegli tra oltre 2.000 icone Font Awesome. Una busta della spesa per un negozio, un cuore per un sito di donazioni, il simbolo del riciclaggio per un punto di raccolta.
• Immagine: carica il tuo logo o il tuo simbolo aziendale dalla tua Libreria multimediale.
• Colore: usa il selettore di colori oppure incolla un codice esadecimale per riprodurre esattamente i colori del tuo marchio.
• Dimensione: imposta i segnaposto su Piccolo, Medio o Grande. I segnaposto più grandi fanno risaltare immediatamente le tue posizioni rispetto ai punti di interesse predefiniti di Google Maps.

Inoltre, cliccando su ciascun pin è possibile visualizzare una finestra pop-up con il nome e la descrizione, in modo che i visitatori possano avere un quadro completo della situazione senza dover uscire dal modulo.

Passaggio 6: Regolare la visualizzazione

Nella scheda "Avanzate" puoi semplificare l'interfaccia della mappa nascondendo gli elementi che non servono ai visitatori: il pulsante per passare alla modalità a schermo intero, il selettore del tipo di mappa (satellite/terreno), il comando Street View e le schede informative sulla posizione di altre attività commerciali.

Puoi anche disattivare il trascinamento o lo zoom con la rotellina del mouse per mantenere l'attenzione sulle posizioni aggiunte ai preferiti.

Per i moduli, attiva l'opzione " Mostra miniatura nel modulo " per visualizzare un'anteprima della mappa direttamente nella pagina di invio all'interno di WPForms » Moduli.

Passaggio 7: Configurare le notifiche basate sulla posizione

Prima di pubblicare il modulo di prenotazione per più sedi, vale la pena dedicare qualche minuto alla configurazione delle notifiche e delle conferme. Nel generatore di moduli, vai su Impostazioni » Notifiche.

WPForms invia automaticamente una notifica all'indirizzo e-mail di amministrazione di WordPress ogni volta che il modulo viene inviato. Da questa schermata è possibile modificare le impostazioni predefinite, come l'oggetto o gli indirizzi e-mail dei destinatari.

Con gli Smart Tag, puoi anche impostare una notifica che viene inviata direttamente alla persona che ha compilato il modulo, confermando la ricezione e informandola che qualcuno le farà seguito. Si tratta di un'operazione particolarmente utile per i moduli multi-sede in WordPress. Per indicazioni più dettagliate, consulta la documentazione su come impostare le notifiche dei moduli in WordPress.

Una volta fatto ciò, vai alla sezione "Conferme" nel menu "Impostazioni" per decidere cosa succede dopo l'invio corretto.

Ci sono tre opzioni:

• Messaggio: visualizza un messaggio di ringraziamento sulla stessa pagina — una soluzione ideale quando la semplicità è la priorità.
• Pagina di destinazione: reindirizza il visitatore a un'altra pagina del tuo sito, ad esempio una che illustra i passaggi successivi o fornisce ulteriori recapiti.
• Vai all'URL (reindirizzamento): reindirizza il visitatore a un URL esterno, soluzione ideale quando si utilizza un sistema di prenotazione di terze parti o una pagina di destinazione personalizzata.

Scegli l'opzione più adatta alla tua configurazione. Se scegli l'opzione "Messaggio", il testo predefinito può essere personalizzato, ad esempio: "Grazie per aver prenotato con noi! Ti invieremo a breve un'e-mail di conferma all'indirizzo che ci hai fornito."

Per ulteriori informazioni sugli altri tipi di conferma, consultare la documentazione relativa alla configurazione delle conferme dei moduli.

Campo mappa vs. completamento automatico dell'indirizzo: qual è la differenza?

Si tratta di due funzioni distinte dell'estensione di geolocalizzazione che svolgono azioni opposte e che è facile confondere:

	Campo mappa	Completamento automatico dell'indirizzo
Cosa mostra	Le tue posizioni predefinite	Suggerimenti di digitazione per qualsiasi indirizzo
Cosa cattura	La località scelta dal visitatore	L'indirizzo digitato da un visitatore
Il migliore per	Scegliere tra le vostre filiali, sedi o locali	Rilevazione dell'indirizzo di consegna, di fatturazione o di assistenza

È possibile utilizzare entrambi nello stesso modulo. Ad esempio, in un modulo per l'ordinazione di cibo a domicilio si potrebbe utilizzare il campo "Mappa" per consentire al cliente di scegliere una filiale del ristorante e un campo "Indirizzo" con la funzione di completamento automatico per inserire l'indirizzo di consegna.

Per attivare il completamento automatico degli indirizzi, apri un campo Indirizzo qualsiasi, vai alla scheda Avanzate e seleziona l'opzione "Abilita completamento automatico degli indirizzi". Per una guida dettagliata, consulta la guida su come creare un modulo per il completamento automatico degli indirizzi su Google Maps.

Visualizzazione dei dati sulla posizione nelle tue inserzioni

Tutti i dati relativi alla posizione sono disponibili in WPForms » Registrazioni.

Apri qualsiasi segnalazione per visualizzare il nome e l'indirizzo del luogo selezionato, oltre al link "Visualizza sulla mappa ". Se hai attivato la miniatura della mappa nelle impostazioni avanzate, vedrai un'anteprima visiva direttamente nella pagina della segnalazione.

Se esporti i dati su Fogli Google, associa i campi relativi alle località selezionate utilizzando l'estensione di Fogli Google: questa funzione è utile per creare elenchi di evasione ordini organizzati per punto di ritiro o per monitorare il numero di iscrizioni dei volontari per ogni sede.

Sei pronto a iniziare? Il campo «Mappa» è disponibile nel generatore di moduli di WPForms per tutti gli utenti Pro. Se l'estensione «Geolocalizzazione» è già installata, la troverai nella sezione «Campi avanzati».

Costruite ora il vostro modulo WordPress

Domande frequenti sull'aggiunta di un selettore di località interattivo a qualsiasi modulo WordPress

Il campo "Mappa" funziona sui dispositivi mobili?

Sì. Il campo "Mappa" è completamente reattivo. L'elenco delle località con i pulsanti di opzione sotto la mappa facilita la selezione sui telefoni: non è necessario toccare con precisione un piccolo segnaposto.

Devo pagare un supplemento per l'estensione di geolocalizzazione?

No. È incluso in tutti i piani WPForms Pro senza costi aggiuntivi, insieme a oltre 2.000 modelli di moduli e a tutti gli altri componenti aggiuntivi Pro.

Cosa succede se aggiungo solo una sede?

Se è presente una sola sede, il campo "Mappa" funge da visualizzatore: sul cartografo compare il tuo segnaposto personalizzato, senza che sia necessario selezionare alcuna sede. La selezione delle sedi si attiva solo se sono presenti due o più sedi e se l'opzione "Mostra elenco sedi" è abilitata.

Posso utilizzare una logica condizionale in base alla località selezionata dal visitatore?

Sì. Grazie alla logica condizionale di WPForms, puoi mostrare o nascondere campi, indirizzare le notifiche a destinatari diversi o attivare messaggi di conferma diversi in base alla località selezionata.

Posso caricare il mio logo come indicatore sulla mappa?

Sì. Nella sezione "Posizioni" delle "Opzioni campo", seleziona "Immagine" dal menu a tendina delle icone e carica un'immagine qualsiasi dalla tua Libreria multimediale come indicatore.

Approfondisci l'argomento con questi casi d'uso

Vuoi approfondire un caso d'uso specifico? Credo che queste guide ti saranno utili:

• Come creare un modulo di prenotazione WordPress per più sedi — guida completa per le aziende di servizi e la gestione degli appuntamenti
• Come creare un modulo di ordinazione online per un ristorante — aggiungere la selezione della sede a un flusso completo di ordinazione e pagamento
• Come creare un modulo in più fasi in WordPress — suddividere i moduli complessi in pagine, con la selezione della località come primo passaggio
• Come creare un campo indirizzo con completamento automatico di Google Maps — integrare il campo Mappa con il completamento automatico dell'indirizzo del visitatore

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.