Come aggiungere campi di completamento automatico dell'indirizzo in un modulo WordPress?

Pubblicato: 2023-02-06

Ti 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.

Forme dell'Everest

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.

Aggiunta dei componenti aggiuntivi di Everest Forms

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 .

Componente aggiuntivo Geolocalizzazione Premium

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.

Seleziona Progetto Google

Quindi, seleziona il tuo progetto dalla parte superiore della dashboard.

Seleziona o crea progetto

Se non hai già un progetto, puoi crearne uno facendo clic su Nuovo progetto . Successivamente, dai un nome al tuo progetto e premi Crea .

Salva nuovo progetto

Dopo aver scelto il progetto, arriverai alla pagina API e servizi per il progetto.

Apri il menu di navigazione

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 .

Apri API e servizi abilitati

Qui, fai clic su +ABILITA API E SERVIZI .

Abilita API e servizi

Nella libreria dell'API, cerca l' API Places e abilitala .

Cerca nella libreria delle API

Nota: per abilitare correttamente l'API, devi disporre di un account di fatturazione. Quindi, abilita la fatturazione per Google Cloud Console prima di procedere.

Fai clic su Places API

Dopo aver abilitato l'API, vai su API e servizi >> Credenziali . Ora, fai clic su +Crea credenziali e quindi seleziona Chiave API .

Crea credenziali e 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 .

Modifica chiave API

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 .

Imposta restrizione applicazione

Successivamente, aggiungi il sito Web in cui la chiave API sarà valida e premi Fatto . Puoi aggiungere più siti web se necessario.

Aggiungi restrizioni del sito web

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.

Limita chiave

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.

Copia la chiave API

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 di Google Places

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.

Aggiungi nuove forme Everest

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 .

Titolo del modulo

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.

Aggiungi campi in Builder

Pertanto, aggiungi tutti i campi necessari nel modulo, come Nome , Email , Oggetto , Messaggio e, soprattutto, Indirizzo .

Aggiungi il campo WordPress di completamento automatico dell'indirizzo

Quando il modulo WordPress di completamento automatico dell'indirizzo è completo, premi il pulsante Salva in alto per salvare il nuovo modulo.

Salva il completamento automatico dell'indirizzo del modulo WordPress

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.

Modifica opzioni per il campo

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 .

Opzioni avanzate 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 .

Abilita il campo WordPress di completamento automatico dell'indirizzo

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.

Indirizzo Completamento automatico

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 ( + ).

Scegli Everest Forms Block

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.

Seleziona Modulo di contatto WordPress

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.