how-to-add-a-contact-form-map-with-a-wordpress-plugin

Cómo añadir un mapa de formulario de contacto con un plugin de WordPress

¿Quieres añadir un mapa (como Google Maps) a tu formulario de contacto con un plugin de WordPress?

Colocar un mapa cerca de su formulario de contacto ayudará a su usuario a obtener claridad sobre su ubicación y le ayudará a conseguir clientes potenciales de mayor calidad.

En este tutorial, le mostraremos cómo mostrar un formulario de contacto de WordPress con un mapa.

Cree su formulario WordPress ahora

¿Por qué añadir un mapa en un formulario de contacto?

Claro, no es ningún secreto que la mayoría de los propietarios de pequeñas empresas con sitios web saben por qué se necesita un formulario de contacto.

Pero quizá se pregunte por qué añadir un mapa a ese formulario de contacto. Pues bien, añadir un mapa a tu formulario de contacto puede ser una gran idea.

He aquí algunas razones:

  • Los mapas en los formularios de contacto pueden ayudarle a conseguir mejores clientes potenciales con menos errores tipográficos
  • Aclare la ubicación en la que su usuario está escribiendo
  • Ayude a su usuario a encontrar una ubicación exacta con una chincheta móvil
  • Es muy fácil de hacer con el clic de un botón (utilizando el plugin WPForms)

En lugar de tener que codificar un mapa en su sitio web usted mismo o pagar a un desarrollador web, puede hacerlo fácilmente con WPForms Pro. Es uno de los mejores plugins de mapas para WordPress.

A continuación, le mostraremos exactamente cómo agregar un mapa de formulario de contacto con un plugin de WordPress a continuación.

Cómo añadir un mapa de formulario de contacto

Siga estas sencillas instrucciones paso a paso para añadir un mapa de formulario de contacto a su sitio web de WordPress mediante un plugin.

Paso 1: Descargar el plugin WPForms

Lo primero que debe hacer es instalar y activar el plugin WPForms. Aquí tienes una guía paso a paso sobre cómo instalar un plugin de WordPress.

Necesitará WPForms Pro para acceder al complemento Geolocalización.

Paso 2: Activar el complemento de geolocalización

Una vez que su plugin WPForms esté activado, diríjase a WPForms " Addons y utilice la barra de búsqueda para localizar el addon Geolocation. Haga clic en Instalar Complemento para activarlo.

Complemento de geolocalización para WPForms

El addon de Geolocalización tiene 2 características impresionantes que puede utilizar en su sitio web ahora que está activado:

1. Geolocalización de la entrada del formulario: Podrás ver de dónde vienen los usuarios de tus formularios, lo que puede ayudarte a segmentar mejor tu lista de emails.

WPForms geolocalización de una entrada

2. Autocompletar dirección: A medida que los usuarios escriben, su campo de dirección puede mostrarles automáticamente su dirección antes de que terminen de introducirla.

Autocompletar geolocalización de direcciones en WPForms

Podrás utilizar estas dos fantásticas herramientas una vez que tengas tu formulario de contacto en tu sitio web, así que continuemos construyendo tu formulario de mapa.

Paso 3: Personalizar el complemento de geolocalización

Ahora que has activado el addon Geolocalización, es el momento de configurarlo y personalizarlo.

Vaya a WPForms " Configuración y haga clic en la pestaña Geolocalización.

Configuración de geolocalización en WPForms

Ahora, tendrá que elegir el proveedor del que desea obtener la información de geolocalización en el área Proveedor de lugares. WPForms se integra con Google Maps y Mapbox.

Selección de Google Places como proveedor de lugares para el complemento de geolocalización

Si lo desea, puede permitir que la ubicación de su usuario se rellene previamente en un formulario marcando la casilla Ubicación actual.

Activar la detección de ubicación para el addon WPForms Geolocalización

Si marca esta casilla Ubicación actual, los visitantes verán un cuadro como éste cuando abran una página con su formulario de contacto:

Permitir los servicios de localización en Google Chrome para la geolocalización

Consulta nuestra documentación completa sobre la configuración del complemento de geolocalización para encontrar información específica sobre el proveedor de servicios de localización que vas a utilizar y cómo completar esa configuración.

Una vez que la configuración de tu proveedor de ubicación esté completa en la configuración del complemento de geolocalización, estarás listo para crear el mapa de tu formulario de contacto.

Paso 4: Cree su formulario de contacto

Así que vamos a seguir adelante y crear su formulario de contacto con un mapa ahora. Esta parte le llevará menos de 5 minutos.

Para empezar a crear su nuevo formulario, haga clic en el botón Añadir nuevo para iniciar el constructor de formularios WPForms.

Añadir nuevo formulario

Ahora puede introducir un nombre para su formulario en el campo de entrada Nombre de su formulario. En este ejemplo, utilizaremos "Contacte con nosotros".

Nombre de su formulario

Debajo del Nombre del formulario, seleccione la plantilla que desea utilizar haciendo clic sobre ella. Vamos a hacer un simple formulario de contacto, y vamos a añadir nuestro mapa a ella en breve.

Selección de la plantilla Formulario de contacto simple

A continuación, su plantilla de Formulario de Contacto Simple se rellenará con algunos campos estándar como:

  • Nombre y apellidos
  • Correo electrónico
  • Comentario o mensaje

Un formulario creado con la plantilla Simple Contact Form

Ahora, probablemente haya algunas cosas más que quieras configurar, como notificaciones y confirmaciones. Si es así, (y te lo recomendamos encarecidamente) consulta nuestra guía detallada sobre cómo crear tu primer formulario.

Buen trabajo. A continuación, vamos a añadir un campo a su formulario que le permitirá activar la opción Mostrar mapa.

Paso 5: Activar la opción Mostrar mapa

Una vez cargado el formulario, verás todos los campos que puedes añadir a tu formulario en la parte izquierda del constructor. Para utilizar la opción Mostrar mapa en tu formulario, tendrás que añadir el campo Dirección o el campo Texto de una línea.

En este tutorial, utilizaremos el campo Texto de una línea para que la dirección aparezca en una sola línea.

Para añadir este campo a su formulario, puede hacer clic en el nombre del campo o arrastrarlo desde el panel de la izquierda a su formulario de la derecha.

Añadir un campo de texto de una línea a un formulario de contacto

¿No necesitas alguno de los campos? Para eliminar cualquier campo de tu formulario, pasa el ratón por encima del campo y haz clic en el botón rojo de la papelera.

Borrar un campo de texto de una línea

Ok, ahora que ha añadido su campo de texto de una sola línea, es el momento de activar un mapa en su formulario.

Haga clic en el campo Texto de una línea para abrir su pestaña Opciones de campo y edite la etiqueta para que diga "Dirección" o algo similar. A continuación, haz clic en Avanzado.

Abrir las opciones avanzadas de un campo de texto unifilar

Ahora verás varias opciones, así que desplázate hasta la parte inferior y activa la opción Activar autocompletar direcciones.

Activación de la función de autocompletar direcciones en un campo de texto de una línea

A continuación, active la opción Mostrar mapa. Puede utilizar el menú desplegable situado justo debajo para elegir si el mapa aparece encima o debajo del campo de entrada.

Visualización de un mapa en un campo de texto de una sola línea

Ahora, haz cualquier otro cambio que quieras en tu formulario y cuando lo quieras, haz clic en Guardar en la esquina superior derecha.

Guardar el formulario

Buen trabajo. Su formulario está listo para hacer su debut.

Paso 6: Publicar el mapa del formulario de contacto

¿Listo para publicar su formulario de contacto con un mapa? Con su plugin WPForms Pro, es súper fácil incrustar su formulario en su sitio.

Una vez que el formulario tenga el aspecto deseado y esté guardado, haz clic en el botón Incrustar de la esquina superior derecha.

Incrustar botón de formulario

Aquí puede seleccionar la página de WordPress que desee, ya sea una página existente o una nueva.

En este tutorial, haremos clic en Crear nueva página.

Crear una nueva página

A continuación, ponle el nombre que quieras a tu página y haz clic en ¡Vamos!

Nombrar una nueva página en la que incrustar el formulario

Voilà. Esto añadirá automáticamente su formulario de contacto con mapa a su página en WordPress.

A continuación, haz clic en Publicar (o actualizar, si utilizas una página existente) para lanzar finalmente tu formulario a Internet.

Publicación del formulario de autocompletado de direcciones

Felicidades, ¡tu formulario de contacto con mapa ya está en Internet!

Aquí tienes una idea de cómo quedará:

Un formulario de contacto con un mapa

Ya está. Ahora ya sabes cómo crear fácilmente un mapa de formulario de contacto con un plugin de WordPress.

Cree su formulario WordPress ahora

Cree hoy mismo su propio mapa de formularios de contacto

Es superfácil construir tu propio mapa de formularios de contacto.

Obtenga WPForms Pro hoy para acceder al addon de Geolocalización que le permite añadir estos increíbles mapas. Obtendrá acceso a un montón de otras características útiles, también.

Y además de los mapas de formularios de contacto, WPForms Pro incluye:

  • Un constructor fácil de usar: cree sus propios formularios en cuestión de minutos sin escribir una sola línea de código.
  • Encuestas - Recopila datos a través de encuestas y sondeos y visualízalos en bonitos informes. También puedes añadir la función Guardar y continuar a las encuestas largas para que los usuarios puedan pausar y completar sus formularios más tarde.
  • Páginas de formularios - Consiga que más gente termine sus formularios creando páginas de formularios sin distracciones con un solo clic.
  • Formularios de pedido: integre Stripe (todos los planes), Square (Pro) y PayPal (Pro) directamente en sus formularios y acepte dinero en línea.
  • Informes del recorrido del usuario : vea en qué parte de su sitio se encontraban los usuarios antes de rellenar el formulario.
  • Formularios seguros: proteja los formularios con opciones antispam como captcha personalizado, hCaptcha o Google reCAPTCHA v2 o v3.
  • Formularios conversacionales: vea cómo se disparan las tasas de conversión con formularios atractivos y de aspecto moderno.
  • Más de 2.000 plantillas: no vuelva a crear un formulario desde cero con las plantillas prediseñadas de los tipos de formularios más populares.
  • Asistencia Premium - Acceda a un equipo amable y experto que le guiará en la dirección correcta si necesita ayuda con los formularios de su sitio web.
  • ...y mucho más.

De hecho, si miras WPForms Lite vs Pro, verás que hay un montón de razones por las que Pro es tan popular.

A continuación, añada imágenes a sus formularios de WordPress

Esperamos que este post te haya ayudado a aprender lo fácil (y beneficioso) que es añadir un mapa de formulario de contacto a tu sitio web WordPress con un plugin.

¿Quieres añadir tu logo o una imagen a tu formulario? También puedes consultar nuestra guía sobre cómo añadir una imagen a un formulario de WordPress.

¿A qué estás esperando? Empieza hoy mismo con el plugin de formularios para WordPress más potente.

Y si te ha gustado este post, síguenos en Facebook y Twitter para ver más tutoriales gratuitos sobre WordPress.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPForms, por qué es importante y cómo puede apoyarnos.

Renee DeCoskey

Renee DeCoskey escribe en blogs desde 2001 y utiliza WordPress desde 2007. Cuando no está escribiendo sobre plugins de WordPress, se la puede encontrar acurrucada con un libro o divirtiéndose en Rotary.Más información

El mejor plugin de WordPress para crear formularios arrastrando y soltando

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.

Active JavaScript en su navegador para rellenar este formulario.

2 comentarios en "Cómo añadir un mapa de formulario de contacto con un plugin de WordPress"

  1. Hola,
    ¿Es posible utilizar un mapa personalizado como referencia base para comprobar si la dirección introducida por el usuario se encuentra dentro de una zona determinada o no?

    1. Hola Elia - Actualmente no tenemos la opción de utilizar el mapa personalizado como referencia para ver si la dirección introducida por el usuario cae en una zona. Estoy de acuerdo en que esto sería útil, y voy a añadir esto en nuestro rastreador de peticiones de características para que esté en el radar de nuestros desarrolladores.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Este formulario está protegido por Cloudflare Turnstile y se aplican la Política de privacidad y las Condiciones del servicio de Cloudflare.