How to add autocomplete to address fields in WordPress

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 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.

Cómo agregar autocompletar a campos de direcciones en WordPress

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.
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 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.
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 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».
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 Activar para continuar.
Activar la API de Places
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.
Obtenga credenciales de API
En la siguiente pantalla, debe hacer clic en «¿Qué credenciales necesito?» botón.
Que información necesito
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.
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 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 «Activar» para continuar.
Habilitar la API de JavaScript
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.
Inspeccione el campo de dirección del formulario
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.
Campos de dirección de destino en su formulario
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.
Descripción general de la finalización automática de direcciones
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.

Leave a Reply