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 una dirección de las sugerencias generadas en tiempo real a medida que se ingresan. En este artículo, le mostraremos cómo agregar autocompletar para campos de dirección en WordPress usando la API de Google Places.

Video tutorial
Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo. Lo primero que debe hacer es instalar y activar el plugin Autocompletar de direcciones con el plugin Api de Google Place. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe visitar Configuración »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 permite que su sitio web se conecte a Google Maps y obtenga sugerencias de autocompletar de su base de datos en tiempo real. Vaya al sitio web de la Consola para desarrolladores de Google y cree 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 más adelante, 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».
Esto lo llevará a una página de descripción general que explica cómo funciona esta API. Debe hacer clic en el enlace Activar para continuar.
Developer Console 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.
En la siguiente pantalla, debe hacer clic en «¿Qué credenciales necesito?» botón.
Developer Console ahora le mostrará la clave API. Debe copiar esta clave y pegarla en la configuración del plugin en su sitio web de WordPress.
Aún necesita habilitar otra API en su proyecto de desarrolladores de Google. Haga clic en la biblioteca en Google Developer Console, luego en «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 «Activar» para continuar.
Esta API no necesita una clave de API adicional, por lo que está listo para comenzar.
Habilitar la dirección de autocompletar en los campos de formulario de WordPress
Puede agregar una 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 utilice. Primero debe crear un formulario que contenga 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, navegue hasta 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á el nombre de la clase CSS, el ID y los valores del campo de dirección. Por ejemplo, en esta captura de pantalla, nuestro valor de nombre de formulario es wpforms[fields][9][address1], El valor del 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 plugin. Si desea apuntar a múltiples campos en múltiples formas, puede simplemente agregar una coma y agregar otro valor.
No olvide hacer clic en el botón Guardar para guardar 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.
Esperamos que este artículo le haya ayudado a aprender cómo agregar autocompletar para campos de direcciones en WordPress. También puede consultar nuestra lista de 24 plugins de WordPress imprescindibles para sitios web comerciales. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.