El Módulo de Formulario de Contacto de Divi

Cómo agregar, configurar y personalizar el módulo de formulario de contacto de Divi.

El módulo de formulario de contacto Divi facilita que los visitantes de tu sitio web se comuniquen contigo. El módulo de formulario de contacto tiene campos de entrada, un campo de correo electrónico, un área de texto, casillas de verificación, botones de opción y capacidades de menú desplegable.
Puedes hacer que los campos sean obligatorios para llenar, integrar con protección contra spam, y personalizar las notificaciones por correo electrónico y el mensaje de éxito.
Ver una demostración en vivo de este módulo

Cómo agregar el módulo de formulario de contacto Divi a tu página

Agrega una nueva página o edita una página existente.

Por defecto, el editor estándar de Gutenberg se carga cada vez que se añade un nuevo post o página en WordPress.

Haz clic en el botón morado debajo del título de la página. Usa el constructor Divi.

Una vez hecho clic, la página se recargará con el constructor visual Divi.

Mientras tu página se recarga, notarás tres opciones:

Construir desde cero
Elegir un diseño prehecho
Construir con IA

Construir desde cero

Esta opción carga el constructor Divi con un diseño de página en blanco. Elige esta opción si quieres empezar el diseño de tu página desde cero.

Elegir un diseño prehecho

Esta opción te permite elegir de nuestra gran biblioteca de diseños Divi pre-diseñados. Puedes elegir diseños prehechos por Divi, que hayas diseñado y guardado en tu biblioteca Divi, y páginas existentes en tu sitio web que puedes clonar.

Construir con IA

Esta opción te permite crear un diseño de página completo usando Divi IA. Usando tu indicación de texto e información sobre tu sitio web, puedes crear el esquema perfecto de la página, luego construirlo y llenarlo con contenido e imágenes, dándole vida en poco tiempo.

Agregar el módulo de formulario de contacto

Haz clic en el ícono verde + para insertar una fila.

Haz clic en el ícono gris + dentro de la fila para abrir la biblioteca de módulos Divi, que contiene todos los módulos incluidos con el tema Divi.

Encuentra el módulo de formulario de contacto y haz clic en él para cargar el módulo.
La biblioteca de módulos también es buscable. Escribe el nombre del módulo que quieres en la barra de búsqueda en la parte superior.

Nota: Cuando se añade el módulo de formulario de contacto a tus páginas, mostrará tres campos predeterminados:

Nombre
Correo electrónico
Mensaje

Cualquier otro campo que agregues se considera un campo personalizado y esos deben incluirse en el área de patrón de mensaje para que se muestren en tu correo electrónico.

Todas las opciones del módulo de formulario de contacto explicadas

Los ajustes aparecen automáticamente una vez que has añadido el módulo de formulario de contacto. Aquí es donde se configuran el contenido y los estilos de diseño de este módulo. Estos ajustes están organizados en tres grupos mediante pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Cómo usar el módulo de formulario de contacto Divi

Cómo agregar un nuevo campo

Los ajustes del módulo aparecen automáticamente cuando se carga el formulario de contacto por primera vez. En esta ventana hay campos para:

Nombre
Correo electrónico
Mensaje

Esos tres campos son los campos predeterminados del módulo de formulario de contacto.

Para agregar un nuevo campo, haz clic en Añadir nuevo campo. Para eliminar un campo, haz clic en el ícono de basura a la derecha de ese campo. Para acceder a los ajustes de un campo individual, haz clic en el ícono de engranaje a la izquierda de ese campo.

Opciones de contenido del campo

Esta pestaña es donde puedes editar el contenido del campo. Hay muchas configuraciones de diseño similares disponibles para campos individuales y para el módulo en general.

Texto

ID del campo – El ID del campo es la etiqueta única asociada con este campo. Puedes usar etiquetas únicas para personalizar el formato de las respuestas del formulario enviadas a tu correo electrónico.

Nota importante: El ID del campo no puede contener caracteres especiales como: ±, !,@,#,$,%,^,&,*,(,),+,|,,/,~. Para cada ID de campo, solo podemos usar letras inglesas mayúsculas y minúsculas.

Además, el ID del campo no puede contener espacios. Todos los espacios deben convertirse en _

Título – Escribe aquí el texto descriptivo que quieres que se muestre con este campo.

Contact Form Module's Field Text settings

Configuración de texto del campo del módulo de formulario de contacto

Opciones del campo
Por defecto, se agrega un campo de entrada.

Para cambiar el tipo de campo, haz clic en Opciones del campo y selecciona el que desees en el menú desplegable. Las opciones son:

Campo de entrada – para entradas de texto,
Campo de correo electrónico – para entradas de direcciones de correo electrónico,
Área de texto – para entradas de texto de varias columnas, como un campo de mensaje.
Casillas de verificación – usadas para crear un elemento de formulario de selección múltiple donde el usuario puede marcar múltiples opciones.
Botones de opción – similar a las casillas de verificación, pero con la diferencia principal de que el usuario solo puede marcar un botón de opción.
Menú desplegable – usado para crear una lista desplegable de opciones.

Puedes establecer una longitud mínima y máxima y símbolos permitidos para los campos de entrada.

Ejemplo: si el campo de entrada es para recolectar un número telefónico, puedes seleccionar Solo números (0-9) para que los números telefónicos deban ingresarse numéricamente.

Nota: Si quieres que este campo sea obligatorio para enviar el formulario, activa la opción Campo obligatorio a sí.

Configuración de tipos de campo del módulo de formulario de contacto

Contact Form Module's Field Types settings

Lógica condicional

Activar – Si quieres aplicar lógica condicional a este elemento de campo, activa esta opción.

Relación – Elige si quieres que se cumplan todas las condiciones o cualquiera de las condiciones para que este campo se muestre.

Reglas – Aquí configuras las reglas. Por ejemplo, podrías hacer que una selección de servicios se muestre solo después de que el usuario haya seleccionado su ubicación para que puedan seleccionar un servicio específico según donde viven.

Configuración de lógica condicional del campo del módulo de formulario de contacto

Contact Form Module's Field Conditonal Logic settings

Enlace

Si quieres aplicar un enlace clickeable a este campo, puedes hacerlo aquí.

URL del enlace del módulo – Pega la URL que quieres aplicar al campo aquí. Esto hace que todo el campo sea clickeable y, al hacer clic, dirigirá a los visitantes a la URL pegada aquí.

Nota: Para llenar los campos, los usuarios deben hacer clic en el campo para escribir o seleccionar una casilla, etc. Agregar un enlace aquí podría ser aconsejable solo en algunas situaciones.

Destino del enlace del módulo – Definir un destino de enlace determina si el enlace, al hacer clic, se abre en una pestaña nueva o en la misma ventana.

En la misma ventana – si quieres que el enlace se abra en la misma ventana.

En una pestaña nueva – si quieres que ese enlace se abra en una pestaña nueva.

Configuración de enlace del campo del módulo de formulario de contacto

Contact Form Module's Field Link settings

Fondo

En el grupo de opciones de fondo, se pueden configurar las siguientes opciones:

Color de fondo
Degradado de fondo
Imagen de fondo
Video de fondo
Patrón de fondo
Máscara de fondo

Cómo agregar un color de fondo

Haz clic en la primera pestaña, el ícono del cubo de pintura.

Haz clic en Añadir color de fondo y elige de la paleta de colores de tu sitio, o usa el ícono cuentagotas para encontrar un nuevo color.

Cómo agregar un degradado de fondo

Haz clic en la segunda pestaña, el ícono de degradado.

Haz clic en Añadir degradado de fondo.
Para cambiar los colores del degradado, haz clic en los puntos de degradado y selecciona un color de la paleta de colores de tu sitio o usa el ícono cuentagotas para elegir un color nuevo. Los puntos de degradado te permiten añadir más colores al degradado. Haz clic en cualquier parte de la barra para añadir un nuevo punto.

Opciones de degradado de fondo

Tipo de degradado – Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el deseado.

Dirección del degradado – Puedes cambiar la dirección del degradado arrastrando la barra deslizadora o escribiendo un valor numérico.

Repetir degradado – Activa esta opción a sí si quieres que el degradado se repita.

Unidad de degradado – La unidad de degradado cambia cómo se calculan los puntos de parada del degradado. Selecciona el menú desplegable para cambiar la unidad.

Colocar degradado sobre la imagen de fondo – Si se aplica una imagen de fondo, puedes colocar el degradado sobre la imagen activando esta opción.

Cómo agregar una imagen de fondo

Haz clic en la tercera pestaña, el ícono de imagen.

Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo

Usar efecto parallax – Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido de primer plano, dando la ilusión de un efecto 3D), activa esta opción. Por defecto, esta configuración está desactivada.

Tamaño de imagen de fondo – Elige el tamaño de tu imagen de fondo seleccionando un tamaño del menú desplegable.

Posición de imagen de fondo – Elige la posición de la imagen de fondo seleccionando una posición del menú desplegable.

Repetición de imagen de fondo – Elige si y cómo se repite la imagen de fondo seleccionando una opción del menú desplegable.

Mezcla de imagen de fondo – Elige cómo se mezcla la imagen de fondo con otras capas en el módulo seleccionando una opción del menú desplegable.

Cómo agregar un video de fondo

Haz clic en la cuarta pestaña, el ícono de video.

Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo

Mp4 vs Webm – Recomendamos subir una versión mp4 y una versión webm del video porque no todos los navegadores soportan formatos webm. Subir ambos formatos asegura que tu video se reproduzca en todos los dispositivos y navegadores.

Ancho del video de fondo – Establece el ancho del video escribiendo un valor numérico.

Alto del video de fondo – Establece la altura del video escribiendo un valor numérico.

Pausar video cuando otro video se reproduce – Si quieres que el video de fondo se pause cuando otro video está reproduciéndose, activa esta opción. Por defecto, el video se pausará cuando no esté visible. Si quieres que el video continúe, desactiva esta opción.

Cómo agregar un patrón de fondo

Haz clic en la quinta pestaña, el ícono de patrón.

Haz clic en Añadir patrón de fondo.
Elige el tipo de patrón que deseas en el menú desplegable.

Opciones de patrón de fondo

Color del patrón – Selecciona el color del patrón de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Transformación del patrón – Aquí puedes transformar el patrón horizontalmente, verticalmente, rotarlo o invertirlo.

Tamaño del patrón – El tamaño del patrón es donde puedes seleccionar el tamaño: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las opciones de ancho y alto del patrón. Arrastra la barra deslizadora o escribe un valor numérico para definir esas opciones.

Origen de repetición del patrón – Aquí puedes seleccionar el origen desde el cual se repite el patrón.

Desplazamiento horizontal y vertical del patrón – También puedes ajustar los desplazamientos horizontal y vertical del patrón.

Repetición del patrón – Aquí puedes elegir cómo se repite el patrón: horizontalmente, verticalmente y más.

Modo de mezcla del patrón – Esto define cómo la capa del patrón interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Cómo agregar una máscara de fondo

Haz clic en la sexta pestaña, el ícono de máscara.

Haz clic en Añadir máscara de fondo. Selecciona el tipo de máscara que quieres mediante el menú desplegable.

Opciones de máscara de fondo

Color de la máscara – Elige el color de la máscara de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Transformación de la máscara – Aquí puedes transformar la máscara horizontalmente, verticalmente, rotarla o invertirla.

Relación de aspecto de la máscara – Aquí puedes establecer la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción entre su ancho y su alto.

Tamaño de la máscara – Puedes seleccionar el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las opciones de ancho y alto de la máscara. Arrastra la barra deslizadora o escribe un valor numérico para definir esas opciones.

Modo de mezcla de la máscara – Esto define cómo la capa de la máscara interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Contact Form Module's Field Background Mask settings

Campos

Si deseas aplicar estilos únicos a un campo individual, aquí es donde lo haces.

Color de fondo de los campos – Elige un color de fondo para los campos de la sección de comentarios. Selecciona desde la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un nuevo color.

Color del texto de los campos – Elige el color del texto dentro de los campos. Selecciona desde la paleta de colores de tu sitio o haz clic en el cuentagotas para encontrar un nuevo color.

Color de fondo del campo en foco – Elige un color de fondo para los campos que están siendo usados actualmente. Por ejemplo, puedes cambiar el color de fondo cuando un visitante hace clic en ese campo y empieza a escribir. Selecciona desde la paleta de colores o usa el cuentagotas para elegir un nuevo color.

Color del texto del campo en foco – Elige el color del texto cuando el campo está enfocado. Selecciona desde la paleta o usa el cuentagotas para un nuevo color.

Margen de los campos – Los márgenes añaden espacio alrededor del elemento. Si deseas agregar espacio alrededor de los campos, hazlo aquí escribiendo un valor numérico en las casillas o usando las flechas para aumentar o disminuir el margen.

Relleno (padding) de los campos – El padding agrega espacio dentro del elemento. Si quieres espacio dentro de los campos, escribe un valor numérico o usa las flechas para ajustarlo.

Fuente de los campos – Elige la fuente para el texto. La fuente predeterminada está seleccionada automáticamente; sin embargo, puedes elegir otra o subir una fuente personalizada desde el menú desplegable.

Grosor de la fuente – Haz clic en el menú desplegable para seleccionar el grosor (negrita) de la fuente del campo.

Estilo de la fuente – Elige el estilo de la fuente para el campo:

Cursiva
Mayúscula inicial
Versalitas
Subrayado
Tachado

Alineación del texto en los campos – Elige la alineación del texto solo para el campo:

Izquierda
Centro
Derecha
Justificado

Tamaño del texto de los campos – Elige el tamaño de la fuente arrastrando el deslizador o escribiendo un valor numérico.

Espaciado entre letras – Ajusta el espacio entre letras arrastrando el deslizador o escribiendo un número. A mayor número, más espacio entre letras.

Altura de línea – Ajusta el espacio entre líneas de texto con el deslizador o un valor numérico. A mayor número, mayor espacio entre líneas.

Sombra del texto – Añade sombra al texto del campo. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

Esquinas redondeadas – Si quieres redondear las esquinas de los campos, escribe un valor numérico. A mayor valor, más redondeadas las esquinas. Los valores de las esquinas están vinculados automáticamente (se ve con el ícono de cadena azul); si quieres valores diferentes para cada esquina, haz clic en la cadena para desvincularlas. Si están vinculadas, se actualizarán automáticamente al cambiar un valor.

Estilos de borde de los campos – Aquí puedes añadir un borde a los campos. Puedes aplicarlo a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

Ancho del borde – Define el grosor del borde. Para un borde más grueso, aumenta el número. Debe ser al menos 1px para que se muestre.

Color del borde – Escoge el color del borde desde la paleta predeterminada o usa el cuentagotas para seleccionar otro color.

Estilo del borde – Selecciona el estilo del borde: sólido, discontinuo, punteado, doble, surco, relieve, inset, outset o ninguno.

Usar bordes en foco – Activa esta opción para añadir un borde visible cuando el campo está en foco (seleccionado).

Contact Form Module's Field individual settings

Pestaña Contenido