¿Quieres crear un formulario de dirección con autocompletado en WordPress?
Un formulario de dirección con autocompletado es la forma moderna de ahorrar tiempo a los clientes al sugerir automáticamente su dirección mientras completan un formulario.
Tan pronto como un cliente comienza a escribir su dirección en el campo de dirección, se muestran las opciones para seleccionar y completar su dirección de las ubicaciones de Google.
Por defecto, WordPress no viene con una opción de dirección con autocompletado. Necesitas usar un plugin como WPForms para crear un formulario de contacto y habilitar la opción de dirección con autocompletado para el campo de dirección.
En este artículo, te mostraremos cómo crear un formulario de dirección con autocompletado en WordPress.
Crear un formulario de dirección con autocompletado en WordPress
A continuación, encontrarás la guía paso a paso para agregar un formulario de dirección con autocompletado a tu sitio web de WordPress.
Paso 1. Instalar y activar el plugin WPForms
Lo primero que debes hacer es instalar y activar el plugin WPForms.
WPForms facilita que cualquiera cree rápida y fácilmente cualquier tipo de formulario para su sitio web.
Ya sea que estés obteniendo nuevos clientes potenciales o recibiendo pagos de clientes, este plugin tendrá el formulario que necesitas para crecer. Es por eso que es nuestra opción número 1 cuando se trata de crear formularios en WordPress. Lo usamos en nuestro propio sitio para crear cualquier tipo de formulario que necesitemos, incluyendo contacto, inicio de sesión, registro y más.
El primer paso que debes seguir es registrarte en WPForms e instalar el plugin en tu sitio. Para más detalles, deberías consultar nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas ingresar una clave de licencia para usar todas las funciones del plugin WPForms.
Puedes encontrar la clave de licencia en tu cuenta de WPForms.
Haz clic en el botón Verificar Clave y verás un mensaje de éxito.
Paso 2. Instalar y Activar el Complemento de Geolocalización
A continuación, debes visitar la página WPForms » Complementos. Desde allí, puedes instalar y activar el Complemento de Geolocalización.
Este complemento te ayudará a habilitar la opción de autocompletar direcciones en tu formulario de contacto.
Paso 3. Habilitar la Opción de Autocompletar Direcciones y Agregar la Clave de la API de Google Places
Debes visitar la página WPForms » Ajustes. Desde allí, puedes ir a la pestaña Geolocalización en el menú de navegación superior.
En la sección Proveedor de Lugares, puedes seleccionar API de Google Places y marcar la opción de ubicación actual debajo.
A continuación, visita la Plataforma de Google Cloud para obtener la clave de API de Google Places.
En esta página, debes hacer clic en la opción Habilitar API y Servicios.
Esto te mostrará la lista completa de las API y Servicios de Google. Necesitas habilitar las siguientes API:
- API de Google Places
- API de JavaScript de Google Maps
- API de Geocodificación
Si no encuentras una API, puedes escribir el nombre en el cuadro de búsqueda y aparecerá debajo.
Ahora ve a API y servicios » Credenciales. Desde allí, debes hacer clic en el enlace + Crear credenciales y luego hacer clic en la opción Clave de API.
Se abrirá una ventana emergente y podrás ver la clave de la API. Haz clic en la opción Restringir clave para controlar el uso de la clave de la API.
En la sección Restricciones de la aplicación, debes seleccionar Referidores HTTP (sitios web).
En la sección Restricciones de la API, marca la opción Restringir clave y selecciona las 3 APIs que habilitaste previamente.
Haz clic en el botón Guardar para continuar.
Tu clave de API está lista. Copia la clave de API de esta página.
Ahora regresa al área de administración de WordPress y pega la Clave de API en la página de configuración de Geolocation.
Haz clic en el botón Guardar configuración.
Paso 4. Crear un nuevo formulario de contacto
Una vez que la configuración de tu complemento de Geolocation esté finalizada, deberás crear un nuevo formulario de contacto. También puedes usar la opción “habilitar la autocompletación de direcciones” en formularios creados previamente.
Para crear un nuevo formulario, ve a WPForms » Agregar nuevo. Se abrirá el constructor de WPForms en tu pantalla y podrás ver varias plantillas de formularios integradas.
Comienza ingresando un nombre para tu nuevo formulario y haz clic en la plantilla Formulario de contacto simple.
Se iniciará la plantilla del formulario de contacto. Podrás ver los campos en el lado izquierdo y la vista previa del formulario en el lado derecho de tu pantalla.
En la sección Campos avanzados, encontrarás el campo Dirección. Simplemente arrastra y suelta el campo Dirección en la vista previa de tu formulario en el lado derecho.
Ahora, haz clic en este campo de dirección en la sección de vista previa del formulario y verás las opciones de edición en el lado izquierdo.
En las Opciones avanzadas, deberás marcar la opción Habilitar autocompletado de dirección.
Haz clic en el botón Guardar en la esquina superior derecha de tu pantalla y sal del constructor de WPForms.
Paso 5. Agregar el formulario de autocompletado de dirección a tu página de WordPress
Ahora que tu formulario de autocompletado de dirección está listo, puedes visitar la página Páginas » Agregar nueva desde tu área de administración de WordPress.
Empieza agregando un título a tu página y haz clic en el ícono de más. Ahora puedes buscar el bloque personalizado de WPForms y hacer clic en él.
En el menú desplegable, selecciona el formulario de dirección con autocompletado.
Haz clic en el botón Publicar y visita tu sitio web para ver el formulario de contacto con el campo de dirección con autocompletado en acción. Aquí tienes un ejemplo de formulario que creamos donde puedes ver cómo, a medida que escribimos la dirección, se autocompletan las direcciones disponibles.
¡Y eso es todo! Ahora has aprendido con éxito cómo crear un formulario de dirección con autocompletado en WordPress.
También te puede interesar consultar nuestra guía sobre cómo agregar un formulario de reserva personalizado a tu sitio de WordPress.
Esto puede ayudarte aún más a crear un formulario de reserva de citas en línea y agregar el campo de dirección con autocompletado para obtener registros de usuarios sobre la marcha.
O, también puedes consultar nuestra guía sobre cómo crear un formulario de reserva para una agencia de viajes en WordPress. Esta publicación te ayudará a crear un formulario de reserva de viajes para recopilar la información de reserva y contacto de tus clientes en tu sitio.
¡Gracias por esto! ¿Sabes si es posible agregar una función de autocompletado similar para un campo de texto de una sola línea con sugerencias personalizadas?
Hola John, es posible habilitar el autocompletado de direcciones en campos de texto de una sola línea y se puede activar en la pestaña 'Avanzado'. Si quieres usar sugerencias personalizadas, eso requeriría que escribas código. ¡Espero que eso ayude!