¿Quieres crear un formulario de direcciones autocompletable en WordPress?
Un formulario de dirección autocompletado es la forma moderna de ahorrar tiempo a los clientes sugiriendo automáticamente su dirección mientras rellenan un formulario.
En cuanto un cliente empieza a escribir su dirección en el campo de dirección, se muestran las opciones para seleccionar y rellenar su dirección desde las ubicaciones de Google.
Por defecto, WordPress no viene con la opción de autocompletar la dirección. Necesitas usar un plugin como WPForms para crear un formulario de contacto y habilitar la opción de autocompletar para el campo de dirección.
En este artículo, le mostraremos cómo crear un formulario de dirección autocompletable en WordPress.
Crear un formulario de dirección autocompletable en WordPress
A continuación, encontrará la guía paso a paso para añadir el formulario de autocompletar direcciones a su sitio web WordPress.
Paso 1. Instalar y activar WPForms Instale y active WPForms Pluign
Lo primero que tienes que hacer es instalar y activar el plugin WPForms.
WPForms facilita a cualquiera la creación rápida y sencilla de cualquier tipo de formulario para su sitio web.
Ya sea que esté obteniendo nuevos clientes potenciales o tomando pagos de clientes, este plugin tendrá el formulario que necesita para crecer. Por eso es nuestra elecció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 debe dar es registrarse en WPForms e instalar el plugin en su sitio. Para más detalles, debería consultar nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, deberá introducir una clave de licencia para utilizar todas las funciones del plugin WPForms.
Puede encontrar la clave de licencia en su cuenta WPForms.
Haz clic en el botón Verificar clave y verás un mensaje de éxito.
Segundo paso Instale y active el complemento de geolocalización
A continuación, debe visitar la página WPForms ” Addons. Desde allí, puede instalar y activar el Addon de Geolocalización.
Este complemento le ayudará a activar la opción de autocompletar direcciones en su formulario de contacto.
Paso 3. Habilitar la opción de autorrelleno de direcciones y añadir la clave API de Google Places
Debe visitar la página WPForms ” Configuración. Desde allí, puede ir a la pestaña Geolocalización desde el menú de navegación superior.
En la sección Proveedor de lugares, puedes seleccionar Google Places API y marcar la opción de ubicación actual que aparece a continuación.
A continuación, visita Google Cloud Platform para obtener la clave API de Google Places.
[alert style=”info”]Note: Make sure that you enable billing on your Google account to use the address autofill feature.[/alert]
En esta página, debe hacer clic en la opción Habilitar API y servicios.
Esto te mostrará la lista completa de las API y los servicios de Google. Debe habilitar las siguientes API:
- API de Google Places
- API JavaScript de Google Maps
- API de geocodificación
Si no encuentra una API, puede escribir el nombre en el cuadro de búsqueda y aparecerá a continuación.
Ahora vaya a API y Servicios ” Credenciales. Desde allí, debe hacer clic en el enlace + Crear credenciales y, a continuación, en la opción Clave de API.
Se abrirá una ventana emergente y podrá ver la clave API. Haga clic en la opción Restringir clave para controlar el acceso al uso de la clave API.
En la sección Restricciones de la aplicación, debe seleccionar las referencias HTTP (sitios web).
En la sección Restricciones de API, marque la opción Restringir clave y seleccione las 3 API que activó anteriormente.
Pulse el botón Guardar para continuar.
Su clave API está lista. Copie la clave API de esta página.
Ahora vuelva al área de administración de WordPress y pegue la Clave API en la página de configuración de Geolocalización.
Haga clic en el botón Guardar configuración.
Paso 4. Crear un nuevo formulario de contacto Crear un nuevo formulario de contacto
Una vez que haya finalizado la configuración del complemento de geolocalización, deberá crear un nuevo formulario de contacto. También puede utilizar la opción “activar la dirección de autocompletar” en los formularios creados anteriormente.
Para crear un nuevo formulario, vaya a WPForms ” Agregar Nuevo. Se abrirá el constructor WPForms en la pantalla, y se puede ver la forma incorporada varias plantillas.
Comience por introducir un nombre para su nuevo formulario y haga clic en la plantilla Formulario de contacto simple.
Se iniciará la plantilla del formulario de contacto. Puedes ver los campos en el lado izquierdo y la vista previa del formulario en el lado derecho de la pantalla.
En la sección Fancy Fields, encontrarás el campo Dirección. Solo tienes que arrastrar y soltar el campo Dirección en la vista previa del formulario, a la derecha.
Ahora, haga clic en este campo de dirección en la sección de vista previa del formulario, y verá las opciones de edición en la parte izquierda.
En las Opciones Avanzadas, debe marcar la opción Activar Autocompletar Dirección.
Haga clic en el botón Guardar de la esquina superior derecha de su pantalla y salga del constructor de WPForms.
Paso 5. Añada el formulario de autocompletado de direcciones a su página de WordPress
Ahora que su formulario de autocompletado de direcciones está listo, puede visitar la página Páginas ” Añadir nueva desde el área de administración de WordPress.
Comience por añadir un título a su página y haga clic en el icono más. Ahora puede buscar WPForms bloque personalizado y haga clic en él.
En el menú desplegable, seleccione el formulario de autocompletar direcciones.
Haga clic en el botón Publicar y visite su sitio web para ver el formulario de contacto con el campo de dirección autocompletado en acción. Aquí hay un formulario de muestra que hemos creado donde se puede ver que a medida que escribimos la dirección, se autocompletan las direcciones disponibles.
¡Y eso es todo! Ahora ha aprendido con éxito cómo crear formulario de dirección de autocompletar en WordPress.
También puede consultar nuestra guía sobre cómo añadir un formulario de reserva personalizado a su sitio de WordPress.
Además, puede ayudarle a crear un formulario de reserva de citas en línea y añadir el campo de dirección de autocompletar para conseguir inscripciones 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. Este post 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 web.
Thanks for this! Do you know if it’s possible to add a similar autocomplete function for a single line text field with custom suggestions?
Hey John, it’s possible to enable address autocomplete on Single Line Text fields and can be turned on in the ‘Advanced’ tab. If you want to use custom suggestions that would require you to write code. Hope that helps!