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 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.
Videotutorial
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Lo primero que debe hacer es instalar y activar el Autocompletar dirección usando Google Place Api enchufar. 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.
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 autocompletado de su base de datos en tiempo real.
Dirigirse a Consola para desarrolladores de Google sitio web y crear un nuevo proyecto.
Aparecerá una ventana emergente pidiéndole que proporcione un nombre para su proyecto. Utilice un nombre que le ayude a identificar el proyecto más tarde y luego haga clic en el botón crear.
La ventana emergente desaparecerá, espera unos segundos y serás redirigido automáticamente a tu nuevo proyecto.
Ahora verá la lista de API populares de Google que puede habilitar para su proyecto. Debe ubicar y hacer clic en ‘Servicio web 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.
La consola del desarrollador 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 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 le 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 Google Developers. Haga clic en la biblioteca en Google Developer Console y luego haga clic en ‘Google Maps JavaScript API’.
Esto lo llevará a la página de descripción general de la API, donde debe hacer clic en el enlace ‘Habilitar’ para continuar.
Esta API no necesita una clave de API adicional, por lo que ahora está listo para comenzar.
Habilitación de 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.
estaremos usando WPForms en este tutorial. Sin embargo, estas instrucciones funcionarán sin importar qué complemento de formulario de contacto 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’ en el menú del navegador.
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 identificación es wpforms-352-field_9y 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, simplemente 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 su página de formulario e intentar ingresar una dirección. El campo del formulario comenzará a mostrar automáticamente sugerencias utilizando lugares de Google y Google Maps.
Esperamos que este artículo le haya ayudado a aprender cómo agregar autocompletar para campos de dirección en WordPress. Es posible que también desee ver nuestra lista de 24 complementos de WordPress que debe tener para sitios web comerciales.
.