Come per il completamento automatico dei campi di indirizzo

Di recente, uno dei nostri utenti ci ha chiesto come aggiungere il completamento automatico per i campi indirizzo sui moduli di WordPress. Il completamento automatico consente agli utenti di selezionare rapidamente l'indirizzo dei suggerimenti generati in tempo reale durante la digitazione.

In questo tutorial, ti mostreremo come aggiungere il completamento automatico per i campi indirizzo su WordPress utilizzando " Google Places API '.

La prima cosa che devi fare è installare e attivare il plugin " Completamento automatico dell'indirizzo utilizzando Google Place Api ". Per maggiori dettagli, consulta la nostra guida dettagliata su come installare un plugin per WordPress.

Dopo l'attivazione, è necessario visitare la posizione " Impostazioni> Completamento automatico di Google Pagina per configurare le impostazioni del plugin.

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

Vai a " Google Console per gli sviluppatori Per creare un nuovo progetto.

Apparirà una finestra che ti chiederà di fornire un nome per il tuo progetto. Usa un nome che ti aiuti a identificare il progetto in un secondo momento, quindi fai clic sul pulsante "Crea".

Il popup scomparirà, attendi qualche secondo e verrai reindirizzato automaticamente al tuo nuovo progetto.

Ora vedrai l'elenco delle API di Google che puoi abilitare per il tuo progetto. È necessario individuare e fare clic su " Web Service API di Google Places '.

Questo ti porterà a una pagina di anteprima che spiega come funziona questa API. È necessario fare clic sul collegamento "Attiva" per continuare.

Console per gli sviluppatori di Google attivare Luogo API per il progetto.

Tuttavia, avrai comunque bisogno delle credenziali per utilizzare l'API sul tuo sito. Quindi vai avanti e fai clic sul pulsante Crea credenziali per continuare.

Nella schermata successiva, fare clic sul pulsante "Quali credenziali mi servono".

La Console per gli sviluppatori ora ti mostrerà la chiave API. Devi copiare questo tasto e incollarlo nelle impostazioni del tuo sito WordPress.

Devi sempre attivare un'altra chiave API sul tuo progetto Google Developers. Fai clic sulla libreria nella Console per gli sviluppatori di Google, quindi fai clic su " API di Google Maps JavaScript '.

Questo ti porterà alla pagina "Panoramica API" dove devi fare clic sul link "Attiva" per continuare.

Questa API non necessita di una chiave API aggiuntiva, quindi ora sei pronto per continuare.

Come abilitare il completamento automatico nei campi modulo

È possibile aggiungere la funzionalità di completamento automatico ai campi creati dai plug-in di creazione del modulo.

In questo tutorial utilizzeremo WPForms. Tuttavia, questo plug-in può funzionare con qualsiasi plug-in per la creazione di moduli.

È necessario prima creare un modulo che abbia un campo indirizzo o una serie di campi indirizzo.

Al termine, aggiungi questo modulo al tuo sito Web come faresti normalmente.

Quindi vai all'articolo o alla pagina in cui hai aggiunto il modulo. È necessario fare clic con il tasto destro del mouse sul campo 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 questa acquisizione, il nome dell'attributo " 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 altri valori.

Non dimenticare di fare clic sul pulsante « Enregistrer Per salvare le modifiche.

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

Questo è tutto per questo tutorial, spero che ti permetta di aggiungere il completamento automatico nei campi di WordPress.