Saltar al contenido

Cómo Agregar Autocompletar para los Campos de Dirección en WordPress

Cómo Agregar Autocompletar para los Campos de Dirección en-WordPress

Actualizado / marzo / 28 / 2018

Califica esta publicación

Recientemente, uno de nuestros usuarios nos preguntó cómo agregar autocompletar para los campos de dirección en formas de WordPress. Autocompletar permite a los usuarios seleccionar rápidamente la dirección a partir de las sugerencias generadas en tiempo real como se escriba. En este artículo, vamos a mostrar cómo agregar autocompletar para los campos de dirección en WordPress usando Google Places API.

La primera cosa que usted necesita hacer es instalar y activar la Dirección de Autocompletar el Uso del plugin API KEY for Google Maps.

Para obtener más información, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, usted necesita para visitar ” Ajustes de Google Autocomplete página para configurar la configuración del plugin.

Autocomplete address field plugin settings page

Se le pedirá que introduzca la Clave de API de Google Places. Esta clave de la API permite a su sitio web para conectarse con Google Maps y recuperar la función autocompletar sugerencias de su base de datos en tiempo real.

Pásate por Google en la Consola para Desarrolladores web y crear un nuevo proyecto.

Create a new project

Una ventana emergente aparecerá pidiéndole que proporcione un nombre para su proyecto. El uso de un nombre que le ayudará más adelante a identificar el proyecto y, a continuación, haga clic en el botón crear.

La ventana emergente desaparecerá, espere unos segundos y automáticamente será redirigido a su nuevo proyecto.

Ahora, usted verá la lista de los populares APIs de Google que puede habilitar para su proyecto. Usted necesita encontrar y haga clic en “Google Places API de Servicio Web’.

Select Google Places API

Esto le llevará a una página de resumen que explica cómo esta API funciona. Usted necesita para hacer clic en el enlace Activar para continuar.

Enable Places API

La consola del desarrollador le permiten ahora a los de Google Places API para su proyecto.

Sin embargo, todavía se necesitan credenciales de uso de la API en su sitio web. Así que adelante y haga clic en crear credenciales botón para continuar.

Get API credentials

En la siguiente pantalla, usted necesita para hacer clic en ‘Qué credenciales necesito?”.

What credentials do I need

La consola del desarrollador va a mostrar ahora la clave de la API. Usted necesita copiar esta clave y péguelo en virtud de la configuración del plugin en su sitio web de WordPress.

Copy API Key

Usted todavía necesita para permitir que otro API de Google a los Desarrolladores del proyecto. Haga clic en la biblioteca de la Consola de Desarrolladores de Google y, a continuación, haga clic en ‘Google Maps JavaScript API’.

Google Maps JavaScript API

Esto te llevará a la API de vista general de la página donde usted necesita para hacer clic en la opción ‘Habilitar’ enlace para continuar.

Enable JavaScript API

Esta API no se requiere una clave de la API, por lo que ahora son buenos para ir.

Habilitar Autocompletar Direcciones en WordPress Campos de Formulario

Usted puede agregar la función autocompletar de la dirección de función para cualquier campo de formulario creado por el formulario de WordPress plugin de constructor.

Vamos a utilizar WPForms en este tutorial. Sin embargo, estas instrucciones de trabajo, no importa qué plugin de formulario de contacto que está utilizando.

En primer lugar usted necesita para crear un formulario que tiene un campo de dirección o un conjunto de campos de dirección.

Una vez que esté hecho, añadir a su sitio web como lo haría normalmente.

A continuación, vaya a la página o entrada donde has añadido a su forma. Usted necesita a la derecha haga clic en el campo de la dirección y seleccione ‘Inspeccionar’ desde el menú del navegador.

Inspect form address field

Podrá ver el nombre, ID, y los valores de la clase CSS para el campo de la dirección.

Por ejemplo, en esta captura de pantalla de nuestro formulario nombre del valor es wpforms[campos][9][1], el valor de ID es wpforms-352-field_9, y la clase css es wpforms-de campo-dirección-1.

Usted necesita una copia de uno de estos valores y pegarlo en la página de configuración del plugin.

Si quieres apuntar a múltiples campos de varias formas, a continuación, puede agregar una coma y añadir otro valor.

Target address fields in your form

No te olvides de hacer clic en el botón guardar para almacenar los cambios.

Eso es todo, ahora puedes visitar su página de formulario y trate de introducir una dirección. El campo de formulario se iniciará automáticamente mostrando sugerencias de uso de Google places y Google Maps.

Address autocomplete preview

Esperamos que este artículo te haya ayudado a aprender cómo agregar autocompletar para los campos de dirección en WordPress. Puede que también desee para ver nuestra lista de 24 debe tener plugins de WordPress para sitios web de negocios.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para WordPress tutoriales en vídeo. También puedes encontrarnos en Twitter y Facebook.

Fuentes