Cómo agregar autocompletar para campos de dirección en WordPress

Recientemente, uno de nuestros usuarios nos preguntó cómo agregar autocompletar para campos de dirección en formularios de WordPress. Autocompletar permite a los usuarios seleccionar rápidamente la dirección de las sugerencias generadas en tiempo real a medida que escriben. En este artículo, le mostraremos cómo agregar autocompletar para campos de dirección en WordPress usando la API de Google Places.

Si no le gusta el video o necesita más instrucciones, siga leyendo.

Lo primero que debe hacer es instalar y activar el archivo. Autocompletar direcciones con la API de Google Place conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe visitar Configuración »Autocompletar de Google página para configurar los ajustes del plugin.

Página de configuración del plugin de campo de dirección de autocompletar

Se le pedirá que ingrese la clave API de Google Places. Esta clave API permite que su sitio web se conecte con Google Maps y recupere sugerencias de autocompletar de la base de datos en tiempo real.

Ir Consola para desarrolladores de Google sitio web y crear un nuevo proyecto.

Crea un nuevo proyecto

Aparecerá una ventana emergente que le pedirá que proporcione un nombre para su proyecto. Utilice un nombre que le ayude a identificar el proyecto más adelante y luego haga clic en el botón Crear.

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

Ahora verá la lista de API de Google populares que puede habilitar para su proyecto. Debe ubicar y hacer clic en «Servicio web de API de Google Places».

Seleccione la API de Google Places.

Esto lo llevará a una página de descripción general que explica cómo funciona esta API. Debe hacer clic en el enlace Habilitar para continuar.

Habilitar la API de Places

La consola de desarrollo ahora habilitará la API de Google Places para su proyecto.

Sin embargo, aún necesitará las credenciales para usar la API en su sitio web. Luego continúe y haga clic en el botón Crear credenciales para continuar.

Obtenga credenciales de API

En la siguiente pantalla, debe hacer clic en «¿Qué credenciales necesito?» botón.

Que credenciales necesito

La consola del desarrollador ahora le mostrará la clave API. Debe copiar esta clave y pegarla en la configuración del plugin en su sitio web de WordPress.

Copiar clave API

Aún necesita habilitar otra API en su proyecto de desarrolladores de Google. Haga clic en la biblioteca en Google Developer Console, luego haga clic en «API de JavaScript de Google Maps».

API de JavaScript de Google Maps

Esto lo llevará a la página de descripción general de la API, donde debe hacer clic en el enlace «Habilitar» para continuar.

Habilite la API de JavaScript

Esta API no necesita una clave de API adicional, por lo que ahora puede comenzar.

Habilitar la compleción automática de direcciones en los campos del formulario de WordPress

Puede agregar la función de autocompletar dirección a cualquier campo de formulario creado por cualquier plugin de creación de formularios de WordPress.

Usaremos WPForms en este tutorial. Sin embargo, estas instrucciones funcionarán independientemente del plugin de formulario de contacto que esté utilizando.

Primero debe crear un formulario que tenga un campo de dirección o una serie de campos de dirección.

Una vez hecho esto, agregue este módulo a su sitio web como lo haría normalmente.

A continuación, vaya a la publicación o página donde agregó el formulario. Debe hacer clic con el botón derecho en el campo de dirección y seleccionar «Inspeccionar» en el menú del navegador.

Inspeccionar el campo de dirección del formulario

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

Por ejemplo, en esta captura de pantalla, el valor de nuestro nombre de módulo es wpforms[fields][9][address1], El valor del ID es wpforms-352-field_9y la clase CSS es wpforms-field-address-address1.

Solo necesita copiar uno de estos valores y pegarlo en la página de configuración del plugin.

Si desea apuntar a múltiples campos en múltiples formas, puede simplemente agregar una coma y agregar otro valor.

Campos de dirección de destino en el formulario

No olvide hacer clic en el botón Guardar para guardar sus cambios.

Eso es todo, ahora puede visitar la página del formulario e intentar ingresar una dirección. El campo del formulario comenzará a mostrar sugerencias automáticamente usando Google Places y Google Maps.

Vista previa del autocompletado de direcciones

Esperamos que este artículo le haya ayudado a aprender cómo agregar autocompletar para campos de direcciones en WordPress. Es posible que también desee ver nuestra lista de plugins de 24 WordPress para sitios web comerciales.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *