Come aggiungere il completamento automatico per i campi degli indirizzi in WordPress

Recentemente, uno dei nostri utenti ci ha chiesto come aggiungere il completamento automatico per i campi degli indirizzi nei moduli di WordPress. Il completamento automatico consente agli utenti di selezionare rapidamente l'indirizzo dai suggerimenti generati in tempo reale durante la digitazione. In questo articolo, ti mostreremo come aggiungere il completamento automatico per i campi degli indirizzi in WordPress utilizzando l'API di Google Places.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

La prima cosa che devi fare è installare e attivare il completamento automatico dell'indirizzo utilizzando il plug-in Api di Google Place. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, è necessario visitare Impostazioni »Completamento automatico di Google pagina per configurare le impostazioni del plugin.

Ti verrà chiesto di inserire la chiave API di Google Places. Questa chiave API consente al tuo sito Web di connettersi con Google Maps e recuperare i suggerimenti di completamento automatico dal loro database in tempo reale.

Vai al sito web della Google Developer Console e crea un nuovo progetto.

Apparirà un popup che ti chiederà di fornire un nome per il tuo progetto. Usa un nome che ti aiuterà a identificare successivamente il progetto e poi clicca sul pulsante crea.

Il popup scompare, attendi qualche secondo e sarai automaticamente reindirizzato al tuo nuovo progetto.

Ora vedrai l'elenco delle API di Google più popolari che puoi abilitare per il tuo progetto. Devi individuare e fare clic su "Servizio web dell'API di Google Places".

Questo ti porterà a una pagina panoramica che spiega come funziona questa API. È necessario fare clic sul collegamento Abilita per continuare.

La console per gli sviluppatori ora abiliterà l'API di Google Places per il tuo progetto.

Tuttavia, avrai ancora bisogno di credenziali per utilizzare l'API sul tuo sito web. Quindi vai avanti e clicca sul pulsante crea credenziali per continuare.

Nella schermata successiva, devi cliccare su 'Quali credenziali ho bisogno?' pulsante.

La console per gli sviluppatori ora ti mostrerà la chiave API. Devi copiare questa chiave e incollarla sotto le impostazioni del plugin sul tuo sito Web WordPress.

Devi comunque abilitare un'altra API nel tuo progetto Google Developers. Fai clic sulla libreria in Google Developer Console e poi fai clic su "API JavaScript di Google Maps".

Questo ti porterà alla pagina di panoramica dell'API in cui devi fare clic sul link "Abilita" per continuare.

Questa API non ha bisogno di una chiave API aggiuntiva, quindi ora sei a posto.

Abilitazione dell'indirizzo di completamento automatico nei campi del modulo WordPress

È possibile aggiungere funzionalità di completamento automatico a qualsiasi campo modulo creato da qualsiasi plug-in di compilatore di moduli WordPress.

In questo tutorial utilizzeremo WPForms. Tuttavia, queste istruzioni funzioneranno indipendentemente dal plug-in del modulo di contatto che stai utilizzando.

Per prima cosa è necessario creare un modulo che abbia un campo indirizzo o una serie di campi indirizzo.

Una volta che hai finito, aggiungi questo modulo al tuo sito web come faresti normalmente.

Successivamente, vai al post o alla pagina in cui hai aggiunto il modulo. Devi fare clic con il pulsante destro del mouse sul campo dell'indirizzo e selezionare "Ispeziona" dal menu del browser.

Vedrai il nome, l'ID e i valori della classe CSS per il campo dell'indirizzo.

Ad esempio, in questo screenshot il valore del nome del nostro modulo è wpforms [campi] [9] [address1], Il valore ID è wpforms-352-field_9, e la classe CSS è wpforms-campo-indirizzo-address1.

Devi copiare solo uno di questi valori e incollarlo nella pagina delle impostazioni del plugin.

Se desideri scegliere come target più campi in più moduli, puoi semplicemente aggiungere una virgola e aggiungere un altro valore.

Non dimenticare di fare clic sul pulsante Salva per memorizzare le modifiche.

Questo è tutto, ora puoi visitare la pagina del modulo e provare a inserire un indirizzo. Il campo modulo inizierà automaticamente a mostrare suggerimenti utilizzando Google Places e Google Maps.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere il completamento automatico per i campi degli indirizzi in WordPress. Potresti anche voler vedere il nostro elenco di 24 plug-in WordPress per siti Web aziendali.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.