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 mientras escriben. En este artículo, le mostraremos cómo agregar autocompletar para campos de dirección en WordPress usando la API de Google Places.

Cómo agregar autocompletar a campos de direcciones en WordPress

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

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

Tras la activación, debe visitar Configuración »Autocompletar de Google página para configurar los ajustes del complemento.

Página de configuración del complemento 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 su base de datos en tiempo real.

Dirígete al sitio web de la Consola para desarrolladores de Google y crea un nuevo proyecto.

Crea un nuevo proyecto

Aparecerá una ventana emergente pidiéndole que proporcione un nombre para su proyecto. Utilice un nombre que le ayude a identificar más adelante el proyecto 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 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á credenciales para usar la API en su sitio web. Así que 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 de desarrollo ahora le mostrará la clave API. Debe copiar esta clave y pegarla en la configuración del complemento en su sitio web de WordPress.

Copiar clave de API

Aún necesita habilitar otra API en su proyecto de desarrolladores de Google. Haga clic en la biblioteca en Google Developer Console y 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.

Habilitar la API de JavaScript

Esta API no necesita una clave de API adicional, por lo que ahora está listo para comenzar.

Habilitar la dirección de autocompletar en los campos de formulario de WordPress

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

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

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

Una vez que haya terminado, agregue este formulario a su sitio web como lo haría normalmente.

A continuación, vaya a la publicación o página donde agregó su 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á los valores de nombre, ID y clase CSS para el campo de dirección.

Por ejemplo, en esta captura de pantalla, el valor del nombre de nuestro formulario es wpforms[fields][9][address1], El valor de ID es wpforms-352-field_9 y la clase css es wpforms-field-address-address1.

Debe copiar solo uno de estos valores y pegarlo en la página de configuración del complemento.

Si desea apuntar a varios campos en varios formularios, puede agregar una coma y agregar otro valor.

Campos de dirección de destino en su formulario

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

Eso es todo, ahora puede visitar la página de su 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 de autocompletar 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 24 complementos de WordPress que deben tener para sitios web comerciales.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba