Cómo agregar autocompletado para los campos de dirección en WordPress

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

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Lo primero que debe hacer es instalar y activar el autocompletado de direcciones usando el complemento de 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 Ajustes »Autocompletar de Google página para configurar los ajustes del plugin.

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

Dirígete al sitio web de Google Developer Console y crea un nuevo proyecto.

Aparecerá una ventana emergente pidiéndole que proporcione un nombre para su proyecto. Use un nombre que le ayude a identificar 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 localizar y hacer clic en 'Servicio web del API de Google Places'.

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

La consola de desarrollador ahora habilitará la API de Google Places para tu proyecto.

Sin embargo, aún necesitará credenciales para usar la API en su sitio web. Así que adelante, haga clic en el botón Crear credenciales para continuar..

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

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

Aún debe habilitar otra API en su proyecto de desarrolladores de Google. Haga clic en la biblioteca en la Consola de desarrollador de Google y luego haga clic en 'API de JavaScript de Google Maps'.

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

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

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

Puede agregar la función de dirección de autocompletado a cualquier campo de formulario creado por cualquier complemento del creador 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 derecho en el campo de dirección y seleccionar 'Inspeccionar' desde el menú del navegador.

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

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

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

Si desea apuntar a múltiples campos en múltiples formularios, entonces solo puede agregar una coma y agregar otro valor.

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á automáticamente a mostrar sugerencias utilizando Google Places y Google Maps..

Esperamos que este artículo le haya ayudado a aprender cómo agregar autocompletar para los campos de direcciones en WordPress. También puede querer ver nuestra lista de 24 que deben tener complementos de WordPress para sitios web de negocios.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..