Resumen de IA
¿Te gustaría saber más sobre las ubicaciones de los usuarios que completan tus formularios? Con el complemento de geolocalización de WPForms, puedes recopilar fácilmente datos geográficos de cada uno de tus clientes potenciales.
Este tutorial te mostrará cómo instalar y usar el complemento de geolocalización para WPForms.
Requisitos:
- Necesitarás una licencia de nivel Pro o superior para acceder al complemento de geolocalización
- Asegúrate de haber instalado la última versión de WPForms para cumplir con la versión mínima requerida para el complemento de geolocalización.
Configuración del complemento de geolocalización
Antes de empezar, primero deberás asegurarte de que WPForms esté instalado y activado en tu sitio de WordPress.
Una vez que hayas instalado WPForms y tu licencia esté verificada, podrás instalar y activar rápidamente el complemento de geolocalización.
Después de activar el complemento, puedes configurar sus ajustes yendo a WPForms » Ajustes y seleccionando la pestaña Geolocalización.
Desde aquí, tendrás la opción de elegir el proveedor del que deseas recibir tu información de geolocalización.
Nota: Seleccionar Ninguno en las opciones del Proveedor de Lugares evitará que tus formularios guarden datos de ubicación.
En las siguientes secciones, cubriremos cómo configurar las API de Google Places y Mapbox Search.
API de Google Places
Nota: Google Places requiere que tu sitio tenga un certificado SSL (es decir, que se cargue a través de HTTPS). Si deseas más información sobre cómo obtener un certificado SSL para tu sitio, asegúrate de consultar la guía de WPBeginner sobre cómo obtener un certificado SSL gratuito.
Primero, selecciona Google Places de la lista de opciones en la sección de Geolocalización.
Una vez que selecciones la opción de Google Places, aparecerán ajustes adicionales. Necesitarás obtener tu clave API de Google Places para poder introducirla en el campo proporcionado. Para hacerlo, abre la Consola de Google Cloud en una nueva pestaña o ventana del navegador.
Generación de tu clave API de Google Places
En la parte superior de tu panel de Google Cloud, selecciona el proyecto para el que deseas habilitar esta clave API desde el menú Seleccionar un proyecto.
Si no has creado un proyecto previamente, haz clic en CREAR PROYECTO para configurar uno.
Una vez que haya abierto su proyecto, debería ser redirigido al panel de APIs y servicios. Si no es así, abra el menú de hamburguesa en la esquina superior izquierda de la pantalla y vaya a APIs y servicios » APIs y servicios habilitados.
Luego haga clic en + HABILITAR APIS Y SERVICIOS.
Esto abrirá la Biblioteca de API. Busque y habilite las siguientes APIs:
- API de Places
- API de JavaScript de Maps
- API de Geocodificación
Para habilitar una API para su proyecto, solo necesita hacer clic en el botón azul HABILITAR debajo de su nombre.
Después de habilitar las tres APIs, navegue a la configuración de Credenciales yendo a APIs y servicios » Credenciales desde el menú de la izquierda. Desde aquí, haga clic en + CREAR CREDENCIALES y seleccione la opción Clave de API para generar una clave de API.
En la ventana emergente con su nueva clave de API, haga clic en Editar clave de API.
En la siguiente pantalla, deberá configurar las siguientes opciones:
Establecer una restricción de aplicación
Para permitir que su clave de API se utilice con WPForms, deberá seleccionar la opción Sitios web.
Restricciones de sitios web
Una vez que haya permitido que su clave se utilice en sitios web, se recomienda restringir qué dominios pueden usarla por motivos de seguridad. Para hacerlo, haga clic en + AGREGAR en la sección de restricciones de sitios web.
Luego ingrese el dominio de su sitio web en el campo provisto. Si desea permitir que su clave se utilice en un dominio completo, ingréselo con una barra diagonal (/) seguida de un asterisco (*) al final.
Puede agregar tantos elementos como necesite para habilitar su clave para todo su sitio o para varios sitios.
Nota: Si su sitio utiliza subdominios, agregue .ejemplo.com/ como un elemento en las restricciones de su sitio web para permitir que su clave se utilice en todos sus subdominios.
Restricciones de API
Una vez que haya restringido su clave por Aplicación y Sitio web, deberá restringirla por API. Para hacer esto, seleccione la opción Restringir clave.
Esto mostrará un menú desplegable, del cual deberá seleccionar las APIs específicas a las que desea restringir su clave.
Desde este menú desplegable, seleccione las siguientes APIs:
- API de Places
- API de JavaScript de Maps
- API de Geocodificación
Una vez que haya seleccionado estas APIs, haga clic en el botón Guardar para guardar su configuración.
Copiando su clave de API de Google Places
Después de guardar su configuración, será redirigido a una descripción general de todas sus claves de API disponibles. Para ver su clave, haga clic en la opción MOSTRAR CLAVE en la sección Acciones.
Aparecerá una ventana emergente que muestra la clave de API. Desde aquí, copie la clave haciendo clic en el icono de copiar y regrese a la configuración de WPForms.
De vuelta en la configuración de WPForms, pegue la clave de API que acaba de copiar en el campo Clave de API y guarde su configuración.
Si desea prellenar sus formularios con las ubicaciones de los usuarios, active la opción Ubicación actual en la posición Activado.
Nota: Para más opciones de URL, como agregar protocolos HTTP o HTTPS, consulte la documentación de Mapbox sobre restricciones de URL.
API de Búsqueda de Mapbox
Para comenzar a configurar la API de Búsqueda de Mapbox, seleccione Búsqueda de Mapbox en la lista de opciones de la sección Geolocalización.
Nota: Mapbox Search JS, el conjunto de frameworks de JavaScript que permite a los usuarios interactuar con los mapas de Mapbox, se encuentra actualmente en fase beta pública. Durante la fase beta, las funciones de autocompletado de direcciones y búsqueda de Mapbox pueden estar sujetas a posibles cambios.
Una vez que seleccione la opción API de Búsqueda de Mapbox, aparecerán configuraciones adicionales. Deberá crear un token de acceso de Búsqueda de Mapbox. Para ello, primero deberá iniciar sesión en el panel de su cuenta de Mapbox.
Una vez que haya accedido al panel de su cuenta, localice la barra de navegación y haga clic en Tokens.
Esto le llevará a la página de tokens de acceso donde puede agregar y administrar sus tokens.
Mapbox le proporciona un token de acceso predeterminado, sin embargo, recomendamos crear un nuevo token que pueda usar específicamente para WPForms. Para ello, haga clic en el botón Crear un token.
Hacer clic en este botón le llevará a una nueva página donde puede crear un nuevo token de acceso. En la sección Nombre del token, localice el campo Nombre y escriba una etiqueta para ayudar a asociarlo con un proyecto.
Luego, desplácese hacia abajo hasta la sección Ámbitos del token. Aquí verá varios ámbitos públicos seleccionados por defecto. Continúe y deje esta sección como está.
A continuación, desplácese hacia abajo hasta la sección Restricciones del token e introduzca la URL de su sitio en el campo URL.
Después de haber escrito su URL, haga clic en el botón Agregar URL para añadir la URL.
Una vez que haya completado los campos necesarios, haga clic en el botón Crear token.
A continuación, verá aparecer una ventana modal pidiéndole que confirme la contraseña de su cuenta. Continúe e introduzca su contraseña y haga clic en Enviar.
Ahora será redirigido de nuevo a la página de tokens de acceso donde verá el nuevo token que acaba de crear. Continúe y haga clic en el icono de copiar para copiar el token.
Una vez que haya copiado su token de acceso, vuelva a la configuración de WPForms y pegue el token en el campo Token de acceso.
Si desea prellenar sus formularios con las ubicaciones de los usuarios, active la opción Ubicación actual.
Cuando haya terminado, asegúrese de guardar su configuración.
Nota: Al guardar la configuración, es probable que vea una solicitud en su navegador pidiendo compartir su ubicación. Si desea que Mapbox detecte su ubicación actual, deberá aceptar compartir su ubicación.
A continuación, verá una vista previa del mapa. Si ha decidido compartir su ubicación, verá su ubicación actual representada en el mapa.
En la siguiente sección, cubriremos cómo agregar autocompletado de direcciones a sus formularios.
Añadir autocompletado de direcciones a tus formularios
Una vez que haya configurado sus ajustes de geolocalización, puede habilitar la función de autocompletado del complemento de geolocalización en sus formularios.
Para hacerlo, primero deberá crear un nuevo formulario o editar uno existente. Luego, en el constructor de formularios, agregue un campo de Dirección o un campo de Texto de una sola línea.
Si desea mostrar la dirección en varias líneas, seleccione el campo Dirección.
Si prefiere mostrar la dirección en una sola línea, elija el campo Texto de una sola línea.
Luego, abra el panel Opciones de campo para su campo de Dirección o Texto de una sola línea y haga clic en la pestaña Avanzado para abrir configuraciones adicionales. Desde aquí, puede activar la función de autocompletado de direcciones seleccionando la opción Habilitar autocompletado de direcciones.
Si lo desea, también puede mostrar un mapa interactivo en el frontend de su sitio seleccionando la opción Mostrar mapa. Esto revelará un menú desplegable donde puede elegir si mostrar el mapa encima o debajo del campo de su formulario.
Una vez que tenga todo configurado, asegúrese de guardar su formulario.
Aquí hay un ejemplo de cómo podría verse su formulario en el frontend con las opciones de mapa y autocompletado de direcciones habilitadas:
Uso del campo de mapa
El campo Mapa en WPForms le permite mostrar ubicaciones específicas en un mapa interactivo dentro de sus formularios. A diferencia del campo Dirección, que recopila la ubicación de los usuarios que envían su formulario, el campo Mapa muestra ubicaciones que usted configura, como direcciones de oficinas, ubicaciones de tiendas o puntos de recogida. Esta función es ideal para mostrar múltiples ubicaciones comerciales o ayudar a los usuarios a identificar áreas de servicio específicas.
Para obtener instrucciones detalladas paso a paso sobre cómo agregar ubicaciones, personalizar marcadores, configurar ajustes avanzados y manejar múltiples ubicaciones, consulte nuestra guía completa sobre Uso del campo Mapa en WPForms.
Visualización de datos de ubicación de entradas
Para ver los datos de geolocalización de una entrada, vaya a WPForms » Entradas y elija el formulario para el que desea ver los detalles de geolocalización. Luego haga clic en Ver para abrir la página de una entrada individual.
Además de un mapa interactivo, verá detalles como la ciudad, estado, país y código postal del usuario, así como coordenadas aproximadas de latitud y longitud para la ciudad del usuario.
Inclusión de datos de geolocalización en correos electrónicos de notificación de formularios
Si lo deseas, también puedes incluir datos de geolocalización en los correos electrónicos de notificación automática para tus formularios.
Nota: Para sitios web extremadamente grandes o aquellos con un gran volumen de envíos de formularios, no se recomienda incluir datos de geolocalización en los correos electrónicos de notificación, ya que podría afectar la velocidad del servidor.
Para configurar esto, abre el creador de formularios y ve a Ajustes » Notificaciones. Luego, desplázate hasta la sección Mensaje de correo electrónico y agrega la etiqueta inteligente {entry_geolocation}.
Cuando se envíe el correo electrónico de notificación, incluirá datos de ubicación del usuario.
¡Eso es todo! Ahora sabes cómo recopilar datos de geolocalización para aprender más sobre tus usuarios.
¿A continuación, te gustaría enviar correos electrónicos de notificación diferentes según las selecciones del formulario de los usuarios? Para saber cómo, asegúrate de consultar nuestro tutorial sobre notificaciones condicionales de formularios.