Cómo crear un formulario de dirección automático de adición automática de Google Maps

¿Le gustaría averiguar cómo crear un formulario automático de llenado automático de Google Maps? Agregar un campo de dirección de complemento automático a los formularios de su sitio web mejora la experiencia del usuario, ahorra tiempo y valida la dirección enviada utilizando Google Maps. Entonces, en este tutorial, presentaremos una guía de paso por paso sobre cómo crear un formulario automático de dirección automática de Google Maps, ¡sin hacer malabares con ningún código HTML personalizado! Cree el formulario de dirección de llenado automático ahora aquí hay un contenido si desea ir más allá:
Instale el complemento WPForms
Habilitar suplemento de geolocalización
Configurar la configuración de geolocalización
Cree un formulario de adición automático de Google Maps
Agregue el campo de dirección a su formulario.
Active la función de finalización de dirección automática
Agregue el formulario de adición automático de Google Maps a su sitio web de WordPress
¿Cómo hago un formulario automático de llenado automático de Google Maps? ¿Se pregunta cómo usar la función de adición automática de Google Maps? El direccionamiento automático de la dirección es una de las funciones fuertes de Google Maps. Puede agregar la finalización automática a los formularios de contacto de WordPress para completarlos más fácilmente.
WPFORMS es el mejor complemento de WordPress Form Builder. ¡Tómelo gratis!

La incorporación de la función de finalización automática de las direcciones de Google Maps en un formulario de contacto requiere un conocimiento de codificación preliminar. Pero si usa un complemento para crear formularios, como WPForms, puede tomar el proceso en algunos pasos y sin codificar. WPFFORMS PRO incluye un poderoso suplemento de geolocalización que viene con una función automática de finalización de dirección preconstruida. Esta función ubica automáticamente y sugiere automáticamente las ubicaciones de sus usuarios a medida que completan e ingresan sus direcciones. Además, con el suplemento de geolocalización, puede agregar un mapa a su formulario de contacto de WordPress y permitir a los usuarios agregar una ubicación ajustando el pino en el mapa . Veamos cómo crear un formulario de llenado automático de Google Maps con WPFFORMS y GEOLOCACIÓN DE ADONDOS. Paso 1: Instale el complemento WPFFORMS Lo primero que tendrá que hacer es instalar el complemento WPFORMS. Una vez que se instale WPFFORMS, haga clic en el botón de activación. Si es nuevo en WordPress o enfrenta cualquier dificultad durante el proceso de instalación del complemento, puede consultar el paso a paso sobre cómo instalar un complemento de WordPress.
Paso 2: active el suplemento de geolocalización después de la instalación de WPFFORMS, podrá activar el programa de geolocalización. Ahora, para activar el suplemento, vaya al tablero de WordPress y haga clic en los complementos de WPForms ».
En la barra de búsqueda, escriba la geolocalización y presione para activar.

Paso 3: Configure la configuración de geolocalización después de haber activado el complemento de geolocalización, debe configurar su configuración. Para hacer esto, haga clic en la configuración de WPFORMS ».

En la página de configuración de WPFFORMS, haga clic en Geolocalización en las pestañas en la parte superior. Aquí verá diferentes opciones para configurar el suplemento de geolocalización:

Proveedor del lugar: tiene la opción de elegir qué proveedor desea recibir su información de geolocalización. Aquí seleccionaremos la API de Google Places como proveedor de lugar.

Ubicación actual: active esta opción para permitir que su ubicación de usuario se complete en el formulario.
API Google Places: para activar la función de complemento de la dirección automática y mostrar los mapas de Google en sus formularios, deberá generar una clave API y conectarla con WPFFORMS.

Veamos el proceso completo de generar una clave API. Genere una tecla API de Google Desarroller Console Access Google Developer Console y seleccione el proyecto en el menú Seleccione un proyecto en la parte superior. Si no tiene ningún proyecto creado previamente, haga clic en un nuevo proyecto para crear uno nuevo.

Después de haber creado con éxito un nuevo proyecto, haga clic en Active API y servicios.

Esto abrirá una Biblioteca API de Google.

Desde aquí, necesitará activar tres 3 API:

Agua de geocodificación

Mapas API JavaScript
Lugares de API
Esta biblioteca API ofrece una opción de búsqueda fácil; Escriba el nombre de la API en el cuadro de búsqueda, acceda a su API y haga clic en el botón Habilitar.
Después de activar todas las API, regrese al tablero de la consola de Google y navegue por la pestaña Credencial.
Haga clic en el botón Crear acreditaciones en la parte superior y seleccione la opción Clave API.

Se abrirá una ventana emergente con una tecla API. Haga clic en la opción restringida de la tecla en la esquina inferior derecha de la ventana emergente.

Se abrirá una nueva página, donde necesita configurar la siguiente configuración: Restricciones de aplicación: desde aquí, puede seleccionar qué sitios web, direcciones IP o aplicaciones puede usar la clave API. Aquí deberá elegir la opción HTTP Refersers para permitir su clave en su sitio web.

Restricciones en el sitio web: una vez que haya seleccionado referencias HTTP, se mostrarán una nueva opción, se mostrarán restricciones del sitio web. Aquí debe agregar el nombre de dominio de su sitio web para restringir la clave API que solo use por sitios web especificados.

Restricciones de API: después de restringir la clave después de la aplicación y el sitio web, deberá restringir la clave después de la API. Para hacer esto, haga clic en la opción de restricción de clave.
Esto abrirá una lista de caída con una opción API múltiple. Seleccione las siguientes API en el menú desplegable:

Lugares de API


Mapas API JavaScript

Geocodificación AP
Después de haber terminado de seleccionar las API, haga clic en el botón Guardar para guardar la configuración. Si hace clic en el botón de rescate, lo redirigirá a la página de la credencial. Copie la clave en la página y vuelva a la configuración de WPFFORMS.
En la configuración de WPFFORMS, pegue esto en el campo de la tecla API en la API de Google Places y haga clic en el botón Guardar Configuración.
¡Eso es genial! Continuemos ahora y agregamos la función de direcciones automáticas a sus formularios. Paso 4: Cree un formulario de llenado automático de Google Maps ahora que hemos terminado con la configuración de API, es hora de crear un formulario automático de dirección de Google Maps. Para esto, primero, debemos crear un nuevo formulario usando WPFORMS. Vaya a WPFFORMS »Agregue nuevo para crear un nuevo formulario. Para la pantalla de configuración, agregue un nombre al formulario y seleccione la plantilla que desea usar. WPFORMS incluye una enorme biblioteca de plantillas preconstruidas, que consta de más de 300 hermosas plantillas de formas.

Puede elegir cualquier plantilla y usarla en su sitio web. Aquí elegiremos una plantilla de contacto simple. Haga clic en la plantilla para verlo en vivo en el tablero del constructor de formulación.

A continuación puede verificar el tablero del constructor de formularios WPFFORMS. De este constructor, puede agregar campos adicionales a su formulario de contacto.

Paso 5: Agregue el campo de dirección a su formulario ahora que tenemos el formulario preparado, solo tenemos que agregar el campo de dirección. A la izquierda, desde la sección de los campos de fantasía, tire del campo de la dirección y colóquelo en el formulario.

El campo de dirección ya incluye una etiqueta y un subeticet de texto para su facilidad. Tiene la flexibilidad de:

Personalizar el texto de la etiqueta

Seleccione el formato del esquema para el campo Dirección

Personalizar el tamaño del campo

Esconder la etiqueta
Esconder el sub -hees
Paso 6: active la función de finalización de dirección automática para activar la función de finalización de dirección automática, vaya a la pestaña avanzada en el campo de dirección.
Desplácese hacia abajo hasta que vea una casilla de verificación con la activación de finalización automática de la dirección. Buzón para activar la finalización automática de la dirección en su formulario permitiendo que esto abrirá otra característica: Mapswell. Si desea mostrar un mapa con la persona de contacto, verifique esta opción también.
Haga clic en el botón Guardar en la parte superior para resolver todo. Paso 7: Agregue su formulario de adición automático de Google Maps a su sitio de WordPress ahora que su formulario de complemento automático está listo, es hora de agregarlo a su sitio web. WPFFORMS le permite agregar su formulario en múltiples ubicaciones, incluidas páginas, publicaciones de blog e incluso widgets de la barra lateral de su sitio web. Antes de incorporar el formulario en una página, si lo desea, puede verificar cómo se verá el formulario en la página en vivo. Para obtener una vista previa del formulario, haga clic en el botón Vista previa en la parte superior.
Agregamos el formulario de llenado automático de Google Maps en su página. Cree una nueva página o abra una página existente en el sitio web de WordPress. Haga clic en el icono “+” y agregue el bloque WPForms del editor de bloques.
Seleccione el formulario y publique la página.