Vai al contenuto principale

Come per il completamento automatico dei campi di indirizzo

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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

Come aggiungere il completamento automatico su wordpress 1

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.

Configura il completamento automatico su wordpress

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.

Console di sviluppo di Google

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

Elenco delle chiavi API di Google

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

Attivazione del modulo del servizio web API di Google Place

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.

Crea credenziali

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

Tutte le informazioni di cui ho bisogno

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

Copia una chiave API di Google

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

API javascript di Google Maps

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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

Google map javascript api

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.

Modulo wordpress wpforms campo indirizzo

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Aggiungi indirizzi dai campi wordpress

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.

Posizione di Google e google map

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

Questo articolo contiene 1 commento

  1. So cosa fare per bloccare il riempimento automatico dei moduli nella pagina?
    Perché spesso se qualcuno ha molti dati, ad esempio cliccando sul nome dell'autocompletamento, il resto ci salta addosso e spesso non è corretto e il cliente non lo vede e invia il modulo sbagliato ? Ovviamente questo è WordPress.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
15 azioni
quota12
Tweet
Enregistrer3