Entrar al aula
×

Formularios de contacto en una web

Además de haber diseñado un sitio Web con información sobre nuestra empresa y servicios o productos, es necesario que los usuarios puedan ponerse en contacto con nosotros, ya sea a través de un formulario de contacto con el que puedan realizar consultas o visitando nuestro local o empresa físicamente y para lo cual insertaremos un mapa de localización con la ubicación exacta.

Existen muchas formas de incluir un formulario de contacto en una página Web, la más común es instalando un plugin, como por ejemplo CONTACT FORM 7, uno de los más utilizados y con más de un millón de instalaciones o como en el caso del CONSTRUCTOR DIVI, utilizando el módulo FORMULARIO DE CONTACTO que ya viene incluido.

CONTACT FORM 7 permite añadir más campos que el formulario de DIVI pero su diseño es más austero y si no disponemos de conocimientos de CSS no podremos conseguir que tenga un aspecto similar al resto de diseño de nuestro sitio. Si solo necesitamos un formulario de contacto con los habituales campos NOMBRE, DIRECCION DE CORREO y MENSAJE, en nuestro caso el módulo de DIVI es ideal ya que mantendrá la línea de diseño de nuestro sitio y será fácilmente personalizable a nuestro antojo.

En la pantalla inferior podemos ver la diferencia entre ambos.

Cómo insertar un formulario de contacto

Una vez finalizada la sección de anchura completa, continuamos trabajando en la sección estándar.

Paso 1
Presionamos sobre INSERTAR COLUMNA para elegir un formato de dos columnas de 2/3 y 1/3, donde colocaremos el formulario de contacto y un cuadro de texto con la dirección.

Paso 2
Automáticamente añadirá dos columnas para añadir un módulo en cada una de las columnas, es decir, habrá añadido dos huecos para añadir dos módulos presionando sobre INSERTAR MÓDULO(S) en cada uno de ellos. Presionamos sobre INSERTAR MÓDULO (S) de la columna de 2/3 (1).

Paso 3
Hacemos clic sobre el módulo FORMULARIO DE CONTACTO.

Paso 4
Para configurarlo activamos la opción MOSTRAR CAPTCHAEs una secuencia de números y/o letras que de forma distorsionada se utilizan en determinados servicios, como formularios de contacto, para dificultar el reconocimiento de esos números y/o letras por robots o spambots de determinadas páginas Web que acceden a esos servicios para realizar spam simulando que son personas. (1) con el fin de asegurarnos de que quien nos envíe el formulario sea una persona y no un robot, introducimos nuestra dirección de CORREO ELECTRÓNICO (2) para recibir los correos de los usuarios, le pondremos un TÍTULO (3) y previsualizaremos (4).

Paso 5
Vista previa.

Aunque anteriormente se comentó que en este curso solo vamos a trabajar sobre las opciones AJUSTES GENERALES de cada módulo, vamos a ver un pequeño ejemplo de AJUSTES AVANZADOS DE DISEÑO para cambiar el color azul del TÍTULO y BOTÓN DEL FORMULARIO por naranja, aunque permite otras muchas opciones como tamaño del texto, separación entre letras, relleno del botón, etc., que os aconsejo explorar.

Para ello presionamos sobre el botón inferior rosa con la X para abandonar la previsualización y volver al modo diseño y hacemos clic sobre la pestaña AJUSTES AVANZADOS DE DISEÑO.

Paso 6
En TÍTULO COLOR DEL TEXTO (1) cambiaremos a color naranja presionando sobre ELIGE UN COLOR, en BOTÓN COLOR DEL TEXTO (3) cambiaremos a color naranja presionando sobre ELIGE UN COLOR y en BOTÓN COLOR DE BORDE (4) cambiaremos a color naranja presionando sobre ELIGE UN COLOR y después presionamos sobre el icono del ojo para ver la vista previa.

No obstante, para poder cambiar los colores del botón, debemos activar la opción UTILIZAR ESTILOS PERSONALIZADOS PARA EL BOTÓN (2) ya que de lo contrario no aparecerán las opciones BOTÓN COLOR DEL TEXTO (3) ni BOTÓN COLOR DE BORDE (4).

Paso 7
Vista previa, para guardar presionar sobre GUARDAR Y SALIR.

Paso 8
Tras guardar y salir del formulario de contacto, hacemos clic sobre INSERTAR MÓDULO(S) de la columna de 1/3 y añadimos un nuevo módulo de TEXTO para añadir la dirección.

Paso 9
El cuadro de texto no dispone de muchos ajustes generales, en CONTENIDO escribimos la dirección y desde la barra de herramientas del editor podemos cambiar tamaño, color, alineación, etc., presionamos sobre el ojo para ver la vista previa.

Paso 10
Tras visualizar la vista previa, presionamos sobre GUARDAR Y SALIR.

Paso 11
Una vez que hemos terminado de construir la página de contacto, presionamos sobre el botón ACTUALIZAR (1) para guardar los cambios y sobre el botón VISTA PREVIA DE LOS CAMBIOS (2) para ver una previsualización de la página CONTACTO.

Paso 12
Vista previa de la página CONTACTO ya finalizada.