Cómo agregar un mapa de formulario de contacto con un complemento de WordPress

Publicado: 2021-04-09

¿Desea agregar un mapa (como Google Maps) a su formulario de contacto con un complemento 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 obtener clientes potenciales de mayor calidad.

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

Cree su mapa de formulario de contacto ahora

¿Por qué agregar 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é necesita un formulario de contacto.

Pero, es posible que se pregunte por qué agregaría un mapa a ese formulario de contacto. Bueno, agregar un mapa a tu formulario de contacto puede ser una gran idea.

WPForms es el mejor complemento de WordPress Form Builder. ¡Consíguelo gratis!

Aquí hay algunas razones de por qué:

  • Los mapas en los formularios de contacto pueden ayudarlo a obtener 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 un alfiler móvil
  • Es muy fácil de hacer con el clic de un botón (usando el complemento 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.

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

Cómo agregar un mapa de formulario de contacto

Siga estas sencillas instrucciones paso a paso para agregar un mapa de formulario de contacto a su sitio web de WordPress, utilizando un complemento.

Paso 1: descargue el complemento WPForms

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

Necesitará WPForms Pro para acceder al complemento de geolocalización.

Paso 2: activa el complemento de geolocalización

Una vez que su complemento WPForms esté activado, diríjase a WPForms » Complementos y use la barra de búsqueda para ubicar el Complemento de geolocalización. Haga clic en Activar para activarlo.

complemento de geolocalización

El complemento de geolocalización tiene algunas características increíbles que puede usar en su sitio web ahora que está activado, como estas 2 increíbles:

  1. Geolocalización de ingreso de formulario: podrá ver de dónde provienen los usuarios de su formulario, lo que puede ayudarlo a segmentar mejor su lista de correo electrónico.

Geolocalización de WPForms para 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 la completen.

Dirección de geolocalización autocompletada en WPForms

Podrá utilizar estas dos herramientas geniales una vez que obtenga su formulario de contacto en su sitio web, así que continuemos construyendo su formulario de mapa.

Paso 3: Personaliza el complemento de geolocalización

Ahora que ha activado el complemento de geolocalización, es hora 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, deberá elegir el proveedor del que desea obtener su información de geolocalización en el área Proveedor de lugares.

Elija un proveedor de lugares para la geolocalización

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

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

autocompletar detección de ubicación w wpforms

Consulte nuestra documentación completa sobre la configuración del complemento de geolocalización para encontrar detalles sobre el proveedor de servicios de ubicación que va a utilizar y cómo completar esa configuración.

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

Paso 4: cree su formulario de contacto

Así que sigamos adelante y creemos su formulario de contacto con un mapa ahora. Esta parte tomará menos de 5 minutos.

Para comenzar a crear su nuevo formulario, haga clic en el botón Agregar nuevo para iniciar el generador de formularios WPForms.

Agregar nuevo formulario

Ahora puede ingresar un nombre para su formulario en el campo de entrada Nombre del formulario . En este ejemplo, usaremos "Contáctenos".

Escriba el nombre del formulario

Debajo del Nombre del formulario, seleccione la plantilla que le gustaría usar haciendo clic en ella. Hagamos un formulario de contacto simple y le agregaremos nuestro mapa en breve.

Cree un formulario de contacto simple

A continuación, su plantilla de formulario de contacto simple se completará con algunos campos estándar como:

  • Nombre primero Segundo)
  • Correo electrónico
  • Comentario o mensaje

formulario de contacto de wordpress antes de que el complemento agregue el mapa

Ahora, probablemente haya algunas cosas más en otras configuraciones de formulario que querrá configurar, como notificaciones y confirmaciones. Si es así, (y lo recomendamos encarecidamente) consulte nuestra guía detallada sobre cómo crear su primer formulario.

¡Gran trabajo! A continuación, agreguemos un campo a su formulario que le permitirá habilitar la opción Mostrar mapa.

Paso 5: active la opción Mostrar mapa

Una vez que se cargue su formulario, verá todos los campos que puede agregar a su formulario.

campos en un formulario de contacto simple antes de agregar el mapa

Para usar la opción Mostrar mapa en su formulario, deberá agregar el campo Dirección o el campo Texto de una sola línea .

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

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

texto de una sola línea para formulario de contacto con mapa

¿No necesitas uno de los campos? Para eliminar cualquier campo de su formulario, coloque el cursor sobre el campo y haga clic en el botón rojo de la papelera.

Eliminar un botón de campo

Bien, ahora que ha agregado su campo de Texto de una sola línea, es hora de activar un mapa en su formulario.

En la pestaña Opciones de campo para su campo Texto de una sola línea, haga clic en Opciones avanzadas .

opciones avanzadas para encontrar la opción de mapa en el campo del formulario

Verá algunas opciones diferentes ahora, así que desplácese hasta la parte inferior y habilite la casilla de verificación junto a Habilitar Autocompletar dirección y luego marque la casilla junto a Mostrar mapa .

Mostrar botón de mapa en formularios

El mapa estará predeterminado por encima del campo, pero puede cambiarlo para que esté debajo si lo desea. Simplemente haga clic en el menú desplegable y cámbielo al campo Debajo.

cambiar la ubicación del campo en el formulario de contacto con el mapa (1)

Finalmente, cambiemos el nombre de este campo a 'Dirección' para que sus usuarios no vean 'Texto de una sola línea' al completar su formulario.

Desplácese hacia arriba en el panel Opciones de formulario en el lado izquierdo y edite la Etiqueta para decir 'Dirección'.

cambiar el campo de texto de una sola línea a la dirección (1)

Ahora, realice cualquier otro cambio que desee en su formulario y cuando le guste, haga clic en Guardar en la esquina superior derecha.

guarda tu formulario de contacto con un mapa en wordpress

Gran trabajo. Tu formulario está listo para hacer su debut.

Paso 6: Publique su mapa de formulario de contacto

¿Listo para publicar tu formulario de contacto con un mapa? Con su complemento WPForms Pro, es muy fácil incrustar su formulario en su sitio.

Entonces, una vez que su formulario se vea como desea y esté guardado, haga clic en el botón Insertar en la esquina superior derecha.

incrustar el mapa del formulario de contacto en una página de wordpress

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

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

Crear nueva página

A continuación, asigne a su página el nombre que desee y haga clic en ¡Vamos!

incrustar el mapa del formulario de contacto en una página nueva

Voila. Esto agregará automáticamente su formulario de contacto con mapa a su página en WordPress.

A continuación, haga clic en 'Publicar' (o actualizar, si está usando una página existente) para finalmente liberar su formulario en vivo en Internet.

publica tu formulario de contacto con un mapa en wordpress

Felicitaciones: su formulario de contacto con un mapa ahora está disponible en Internet.

Aquí tienes una idea de cómo se verá:

formulario de contacto con mapa (1)

¡Eso es todo! Ahora sabe cómo crear fácilmente un mapa de formulario de contacto con un complemento de WordPress.

Cree su mapa de formulario de contacto ahora

Cree su propio mapa de formulario de contacto hoy

Es muy fácil crear su propio mapa de formulario de contacto.

Obtenga WPForms Pro hoy para acceder al complemento de geolocalización que le permite agregar estos increíbles mapas. También tendrá acceso a un montón de otras funciones útiles.

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

  • Un constructor fácil de usar : cree sus propios formularios en minutos sin escribir una sola línea de código.
  • Encuestas : recopile datos a través de encuestas y sondeos y véalos en hermosos informes.
  • Páginas de formulario : haga que más personas terminen sus formularios creando páginas de formulario sin distracciones con un solo clic.
  • Formularios de pedido : acepte Stripe y PayPal directamente en sus formularios y acepte dinero en línea.
  • Informes de viaje del usuario : vea dónde se encontraban las personas en su sitio antes de completar su formulario.
  • Formularios seguros : proteja los formularios con opciones antispam como captcha personalizado, hCaptcha o Google reCAPTCHA v2 o v3.
  • Formas conversacionales : observe cómo se disparan las tasas de conversión con formas muy atractivas y de aspecto moderno.
  • Más de 100 plantillas : nunca vuelva a crear un formulario desde cero con plantillas prediseñadas de los tipos de formulario más populares que existen.
  • Soporte Premium : acceda a un equipo amigable y conocedor que lo guiará en la dirección correcta si necesita ayuda con los formularios de su sitio web.
  • …y mucho más.

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

Reflexiones finales sobre los mapas de formularios de contacto

Esperamos que esta publicación le haya ayudado a aprender lo fácil (y beneficioso) que es agregar un mapa de formulario de contacto a su sitio web de WordPress con un complemento.

¿Quiere agregar su logo o una imagen a su formulario? También puede consultar nuestra guía sobre cómo agregar una imagen a un formulario de WordPress.

¿Entonces, Qué esperas? Empiece hoy mismo con el plugin de formularios de WordPress más potente.

Y si le gusta esta publicación, síganos en Facebook y Twitter para obtener más tutoriales gratuitos de WordPress.