Come aggiungere un selettore di posizione interattivo a qualsiasi modulo WordPress

Immagina questo: un sostenitore visita il sito web di un'organizzazione no profit per donare cappotti invernali. È pronto a consegnarli, ma il modulo mostra solo un menu a discesa con tre indirizzi stradali. Nessuna mappa o contesto incluso. Apre Google Maps in una nuova scheda, incolla ogni indirizzo uno per uno, scopre quale è il più vicino, quindi 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 con icone personalizzate, etichettati "Centro comunitario nord", "Biblioteca del centro" e "Chiesa dell'Eastside". L'utente tocca quello più vicino, il segnaposto rimbalza per confermare e la sua selezione viene acquisita in modo pulito nella tua voce. Viene fatto in pochi secondi e senza mai lasciare la pagina.

Questo è il campo Mappa di WPForms in azione! E mentre un modulo di prenotazione selezionabile in base alla posizione è probabilmente il primo caso d'uso che viene in mente, è tutt'altro che l'unico. Ritiro in negozio, resi di prodotti, check-in eventi, selezione dell'area di servizio, iscrizioni di volontari… qualsiasi modulo che coinvolga la scelta di una posizione fisica migliora con esso.

Lascia che ti mostri come configurarlo, insieme a diversi modi per metterlo al lavoro.

Come aggiungere un selettore di posizione interattivo a qualsiasi modulo WordPress

Cosa Ti Servirà

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

Se utilizzi WPForms Lite, dovrai aggiornare a Pro per accedere al componente aggiuntivo Geolocation. Se sei nuovo a WPForms, Pro è il posto giusto per iniziare.

Crea ora il tuo modulo WordPress

Passaggio 1: Installa il componente aggiuntivo Geolocation

Dal tuo pannello di controllo WordPress, vai su WPForms » Componenti aggiuntivi, cerca "Geolocation" e fai clic su Installa componente aggiuntivo.

Una volta attivo, vai su WPForms » Impostazioni » Geolocation e inserisci la tua chiave API di Google Places per connetterti 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 qualsiasi modulo nell'editor di WPForms, nuovo o esistente. Trova il campo Mappa sotto Campi di fantasia nel pannello di sinistra e trascinalo.

Funziona in qualsiasi tipo di modulo: moduli di contatto, moduli di appuntamento, moduli di registrazione, moduli di donazione, quello che vuoi.

Passaggio 3: Aggiungi le tue posizioni

Fai clic sul campo Mappa per aprire le impostazioni delle opzioni del campo. Nella scheda Generale sotto Posizioni, inizia a digitare un indirizzo: il completamento automatico di Google Places suggerirà le corrispondenze.

Seleziona quello giusto, quindi assegna un Nome (come "Posizione Via Principale") e una Descrizione opzionale (orari, note sul parcheggio, qualsiasi cosa utile al visitatore).

Fai clic su + per aggiungere altre posizioni. Non c'è limite.

Abilita Mostra elenco posizioni per visualizzare nomi e indirizzi delle località in un elenco pulito sotto la mappa.

Ciò fornisce ai visitatori un riferimento testuale accanto alla mappa visiva, il che è particolarmente utile sui dispositivi mobili dove toccare piccole puntine può essere complicato.

Passaggio 4: Abilita la selezione della posizione

Con due o più località aggiunte, attiva Consenti selezione località, sotto l'interruttore Elenco posizioni. Questo aggiunge pulsanti di opzione sotto la mappa, trasformando il campo da una visualizzazione visiva a un input di modulo attivo.

Quando un visitatore fa clic su una puntina o seleziona dall'elenco, il marcatore rimbalza per confermare. La loro invio cattura il nome, l'indirizzo e le coordinate della località — più un link Visualizza su mappa — direttamente nella tua voce del modulo.

Nota: La selezione della località richiede sia l'opzione Mostra elenco posizioni sia almeno due località configurate.

Passaggio 5: Personalizza i tuoi indicatori

È qui che il campo Mappa si distingue da un generico embed di Google Maps. Accanto a ogni località che hai aggiunto, c'è un menu a discesa Icona.

La selezione Icona ti dà accesso a una vasta libreria di icone Font Awesome. Scelte semplici come puntine da mappa o icone di edifici tendono a funzionare bene come marcatori, ma sono disponibili anche opzioni più specifiche, come calendari, cuori, ecc.

Ogni puntina è completamente personalizzabile:

• Icona — scegli tra oltre 2.000 icone Font Awesome. Una borsa della spesa per una località commerciale, un cuore per un sito di donazioni, un simbolo di riciclo per un punto di raccolta.
• Immagine — carica il tuo logo o marcatore personalizzato dalla tua Libreria multimediale.
• Colore — usa il selettore di colori o incolla un valore esadecimale per abbinare esattamente il tuo brand.
• Dimensione — imposta le puntine su Piccole, Medie o Grandi. Marcatori più grandi fanno risaltare immediatamente le tue località dai punti di interesse predefiniti di Google Maps.

Ogni puntina può anche visualizzare un popup con nome e descrizione quando viene cliccata, in modo che i visitatori ottengano il contesto completo senza lasciare il modulo.

Passaggio 6: Affina la visualizzazione

Nella scheda Avanzate, puoi ripulire l'interfaccia della mappa nascondendo elementi che i visitatori non necessitano — l'interruttore a schermo intero, il selettore del tipo di mappa (satellite/terreno), il controllo Street View e le schede informative delle località per altre attività.

Puoi anche disabilitare il trascinamento o lo zoom con la rotellina del mouse per mantenere il focus sulle tue località contrassegnate.

Per le voci, abilita Mostra miniatura nella voce per vedere un'anteprima della mappa direttamente nella pagina di invio all'interno di WPForms » Voci.

Passaggio 7: Imposta notifiche basate sulla posizione

Prima di pubblicare il tuo modulo di prenotazione multi-località, vale la pena dedicare un momento alla configurazione delle notifiche e delle conferme. Nell'editor del modulo, vai su Impostazioni » Notifiche.

WPForms invia automaticamente una notifica all'indirizzo email dell'amministratore di WordPress ogni volta che il modulo viene inviato. Da questa schermata, puoi regolare le impostazioni predefinite — cose come la riga dell'oggetto o gli indirizzi email dei destinatari.

Con gli Smart Tag, puoi anche impostare una notifica che arriva direttamente alla persona che ha compilato il modulo, confermando la ricezione e informandola che qualcuno darà seguito. Questo è un passaggio particolarmente utile per i moduli multi-sede in WordPress. Per una guida più dettagliata, consulta la documentazione su come impostare le notifiche dei moduli in WordPress.

Una volta fatto, vai su Conferme nel menu Impostazioni per decidere cosa succede dopo un invio riuscito.

Ci sono tre opzioni:

• Messaggio: Visualizza un messaggio di ringraziamento sulla stessa pagina, ideale quando la semplicità è la priorità.
• Mostra Pagina: Reindirizza il visitatore a un'altra pagina del tuo sito, come una che delinea i prossimi passi o fornisce dettagli di contatto aggiuntivi.
• Vai a URL (Reindirizzamento): Invia il visitatore a un URL esterno, che funziona bene quando è coinvolto un sistema di prenotazione di terze parti o una landing page personalizzata.

Scegli l'opzione che si 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 fornito."

Per la guida sugli altri tipi di conferma, consulta la documentazione su impostazione delle conferme dei moduli.

Campo Mappa vs. Autocompletamento Indirizzo: Qual è la Differenza?

Queste sono due funzionalità separate dell'addon Geolocation che fanno cose opposte e sono facili da confondere:

	Campo Mappa	Autocompletamento indirizzo
Cosa mostra	Le tue posizioni predefinite	Suggerimenti di digitazione per qualsiasi indirizzo
Cosa cattura	La posizione che un visitatore seleziona	L'indirizzo che un visitatore digita
Ideale per	Scelta tra le tue filiali, sedi o locali	Raccolta di un indirizzo di consegna, fatturazione o servizio

Puoi usarli entrambi nello stesso modulo. Un modulo d'ordine per la consegna di cibo potrebbe utilizzare il campo Mappa per consentire al cliente di scegliere una filiale del ristorante e un campo Indirizzo con autocompletamento per raccogliere il suo indirizzo di consegna.

Per abilitare l'autocompletamento dell'indirizzo, apri qualsiasi campo Indirizzo, vai alla scheda Avanzate e attiva Abilita Autocompletamento Indirizzo. Per una guida completa, vedi come creare un modulo di indirizzo con autocompletamento Google Maps.

Visualizzazione dei Dati di Posizione nelle Tue Voci

Tutti i dati di posizione si trovano in WPForms » Voci.

Apri qualsiasi invio per vedere il nome della posizione selezionata, l'indirizzo e un link Visualizza su Mappa. Se hai abilitato l'anteprima della mappa nelle impostazioni Avanzate, vedrai un'anteprima visiva direttamente nella pagina della voce.

Se esporti su Google Sheets, mappa i campi di posizione selezionati utilizzando l'addon Google Sheets, utile per creare elenchi di evasione organizzati per luogo di ritiro o per monitorare il numero di iscrizioni dei volontari per sito.

Pronto per iniziare? Il campo Mappa è disponibile nel costruttore di moduli WPForms per tutti gli utenti Pro. Se l'addon Geolocation è già installato, lo troverai nella sezione Campi Fantasia.

Crea ora il tuo modulo WordPress

FAQ sull'aggiunta di un selettore di posizione interattivo a qualsiasi modulo WordPress

Il campo Mappa funziona su dispositivi mobili?

Sì. Il campo Mappa è completamente reattivo. L'elenco delle località con pulsanti di opzione sotto la mappa rende la selezione facile sui telefoni, senza bisogno di toccare con precisione un piccolo segnaposto.

Ho bisogno di pagare un extra per il componente aggiuntivo Geolocation?

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

Cosa succede se aggiungo solo una località?

Con una singola località, il campo Mappa funziona come visualizzazione: il tuo segnaposto personalizzato sulla mappa, nessuna selezione richiesta. La selezione della località si attiva solo con due o più località e con l'elenco delle località abilitato.

Posso usare la logica condizionale in base alla località selezionata da un visitatore?

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

Posso caricare il mio logo come marcatore della mappa?

Sì. Nella sezione Località delle Opzioni Campo, scegli Immagine dal menu a discesa delle icone e carica qualsiasi immagine dalla tua Libreria multimediale come segnaposto.

Approfondisci con questi casi d'uso

Vuoi esplorare di più su un caso d'uso specifico? Penso che troverai utili queste guide:

• Come creare un modulo di prenotazione WordPress multi-località — guida completa per aziende di servizi e pianificazione basata su appuntamenti
• Come creare un modulo d'ordine online per ristoranti — aggiungi la selezione della località a un flusso completo di ordinazione e pagamento
• Come creare un modulo multi-step in WordPress — suddividi moduli complessi in pagine con la selezione della località come primo passo
• Come creare un modulo di indirizzo con completamento automatico di Google Maps — integra il campo Mappa con il completamento automatico dell'indirizzo del visitatore

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.