Cómo hacer Formulario de contacto

Toda web, blog, o sitio en internet que quiera tener una vía de comunicación con el usuario, necesita tener una página, donde recoja por medio de un formulario de contacto, las inquietudes, dudas, preguntas o temas de interés del usuario. Más aun si nuestra web está o intenta dar una serie de servicios.

Configurar un formulario de contacto con el tema Extra

Podemos realizar el formulario de contacto de varias maneras diferentes y con muchas configuraciones diferentes. Desde la más rápida por medio de una plantilla pre configurada o con ayuda del constructor Divi y sus módulos.

Es importante saber, que los formularios que se pueden crear con esta plantilla, puede que no cubran nuestras necesidades si deseamos meter algún tipo de elemento muy concreto. Para estas opciones tendremos que olvidarnos de los formularios del tema e instalar un plugin como el Contact Form 7, por ejemplo.

Si queremos añadir un mapa de localización

Para poner un mapa de localización en la página del formulario de contacto, podemos hacerlo de dos formas distintas, si optamos por aprovechar la opción de inserción del tema Extra, necesitamos conseguir una clave API para poder mostrar el mapa a través de la aplicación.

Aquí podrás ver cómo conseguirlo.

Pero si no disponemos de la posibilidad de conseguir una clave, porque no tenemos una cuenta de Google, y no queremos tener una, podemos insertar un código HTML que conseguiremos de la página de Google Maps.

Formulario de contacto con Atributos de Página

La primera opción, y más rápida si no queremos complicarnos la vida, es crear una nueva página, nombrarla y elegir la opción "contact" en los Atributos de Página del panel de la derecha.

Entre las opciones que se desplegarán al elegir esta opción están:

• Título del formulario de contacto: Nombre que le daremos al formulario, no es el nombre de la página.
• Enviar mensaje a: Donde pondremos el e-mail adonde enviaremos el formulario de contacto. En esta manera de crear el formulario, lo más aconsejable es utilizar el mismo e-mail que ingresamos a la hora de instalar WordPress.
• Mapa del formulario de contacto: Si disponemos de una clave API de Google, podremos elegir una ubicación para mostrar en la página. Si optamos por insertar el código conseguido en Google Maps, dejaremos este campo en blanco y pegaremos en código en la caja del editor de texto a través de la pestaña HTML.

El resultado que veremos será el siguiente. Siempre podremos modificar el aspecto cambiando los estilos CSS.

Formulario de contacto con el constructor Divi

Esta forma de crear el formulario de contacto puede servir para el tema Divi, ya que el Constructor Divi o Divi Builder contiene las mismas opciones en ambas plantillas.

Al activar el Constructor Divi, tenemos que elegir los módulos que necesitamos por separado, pudiendo alternar el módulo del formulario con otros como el de texto, código o mapas. El diseño de la página y configuración se vuelve personal en este aspecto.

Insertar el mapa

El mapa puede ser colocado de dos formas diferentes:

1. Con el módulo específico de mapas, que nos ofrece unas características extras como poder mostrar varios puntos en un sólo mapa o añadir una descripción en cada localización, y para lo que necesitaremos una clave API.
2. insertar el código de Google Maps, para lo cual utilizaremos un módulo de código en lugar de el de mapas.

Insertar el módulo del formulario de contacto

Como podréis ver en el vídeo del principio, podemos añadir todos los campos que queramos, aplicar la propiedad de obligatorio o no, elegir tener un captcha para evitar el correo masivo, el tamaño de cada campo a rellenar, escoger una página de redirección tras el envío del formulario y escribir un mensaje de agradecimiento entre otras muchas variables.

Podemos modificar los colores, tamaños de fuentes, espaciados, e insertar modificaciones a través de los estilos CSS. Vamos, que no tiene límites si nos lo proponemos.

Tal vez, el punto más comprometido es el de los campos a rellenar a la hora de recibirlos en nuestra bandeja de correo. Por defecto sólo se envía el cuerpo del mensaje, y el e-mail del usuario y el nombre, se podrían ver en la cabecera del correo. Para solucionar esto, debemos indicar en la casilla Patrón de Mensaje los campos que queremos recibir.

Pondremos entre los símbolos de tanto porciento el nombre del campo como lo designamos a la hora de crearlo. Si queremos que aparezca el correo electrónico, pondremos "%%Email%%", y así con todos los campos.

Cosas a tener en cuenta

Si vamos a solicitar datos o información, aunque sólo sea un correo electrónico, tenemos que darnos de alta en la Protección de Datos, el proceso no es muy complicado y es gratuito. Existen empresas que se dedican a realizar este proceso, pero entonces hay que pagar por sus servicios, no por estar al día con las leyes actuales.

Puede que queramos añadir algún tipo de campo diferente a los que nos ofrece el tema Extra, pero entonces tenemos que contar con algún plugin adicional de formularios que nos solvente nuestras necesidades.

Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.

---

Suscríbete para no perderte ningún artículo nuevo, te aviso por email

---

Los formularios de contacto son necesarios para tener una interacción con el usuario. ¿Hay otra opción más directa?