Advertisement
  1. Code
  2. Google Maps

Cómo añadir mapas a tu formulario de contacto CF7 en WordPress

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Un formulario de contacto es una medio que posibilita a los usuarios ponerse en contacto contigo rápidamente. Entre algunos de los beneficios de un formulario de contacto se incluyen los siguientes.

Reducir el spam

Una de los métodos para reducir el spam es usar un formulario de contacto. Ya no tendrás que poner tu dirección de correo electrónico por ahí, lo que dificultará que ciertas personas lo utilicen para enviar correo no deseado.

Recopilar información específica

Un formulario de contacto te permite solicitar información específica o controlar la información que proporciona un usuario. Dado que tienes la libertad de añadir o eliminar cualquier campo de formulario que desees, puedes hacer también que ciertos campos del formulario sean obligatorios.

Recopilar clientes potenciales

A las personas les resulta más fácil rellenar un formulario de contacto que hacer una llamada o enviar un correo electrónico. Contar con un formulario de contacto es una fórmula eficaz para recopilar datos de clientes potenciales y aumentar las tasas de conversión. Incluso el formulario de contacto más simple puede conducir a un incremento de los clientes potenciales.

Obtener feedback

Puedes utilizar un formulario de contacto para crear un formulario específicamente orientado a la obtención de opiniones y comentarios de clientes, en especial para nuevos productos o servicios. Este tipo de información se podría utilizar para mejorar la toma de decisiones de marketing o mejoras.

Obtener presupuestos

También puedes utilizar un formulario de contacto para permitir a los clientes solicitar presupuestos, especialmente en empresas orientadas a la provisión de servicios. O también puedes usarlo para recibir propuestas por parte los clientes.

Comunicación

Un formulario de contacto proporciona un sencillo medio para que los clientes se pongan en contacto contigo. En lugar de recorrer tu sitio web para conseguir tu correo electrónico, podrías colocar el formulario en una página de fácil acceso donde los usuarios encontrarán una forma simple para poder ponerse en contacto contigo.

Plugins premium para crear formularios de contacto

Los plugins gratuitos son geniales cuando estás empezando con WordPress, pero si quieres pasar a un nivel superior en tus sitios y ahorrarte tiempo mientras lo haces, deberías considerar un plugin premium para formularios de contacto de CodeCanyon.

Lo que vamos a construir

Este tutorial te mostrará cómo añadir Google Maps a un formulario de contacto utilizando Contact Form 7 y el plugin WordPress Google Maps Extension for CF7. Al final del tutorial, deberíamos tener algo como esto:

The completed contact form with Google Maps extensionThe completed contact form with Google Maps extensionThe completed contact form with Google Maps extension

Plugin gratuito CF7 para formularios de contacto

Contact Form 7 proporciona un formulario de contacto sencillo y flexible para tu sitio web WordPress. Puedes personalizar el diseño del formulario y configurar dónde se enviará la información cuando los usuarios contacten contigo. Contact Form 7 es muy popular y, por lo tanto, tiene toneladas de complementos gratuitos y de pago que proporcionan funciones adicionales como la integración con Dropbox, la integración con mapas, etc.

El plugin viene con características adicionales como el envío AJAX, el filtrado de spam Akismet, formularios para la carga archivos, e incluso la capacidad de añadir un CAPTCHA al formulario. La ventaja más significativa de este formulario es que es de uso gratuito.

¿Por qué usar Contact Form 7?

Muchos plugins pueden ayudarte a crear un formulario de contacto para tu sitio web WordPress; Contact Form 7 es uno de esos plugins. Dado que es flexible y fácil de usar, Contact Form 7 se considera la mejor opción a la hora de elegir un formulario de contacto.

Este plugin proporciona se configura de una manera sencilla y sin complicaciones, especialmente si no sabes mucho sobre código.

Instala el formulario de contacto CF7

La forma más rápida de instalar el plugin de formulario de contacto CF7 es usando la función de búsqueda de plugins desde WordPress. Dirígete a Plugins > Añadir nuevo y busca el formulario de contacto CF7 mediante la barra de búsqueda. Haz clic en él y después sobre Instalar. Después de instalar el plugin, haz clic en el botón Activar para activarlo.

Extensión de Google Maps para CF7

La extensión de Google Maps para CF7 proporciona una gran manera de mejorar su formulario mediante la adición de un campo de mapa a él. Esto le permite obtener la ubicación del usuario. Algunas de las características notables de este plugin incluyen:

  • Recopilar información del usuario a través de Google Maps
  • Los visitantes pueden colocar marcadores o dibujar cualquier número de rectángulos, círculos y polígonos en el mapa
  • Obtener automáticamente un archivo KML basado en la ubicación del visitante
  • Personaliza Google Maps según tus necesidades
  • Mapas totalmente responsivos
  • Elegir el tipo de mapa, es decir, Hoja de ruta, Satélite, Híbrido o Terreno
  • Personalizar atributos como colores, formas, grosor, color de trazo y opacidad

Compra y descarga la extensión de Google Maps para CF7. Puedes encontrar tus archivos instalables para WordPress en la sección de descarga de tu cuenta.

Una vez hayas descargado los archivos para WordPress, inicia sesión en tu sitio WordPress e instala el plugin. Ve a Plugins > Añadir nuevo y sube el archivo zip para WordPress que obtuviste en CodeCanyon. Después de cargarlo, haz clic en Instalar ahora, espera unos segundos y, a continuación, haz clic en Activar. Ahora ya puedes empezar a usar el plugin.

Los mapas de Google ahora están integrados con el formulario de contacto, como se muestra a continuación.

Google Maps integration in CF7Google Maps integration in CF7Google Maps integration in CF7

Configuraciones

Para añadir un mapa a nuestro formulario de contacto, necesitamos generar una clave de API de Google Maps.

Para obtener una clave de API:

  • Dirígete a Google Cloud Console e inicia sesión con tu cuenta de Google.
  • Selecciona o crea un nuevo proyecto.
  • Ves a la página Credenciales (bajo APIs y servicios) y haz clic en el botón Crear credenciales > Clave de API.
  • Copie y pega la clave en tu sitio WordPress en la configuración de CF7 Google maps.
Getting a Google Maps API keyGetting a Google Maps API keyGetting a Google Maps API key

La extensión de Google Maps para CF7 proporciona varias maneras en las que puedes configurar mapas.

  • Los usuarios pueden marcar su ubicación actual utilizando un marcador o resaltando un área. También pueden dibujar polígonos, polilíneas, círculos y rectángulos.
  • Las entradas de datos de ubicación del usuario se pueden enviar en el email CF7 predeterminado junto con otros datos del formulario. Ver los datos de ubicación directamente en Google Maps.
  • Obtén los datos de entrada del usuario automáticamente en un formato de archivo KML por email y visualízalos fácilmente con un visor de archivos KML online.
  • Puedes cambiar los tipos de mapa, el nivel de zoom y otros atributos del mismo según tus necesidades. También puedes centrar el mapa en base a la ubicación del usuario.

Edita el resto de los ajustes, por ejemplo, marcadores, tipos de mapa y otros atributos, en la página de configuración, como se muestra a continuación, y guarda los cambios.

Maps and markers setttingsMaps and markers setttingsMaps and markers setttings

Crear un formulario de contacto con un mapa

Ve a Contacto > Añadir nuevo desde el menú de tu escritorio de WordPress. Contact Form 7 viene preconfigurado con una plantilla lista para usar que se ve así:

The default Contact Form 7 templateThe default Contact Form 7 templateThe default Contact Form 7 template

Para añadir un campo de mapa, haz clic en el botón Google Maps, tras esto deberías ver una ventana emergente como esta:

Google Maps popupGoogle Maps popupGoogle Maps popup

Haz clic en Insert Tag y el mapa aparecerá en forma de campo en el formulario. Ahora tu formulario debería tener un aspecto similar al siguiente:

The default contact form with a mapThe default contact form with a mapThe default contact form with a map

Almacenamiento

Dirígete a la pestaña Mail y pega el código corto o "shortcode" [mapas] en tu herramienta de composición de correo electrónico para recibir datos de mapas en un email. Guarda todos los cambios. Cada formulario, una vez creado, genera un shortcode único que usarás para incrustarlo en cualquier página.

Incrustar en una página el formulario de contacto con capacidad para cargar mapas

El último paso es incrustar el formulario en una página o en cualquier otro lugar en el que desees que aparezca. Dirígete a Páginas > Añadir nueva, da un título a la página y pega el shortcode en su cuerpo como se muestra a continuación.

The completed contact form shortcodeThe completed contact form shortcodeThe completed contact form shortcode

El formulario completo con un mapa tendrá este aspecto:

The completed form with a mapThe completed form with a mapThe completed form with a map

Como puedes ver, los visitantes pueden colocar marcadores en su ubicación o utilizar la función de búsqueda para buscar su ubicación. También pueden dibujar formas y aumentar o reducir el zoom al igual que haces en un mapa normal.

Conclusión

Conocer las ubicaciones de los visitantes que llenan tus formularios en WordPress puede ayudarte a identificar quién está viniendo a tu sitio y mostrando interés. Recopilar información sobre sus ubicaciones puede ayudarte a tomar mejores decisiones sobre el tipo de servicios o productos que ofreces.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.