¿Cómo agregar campos de autocompletado de direcciones en un formulario de WordPress?

¿Se pregunta cómo agregar un formulario de WordPress de autocompletado de direcciones a su sitio web? Entonces, este artículo es justo lo que necesita en este momento.

Si su formulario de WordPress tiene un campo de dirección, le sugerimos que le agregue la función de autocompletar. De esta manera, es más fácil para sus usuarios completar el campo de dirección y enviar el formulario correctamente.

Es por eso que hemos preparado una guía detallada sobre cómo crear un formulario de WordPress de autocompletado de direcciones. Entonces, lee hasta el final.

Pero antes del tutorial, analicemos los beneficios de la función de autocompletado de direcciones y la mejor manera de agregarla a su formulario.

¿Cómo es útil la opción de autocompletar direcciones en un formulario en línea?

Simplemente puede usar un campo de dirección normal para cualquier formulario de WordPress. Entonces, ¿por qué agregarle la opción de autocompletar direcciones?

Bueno, aquí hay algunas formas significativas en que la opción de autocompletar direcciones es útil:

• El campo de autocompletado de direcciones sugiere automáticamente lugares a sus usuarios en función de su entrada.
• Los usuarios pueden seleccionar direcciones precisas de la lista de sugerencias de direcciones disponibles.
• Dado que los usuarios no tienen que escribir la dirección completa, pueden completar el formulario relativamente más rápido.
• La función de autocompletar hace que el llenado de formularios sea fácil y rápido. Esto puede ayudar a aumentar los envíos de formularios exitosos y disminuir el abandono de formularios.

Por lo tanto, es aconsejable incluir un campo de dirección de autocompletar en sus formularios.

Sin embargo, WordPress no ofrece esta característica por defecto. Entonces, ¿cuál es tu mejor alternativa?

Cubriremos la mejor manera de agregar un campo de autocompletado de dirección en la siguiente sección.

La mejor manera de crear una dirección Autocompletar formulario de WordPress

Dado que WordPress no permite agregar la función de autocompletado de direcciones de forma predeterminada, deberá confiar en los complementos.

El complemento de WordPress correcto le permitirá agregar la función a su formulario sin problemas. Y uno de esos complementos es Everest Forms.

El popular complemento de creación de formularios de arrastrar y soltar puede ser el complemento perfecto para su sitio web de WordPress.

¡Esta poderosa herramienta lo hace todo! Le permite crear formularios personalizados sin tocar una sola línea de código.

Puede usar sus más de 20 campos de formulario para crear formularios de contacto, formularios de solicitud de permiso, formularios de pedido o cualquier formulario que necesite.

Además, ofrece un campo de Dirección donde puede habilitar la opción de autocompletar fácilmente. Por lo tanto, recomendamos el complemento Everest Forms como la mejor manera de equipar sus formularios con esta función.

¿Cómo agregar campos de autocompletado de direcciones en un formulario de WordPress?

En este tutorial, hemos utilizado Everest Forms para demostrar el proceso de creación de un formulario de WordPress de autocompletado de direcciones.

Siga estos 7 sencillos pasos para agregar la opción de autocompletado de direcciones de Google de WordPress en su formulario.

Paso 1: Instale y active Everest Forms Pro

Comience instalando y activando el complemento Everest Forms Pro en su sitio. Esta versión premium funciona sobre el complemento básico gratuito de Everest Forms.

Por lo tanto, deberá configurar las versiones gratuita y premium del complemento para que funcione la función de autocompletado de direcciones.

Tenemos una guía separada sobre cómo configurar correctamente Everest Forms Pro en su sitio web. Entonces, verifique eso si necesita ayuda para instalar y activar el complemento.

Paso 2: instalar y activar el complemento de geolocalización

Si configuró Everest Forms Pro correctamente, debería poder acceder a todos los complementos disponibles. Recuerde que los complementos a los que tiene acceso dependen del plan que haya comprado.

Entonces, abra Everest Forms >> Add-ons en su panel de WordPress.

Desplácese hacia abajo para encontrar el complemento Geolocalización y haga clic en Instalar complemento . Para completar la instalación, presione el botón Activar después.

Esto configurará el complemento para que lo use en sus formularios de WordPress.

Paso 3: obtenga la clave API de Google Console

El tercer paso es obtener la clave API de Google Console. Esto lo ayudará a conectar el complemento Everest Forms a Google Console.

Primero, visite el panel de control de la consola de Google. Debe iniciar sesión a través de su cuenta de Google para acceder a este panel.

Luego, seleccione su proyecto desde la parte superior del tablero.

Si aún no tiene un proyecto, puede crear uno haciendo clic en Nuevo proyecto . A continuación, asigne un nombre a su proyecto y presione Crear .

Después de elegir el proyecto, llegará a la página de API y servicios para el proyecto.

Suponga que no es redirigido automáticamente a esta página. En ese caso, puede abrirlo anualmente desde el menú de navegación en la parte superior izquierda.

Presione el menú y abra API y servicios >> API y servicios habilitados .

Aquí, haz clic en +HABILITAR APIS Y SERVICIOS .

En la biblioteca de API, busque la API de lugares y actívela .

Nota: Para habilitar correctamente la API, debe tener una cuenta de facturación. Por lo tanto, habilite la facturación para su Google Cloud Console antes de continuar.

Una vez que haya habilitado la API, vaya a API y servicios >> Credenciales . Ahora, haga clic en +Crear credenciales y luego seleccione Clave API .

Esto genera una nueva clave de API para usted. Pero antes de copiar la clave API, debe agregarle algunas restricciones. Para ello, haga clic en Editar clave .

Primero, debe establecer una restricción de aplicación . Esto le permite limitar qué sitios web, direcciones IP o aplicaciones pueden usar la clave API. En nuestro caso, elijamos Sitios web .

A continuación, agregue el sitio web donde la clave API será válida y presione Listo . Puede agregar varios sitios web si lo necesita.

Después de eso, debe establecer las Restricciones de la API eligiendo el botón de opción Restringir clave . Esto le permite a su clave saber a qué API habilitadas puede llamar.

Como solo necesitamos la API de Places, elegímosla del menú desplegable. Puede habilitar y agregar más API como Maps JavaScript API según los requisitos.

Finalmente, presione el botón Guardar .

Todo lo que tiene que hacer ahora es copiar la clave para su uso posterior. Manténgalo seguro ya que lo necesitará para el siguiente paso.

Paso 4: agregue la clave API a la configuración de geolocalización

De vuelta en su panel de WordPress, vaya a Everest Forms >> Configuración >> Geolocalización .

Pegue la clave API que copió en el campo Clave API de Google Places . Posteriormente, presione el botón Guardar cambios .

Esto completa la conexión entre la API de Google Places y Everest Forms.

Hay una opción más, Ubicación actual , en la configuración de Geolocalización . Cuando activa esta opción, sus formularios detectan y completan automáticamente la ubicación actual del usuario en el campo Dirección .

Es completamente opcional, por lo que si lo enciende o no depende de sus requisitos.

Paso 5: cree un nuevo formulario con campo de dirección

Ha conectado con éxito Everest Forms a la API de Google Places. Sin embargo, aún necesita el formulario donde se aplica la función de autocompletar dirección.

Para eso, debe crear un nuevo formulario de WordPress con el campo Dirección .

La pregunta es: ¿qué tipo de formulario haces? Bueno, ¡depende completamente de ti!

Lo mejor de Everest Forms es que te permite crear cualquier tipo de formulario que necesites. Formularios de contacto, formularios de encuestas, formularios de solicitud de empleo, formularios de reserva, etc.

Por lo tanto, vaya a Everest Forms >> Agregar nuevo .

Everest Forms ofrece varias plantillas prediseñadas para varios formularios. Por lo tanto, puede personalizar uno de ellos si tiene poco tiempo.

¡Pero diseñar un formulario desde cero es igual de fácil! Simplemente arrastre y suelte los campos requeridos y personalícelos.

Crearemos un formulario de contacto simple con un campo de dirección desde cero para esta guía.

Entonces, haga clic en Comenzar desde cero . Luego, ingrese el título del formulario y presione Continuar .

Esto lo lleva al generador de formularios. Como puede ver, todos los campos del formulario están agrupados a la izquierda. Puede arrastrarlos y soltarlos en las filas del formulario a la derecha.

Por lo tanto, agregue los campos que necesite en el formulario, como Nombre , Correo electrónico , Asunto , Mensaje y, lo que es más importante, Dirección .

Cuando el formulario de WordPress de autocompletado de direcciones esté completo, presione el botón Guardar en la parte superior para guardar su nuevo formulario.

Paso 6: habilite el autocompletado de direcciones para el campo de dirección

Con cada campo, obtienes muchas opciones de personalización. Del mismo modo, obtiene varias opciones para el campo Dirección , una de ellas es la función de autocompletado de direcciones.

Aunque aquí nos centramos en el campo Dirección , asegúrese de personalizar también los otros campos.

Haga clic en el campo que desea editar; sus opciones de personalización se abrirán a la izquierda.

Desde aquí, puede cambiar el campo Etiqueta , Descripción , Visibilidad de campo , etc. También puede habilitar Requerido , Habilitar información sobre herramientas , Ocultar etiqueta y agregar Clases CSS .

Además, también podrá establecer una lógica condicional para los campos individuales.

Pero volvamos a nuestro campo destacado aquí. Al hacer clic en el campo Dirección , las Opciones de campo muestran opciones similares a las que discutimos anteriormente.

Sin embargo, las Opciones avanzadas incluyen algunas funciones seleccionadas para el campo Dirección .

Por ejemplo, puede cambiar el marcador de posición y el valor predeterminado para la línea de dirección 1 , la línea de dirección 2 , el país , etc. Además, puede elegir los países que desea que estén disponibles para los usuarios de la lista de países predeterminados .

Lo más importante es que puede habilitar la función de autocompletar direcciones simplemente marcando la casilla de verificación.

Presiona el botón Guardar y tu campo Dirección sugerirá lugares automáticamente a los usuarios que completen el formulario.

Paso 7: Muestre el formulario de WordPress de autocompletado de direcciones en su sitio

¡Felicidades! ¡Estás en el paso final de este tutorial!

Dado que el formulario de autocompletado de direcciones de WordPress está listo, debe agregarlo a la interfaz de su sitio web.

Everest Forms le permite hacer eso en unos simples pasos.

Comience abriendo la página o publicación donde desea agregar el formulario de WordPress.

Una vez que esté en el editor de Gutenberg, seleccione el botón de inserción de bloque ( + ).

Busque el bloque Everest Forms y agréguelo a la página/publicación haciendo clic en él.

A continuación, elija el formulario con el campo de autocompletado de dirección del menú desplegable. Esto agrega automáticamente el formulario a la página/publicación.

Finalmente, presione el botón Actualizar en la parte superior.

También puede agregar el formulario a una página/publicación completamente nueva. Simplemente siga los mismos pasos y presione el botón Publicar al final. ¡Y tu estas listo!

El formulario de autocompletado de direcciones de WordPress ahora es accesible desde el front-end para sus usuarios.

Terminando

Como ya puede ver, crear un formulario de autocompletado de direcciones de Google para WordPress es muy fácil. Especialmente cuando tienes a mano el complemento Everest Forms.

Este increíble complemento le permite conectar sus formularios a Google Console rápidamente. Por lo tanto, sus usuarios pueden completar fácilmente el campo Dirección utilizando la función de autocompletar.

¿Pero sabías? Everest Forms tiene mucho más que ofrecer.

Puede usarlo para personalizar plantillas de correo electrónico, programar envíos de formularios, completar automáticamente campos de formulario y más.

Lea todo sobre este plugin en nuestro blog. Consulte nuestro canal de YouTube para obtener videos tutoriales sencillos si es un aprendiz visual.

Además, siga en Twitter y Facebook para obtener actualizaciones sobre las publicaciones semanales.