Come aggiungere campi di completamento automatico dell'indirizzo in un modulo WordPress?
Pubblicato: 2023-02-06Ti stai chiedendo come aggiungere un modulo WordPress di completamento automatico dell'indirizzo al tuo sito web? Quindi, questo articolo è proprio ciò di cui hai bisogno in questo momento.
Se il tuo modulo WordPress ha un campo indirizzo, ti suggeriamo di aggiungervi la funzione di completamento automatico. In questo modo, è più facile per i tuoi utenti compilare il campo dell'indirizzo e inviare correttamente il modulo.
Ecco perché abbiamo preparato una guida dettagliata su come creare un modulo WordPress di completamento automatico degli indirizzi. Quindi, leggi fino alla fine.
Ma prima del tutorial, discutiamo i vantaggi della funzione di completamento automatico dell'indirizzo e il modo migliore per aggiungerlo al modulo.
Sommario
In che modo l'opzione di completamento automatico dell'indirizzo è utile in un modulo online?
Potresti semplicemente utilizzare un normale campo Indirizzo per qualsiasi modulo WordPress. Quindi, perché aggiungere l'opzione di completamento automatico dell'indirizzo?
Bene, ecco alcuni modi significativi in cui l'opzione di completamento automatico dell'indirizzo è utile:
- Il campo di completamento automatico dell'indirizzo suggerisce automaticamente i luoghi ai tuoi utenti in base ai loro input.
- Gli utenti possono selezionare indirizzi precisi dall'elenco dei suggerimenti di indirizzi disponibili.
- Poiché gli utenti non devono digitare l'indirizzo completo, possono compilare il modulo in modo relativamente più rapido.
- La funzione di completamento automatico rende la compilazione dei moduli facile e veloce. Ciò può contribuire ad aumentare gli invii di moduli riusciti e a ridurre l'abbandono dei moduli.
Pertanto, è consigliabile includere un campo indirizzo di completamento automatico nei moduli.
Tuttavia, WordPress non offre questa funzionalità per impostazione predefinita. Allora, qual è la tua migliore alternativa?
Tratteremo il modo migliore per aggiungere un campo di completamento automatico dell'indirizzo nella sezione successiva.
Il modo migliore per creare un modulo WordPress di completamento automatico dell'indirizzo
Poiché WordPress non consente l'aggiunta della funzione di completamento automatico dell'indirizzo per impostazione predefinita, dovrai invece fare affidamento sui plug-in.
Il plug-in WordPress giusto ti consentirà di aggiungere la funzionalità al tuo modulo senza problemi. E uno di questi plugin è Everest Forms.
Il popolare plug-in per la creazione di moduli drag-and-drop può essere l'aggiunta perfetta al tuo sito Web WordPress.
Questo potente strumento fa tutto! Ti consente di creare moduli personalizzati senza toccare una singola riga di codice.
Puoi utilizzare i suoi oltre 20 campi modulo per creare moduli di contatto, lasciare moduli di richiesta, moduli d'ordine o qualsiasi modulo tu richieda.
Inoltre, offre un campo Indirizzo in cui è possibile abilitare facilmente l'opzione di completamento automatico. Pertanto, consigliamo il plug-in Everest Forms come il modo migliore per dotare i tuoi moduli di questa funzione.
Come aggiungere campi di completamento automatico dell'indirizzo in un modulo WordPress?
In questo tutorial, abbiamo utilizzato Everest Forms per dimostrare il processo di creazione di un modulo WordPress di completamento automatico dell'indirizzo.
Segui questi 7 semplici passaggi per aggiungere l'opzione di completamento automatico dell'indirizzo Google di WordPress nel tuo modulo.
Passaggio 1: installa e attiva Everest Forms Pro
Inizia installando e attivando il plug-in Everest Forms Pro sul tuo sito. Questa versione premium funziona in aggiunta al plug-in Everest Forms gratuito di base.
Pertanto, dovrai configurare sia la versione gratuita che quella premium del plug-in affinché la funzione di completamento automatico dell'indirizzo funzioni.
Nota: è necessaria la versione premium perché il componente aggiuntivo di geolocalizzazione che fornisce la funzione di completamento automatico è un'estensione premium.
È disponibile nel piano Plus e superiore. Quindi, devi acquistare qualsiasi piano tra Plus, Agency e Professional per ottenere il componente aggiuntivo.
Abbiamo una guida separata su come configurare correttamente Everest Forms Pro sul tuo sito web. Quindi, dai un'occhiata se hai bisogno di aiuto per l'installazione e l'attivazione del plug-in.
Passaggio 2: installa e attiva il componente aggiuntivo di geolocalizzazione
Se hai configurato correttamente Everest Forms Pro, dovresti essere in grado di accedere a tutti i componenti aggiuntivi disponibili. Ricorda che i componenti aggiuntivi a cui hai accesso dipendono dal piano che hai acquistato.
Quindi, apri Everest Forms >> Componenti aggiuntivi nella dashboard di WordPress.
Scorri verso il basso per trovare il componente aggiuntivo Geolocalizzazione e fai clic su Installa componente aggiuntivo . Per completare l'installazione, premere successivamente il pulsante Attiva .
Questo imposterà il componente aggiuntivo da utilizzare nei moduli WordPress.
Passaggio 3: ottieni la chiave API da Google Console
Il terzo passaggio consiste nell'ottenere la chiave API da Google Console. Questo ti aiuterà a connettere il plug-in Everest Forms a Google Console.
Innanzitutto, visita la dashboard di Google Console. Devi aver effettuato l'accesso tramite il tuo account Google per accedere a questa dashboard.
Quindi, seleziona il tuo progetto dalla parte superiore della dashboard.
Se non hai già un progetto, puoi crearne uno facendo clic su Nuovo progetto . Successivamente, dai un nome al tuo progetto e premi Crea .
Dopo aver scelto il progetto, arriverai alla pagina API e servizi per il progetto.
Supponi di non essere reindirizzato automaticamente a questa pagina. In tal caso, puoi aprirlo annualmente dal menu di navigazione in alto a sinistra.
Premi il menu e apri API e servizi >> API e servizi abilitati .
Qui, fai clic su +ABILITA API E SERVIZI .
Nella libreria dell'API, cerca l' API Places e abilitala .
Nota: per abilitare correttamente l'API, devi disporre di un account di fatturazione. Quindi, abilita la fatturazione per Google Cloud Console prima di procedere.
Dopo aver abilitato l'API, vai su API e servizi >> Credenziali . Ora, fai clic su +Crea credenziali e quindi seleziona Chiave API .
Questo genera una nuova chiave API per te. Ma prima di copiare la chiave API, devi aggiungervi alcune restrizioni. Per questo, fai clic su Modifica chiave .
Innanzitutto, devi impostare una restrizione dell'applicazione . Ciò ti consente di limitare i siti Web, gli indirizzi IP o le app che possono utilizzare la chiave API. Nel nostro caso, scegliamo Websites .
Successivamente, aggiungi il sito Web in cui la chiave API sarà valida e premi Fatto . Puoi aggiungere più siti web se necessario.
Successivamente, è necessario impostare le restrizioni API scegliendo il pulsante di opzione Limita chiave . Ciò consente alla tua chiave di sapere quali API abilitate può chiamare.
Poiché abbiamo solo bisogno dell'API Places, scegliamola dal menu a discesa. Puoi abilitare e aggiungere più API come l'API JavaScript di Maps secondo i requisiti.
Infine, premi il pulsante Salva .
Tutto quello che devi fare ora è copiare la chiave per un uso successivo. Tienilo al sicuro poiché ti servirà per il passaggio successivo.
Passaggio 4: aggiungi la chiave API alle impostazioni di geolocalizzazione
Tornando alla dashboard di WordPress, vai su Everest Forms >> Impostazioni >> Geolocalizzazione .
Incolla la chiave API che hai copiato nel campo Chiave API di Google Places . Successivamente, premi il pulsante Salva modifiche .
Questo completa la connessione tra l'API di Google Places e Everest Forms.
C'è un'altra opzione, Posizione attuale , nelle impostazioni di geolocalizzazione . Quando attivi questa opzione, i moduli rilevano e compilano automaticamente la posizione corrente dell'utente nel campo Indirizzo .
È completamente facoltativo, quindi se lo attivi o meno dipende dalle tue esigenze.
Passaggio 5: creare un nuovo modulo con campo indirizzo
Hai collegato correttamente Everest Forms all'API di Google Places. Tuttavia, hai ancora bisogno del modulo in cui è applicabile la funzione di completamento automatico dell'indirizzo.
Per questo, devi creare un nuovo modulo WordPress con il campo Indirizzo .
La domanda è: che tipo di modulo realizzi? Beh, dipende interamente da te!
La cosa migliore di Everest Forms è che ti consente di creare qualsiasi tipo di modulo di cui hai bisogno. Moduli di contatto, moduli di sondaggio, moduli di domanda di lavoro, moduli di prenotazione e così via.
Quindi, vai su Everest Forms >> Add New .
Everest Forms offre diversi modelli predefiniti per vari moduli. Pertanto, puoi personalizzarne uno se hai poco tempo.
Ma progettare un modulo da zero è altrettanto facile! Basta trascinare e rilasciare i campi richiesti e personalizzarli.
Costruiremo da zero un semplice modulo di contatto con un campo indirizzo per questa guida.
Quindi, fai clic su Inizia da zero . Successivamente, inserisci il titolo del modulo e premi Continua .
Questo ti porta al generatore di moduli. Come puoi vedere, tutti i campi del modulo sono raggruppati insieme sulla sinistra. Puoi trascinarli e rilasciarli nelle righe del modulo a destra.
Pertanto, aggiungi tutti i campi necessari nel modulo, come Nome , Email , Oggetto , Messaggio e, soprattutto, Indirizzo .
Quando il modulo WordPress di completamento automatico dell'indirizzo è completo, premi il pulsante Salva in alto per salvare il nuovo modulo.
Passaggio 6: abilitare il completamento automatico dell'indirizzo per il campo indirizzo
Con ogni campo, ottieni molte opzioni di personalizzazione. Allo stesso modo, ottieni diverse opzioni per il campo Indirizzo , una delle quali è la funzione di completamento automatico dell'indirizzo.
Anche se qui ci stiamo concentrando sul campo Indirizzo , assicurati di personalizzare anche gli altri campi.
Fare clic sul campo che si desidera modificare; le sue opzioni di personalizzazione si apriranno sulla sinistra.
Da qui, puoi modificare il campo Label , Description , Field Visibility , ecc. Puoi anche abilitare Required , Enable Tooltip , Hide Label e aggiungere CSS Classes .
Inoltre, sarai in grado di impostare la logica condizionale anche per i singoli campi.
Ma torniamo al nostro campo di evidenziazione qui. Quando fai clic sul campo Indirizzo , le Opzioni campo mostrano opzioni simili a quelle discusse sopra.
Tuttavia, le Opzioni avanzate includono alcune funzionalità curate per il campo Indirizzo .
Ad esempio, è possibile modificare il segnaposto e il valore predefinito per Riga indirizzo 1 , Riga indirizzo 2 , Paese , ecc. Inoltre, è possibile scegliere i paesi che si desidera rendere disponibili agli utenti dall'Elenco paesi predefiniti .
Ancora più importante, puoi abilitare la funzione di completamento automatico dell'indirizzo semplicemente selezionando la casella di controllo.
Premi il pulsante Salva e il tuo campo Indirizzo suggerirà automaticamente i luoghi agli utenti che compilano il modulo.
Se desideri visualizzare Google Maps anziché l'indirizzo di testo, puoi scegliere Mappe dal menu a discesa Stile . Selezionare Indirizzo con mappa per visualizzare entrambi.
Abbiamo un articolo sull'aggiunta di Google Maps al tuo modulo. Quindi, dai un'occhiata se sei interessato.
Passaggio 7: Visualizza il modulo WordPress di completamento automatico dell'indirizzo sul tuo sito
Congratulazioni! Sei al passaggio finale di questo tutorial!
Poiché il modulo WordPress di completamento automatico dell'indirizzo è pronto, devi aggiungerlo al front-end del tuo sito web.
Everest Forms ti consente di farlo in pochi semplici passaggi.
Inizia aprendo la pagina o il post in cui desideri aggiungere il modulo WordPress.
Una volta che sei nell'editor di Gutenberg, seleziona il pulsante di inserimento del blocco ( + ).
Cerca il blocco Everest Forms e aggiungilo alla pagina/post facendo clic su di esso.
Successivamente, scegli il modulo con il campo di completamento automatico dell'indirizzo dal menu a discesa. Questo aggiunge automaticamente il modulo alla pagina/post.
Infine, premi il pulsante Aggiorna in alto.
Puoi anche aggiungere il modulo a una pagina/post completamente nuovo. Basta seguire gli stessi passaggi e premere il pulsante Pubblica alla fine. E hai finito!
Il modulo WordPress di completamento automatico dell'indirizzo è ora accessibile dal front-end ai tuoi utenti.
Avvolgendo
Come puoi vedere ormai, creare un modulo di completamento automatico dell'indirizzo Google WordPress è semplicissimo. Soprattutto quando hai a portata di mano il plug-in Everest Forms.
Questo incredibile plug-in ti consente di connettere rapidamente i tuoi moduli a Google Console. Pertanto, i tuoi utenti possono facilmente compilare il campo Indirizzo utilizzando la funzione di completamento automatico.
Ma lo sapevi? Everest Forms ha molto di più da offrire.
Puoi usarlo per personalizzare i modelli di email, pianificare l'invio di moduli, compilare automaticamente i campi dei moduli e altro ancora.
Leggi tutto su questo plugin sul nostro blog. Dai un'occhiata al nostro canale YouTube per semplici tutorial video se sei uno studente visivo.
Inoltre, segui su Twitter e Facebook per gli aggiornamenti sui post settimanali.