Documentación de Divi - El módulo Formulario de contacto

Divi - Documentación en español

Actualizada v3.28

El módulo Formulario de contacto

La comunicación es la piedra fundamental de cualquier negocio. Con Divi, puede agregar Formularios de contacto fácilmente en cualquier parte del sitio. Divi 2.6 permite añadir nuevos campos de texto, además de los predeterminados Nombre, Correo electrónico y Mensaje.

Divi - Módulo "Formulario de contacto"

Cómo añadir un módulo Formulario de contacto en una página

Antes de poder añadir un módulo Formulario de contacto, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Divi - Insertar módulo Formulario de contacto

Localice el módulo Formulario de contacto dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “formulario” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Sistema de ayuda de Divi

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtro de búsqueda en módulos

Ver más información aquí.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como los campos y el texto. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.

Texto
  • Título – Defina aquí el título para el formulario de contacto.
  • Mensaje de éxito – Introduzca aquí el mensaje que desea mostrar luego del envío exitoso del formulario. Deje el campo en blanco para usar el predeterminado.
  • Botón “Enviar” – Introduzca aquí el texto para el botón «Enviar» del formulario.
Correo electrónico
  • Dirección de correo electrónico – Escriba la dirección de correo electrónico donde deberían ser enviados los mensajes desde este formulario.
  • Patrón del mensaje – En este campo puede definir el patrón personalizado para el mensaje de correo electrónico. Los campos se deben incluir en siguiente formato: %%id_campo%%. Por ejemplo, si desea incluir el campo con la ID telefono y el campo con la ID mensaje, puede usar el siguiente patrón: Mi mensaje es %%mensaje%% y número de teléfono es %%telefono%%. Si deja el campo en blanco se usará el mensaje predeterminado.
Elementos
  • Mostrar Captcha – Para mayor seguridad puede mostrar un CAPTCHA en el formulario de contacto, seleccionándolo de este menú desplegable.
Redirigir
  • Activar redirección de URL – Si selecciona esta opción, el usuario será redirigido luego del envío exitoso a la URL que especifique a continuación.
  • URL de redirección – Introduzca aquí la URL de redirección.
Enlace
  • URL del enlace del módulo – Escriba una URL válida en este campo para convertir el módulo entero en un enlace. No se creará un enlace si se deja el campo en blanco.
  • Destino del enlace del módulo – Elija si el enlace se abre en la misma ventana o no.
Fondo
  • Fondo – Aquí puede definir un color de fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
Etiqueta de administración
  • Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Formulario de contacto en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como fuente, color, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.

Campos
  • Color de fondo de Campos – Elija un color para rellenar los campos del módulo.
  • Color de texto de Campos – Elija un color para usar en el texto escrito dentro de los campos de entrada.
  • Color de fondo al enfocar Campos – Cuando un visitante hace clic en un campo de entrada, aparece enfocado. Puede elegir un color para usar en el fondo del campo de entrada mientras está enfocado.
  • Color de texto al enfocar Campos – Cuando un visitante hace clic en un campo de entrada, aparece enfocado. Puede elegir un color para usar en el texto del campo de entrada mientras está enfocado.
  • Margen de Campos – El margen es el espacio que se agrega fuera del campo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha).
  • Relleno de Campos – El relleno es el espacio que se agrega dentro del campo, entre sus extremos y el contenido. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del campo.
  • Fuente de Campos – Puede cambiar la fuente del texto del módulo Buscar, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Campos Peso de fuente – Esto controla el peso de la fuente del texto de entrada. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Campos Estilo de fuente – Esto controla el estilo de la fuente del texto de entrada. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Campos – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Campos – Aquí puede ajustar el tamaño del texto de entrada. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Campos – El espacio entre letras es la separación entre cada uno de los caracteres del texto de entrada. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Campos – La altura de línea afecta el espacio entre cada una de las líneas de texto de entrada. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Campos – Elija un estilo de sombra para activar en el texto de entrada. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Campos Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Campos Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Campos Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Campos Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Campos Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Usar borde al enfocar – Si se activa esta opción, se añadirán bordes a los campos de entrada cuando están enfocados y se mostrarán las siguientes opciones.
  • Enfoque de campos Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Enfoque de campos Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Enfoque de campos Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Enfoque de campos Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Enfoque de campos Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Sombra de Campos – Elija un estilo de sombra para activar en el campo. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Texto
  • Alineación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
  • Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
  • Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
  • Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
  • Color de sombra de texto – Elija el color de la sombra del selector.
Título Texto
  • Nivel de encabezado Título – Seleccione aquí la etiqueta HTML de encabezado que se usará para este elemento.
  • Fuente de Título – Puede cambiar la fuente del texto del módulo Carrusel, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Título Peso de fuente – Esto controla el peso de la fuente del texto del título. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Título Estilo de fuente – Esto controla el estilo de la fuente del texto del título. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
  • Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
  • Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Captcha Texto
  • Fuente de Captcha – Puede cambiar la fuente del texto del captcha, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Captcha Peso de fuente – Esto controla el peso de la fuente del texto del campo del formulario. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Captcha Estilo de fuente – Esto controla el estilo de la fuente del texto del campo del formulario. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Tamaño de texto de Captcha – Aquí puede ajustar el tamaño del texto del campo del formulario. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Color de texto de Captcha – Si desea cambiar el color de texto del campo del formulario, elija el color del selector en esta opción.
  • Espacio entre letras de Captcha – El espacio entre letras es la separación entre cada uno de los caracteres del texto del campo del formulario. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Captcha – La altura de línea afecta el espacio entre cada una de las líneas del campo del formulario. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Captcha – Elija un estilo de sombra para activar en el texto del campo del formulario. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Botón
  • Usar estilos personalizados para Botón – Si activa esta opción aparecerán varios ajustes de personalización para el botón Responder, que le permitirán cambiar la apariencia.
  • Tamaño de texto de Botón – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
  • Color de texto de Botón – De manera predeterminada, los botones tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.
  • Color de fondo de Botón – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
  • Ancho del borde de Botón – Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.
  • Color del borde de Botón – De manera predeterminada, los bordes tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.
  • Radio del borde de Botón – El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.
  • Espacio entre letras de Botón – El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Fuente de Botón – Puede cambiar la fuente del texto del botón, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Peso de fuente – Esto controla el peso de la fuente del texto del botón. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Estilo de fuente – Esto controla el estilo de la fuente del texto del botón. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Mostrar icono de Botón – Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.
  • Icono de Botón – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
  • Color de icono de Botón – De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.
  • Ubicación de icono de Botón – Puede elegir mostrar el icono del lado derecho o izquierdo.
  • Solo mostrar icono al pasar el cursor en el Botón – De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.
  • Alineación del botón – Aquí puede elegir la posición del botón: alineado a la izquierda, al centro o a la derecha.
  • Sombra de texto de Botón – Elija un estilo de sombra para activar en el texto del botón. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Margen de Botón – El margen añade espacio adicional al exterior del elemento, aumentando la distancia entre el elemento y otros elementos de la página.
  • Relleno de Botón – El relleno añade espacio adicional al interior del elemento, aumentando la distancia entre el contorno del elemento y su contenido interno.
  • Sombra de botón – Use estos ajustes para añadir una sombra en el botón. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Tamaño
  • Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
  • Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
  • Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
  • Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
  • Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.
Espaciado
  • Margen – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.
Animación
  • Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
  • Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
  • Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
  • Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
  • Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
  • Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
  • Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
  • Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado al módulo, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar el módulo dentro de la hoja de estilos del tema hijo.

Clases & ID CSS
  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
  • Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos.
CSS personalizado

Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el módulo.

Atributos
  • Relación del botón – Especifique el valor del atributo rel del enlace. El atributo rel especifica la relación entre el documento actual y el documento vinculado.
Visibilidad
  • Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.
  • Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
  • Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
  • z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.
Transiciones
  • Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
  • Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
  • Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Opciones de contenido del campo individual

Texto
  • ID del campo – Defina aquí una ID única para el campo; por ejemplo, telefono. Use solo letras, preferentemente en minúsculas, sin caracteres especiales ni espacios.
  • Título – Escriba aquí el título, que será mostrado dentro del campo; por ejemplo, Teléfono.
Opciones de campo
  • Tipo – Seleccione aquí el tipo de campo que está insertando: Campo de entrada de texto, el cual ocupa una línea y admite textos breves; Campo “Correo electrónico”, el cual ocupa una línea y solo admite direcciones de correo electrónico; Área de texto, el cual admite textos extensos; Casilla de selección, la cual admite varias opciones con un cuadro para seleccionar; Botones radio, los cuales admiten varias opciones con círculos para seleccionar, o Menú desplegable, el cual admite varias opciones en formato menú.
  • Longitud mínima – Use este ajuste para asignar un número mínimo de caracteres que se deben introducir en este campo. Deje en cero para eliminar la restricción.
  • Longitud máxima – Use este ajuste para asignar un número máximo de caracteres que se deben introducir en este campo. Deje en cero para eliminar la restricción.
  • Símbolos permitidos – Esta opción se mostrará cuando seleccione el tipo Campo de entrada de texto. Aquí puede seleccionar qué símbolos estarán permitidos en el campo. Puede elegir entre Solo letras, Solo números, o Solo alfanumérico.
  • Seleccionado por defecto – Esta opción solo se mostrará cuando use el tipo Casilla de selección o Botones radio. Si deja marcada la/s casilla/s o uno de los botones, quedará/n seleccionado/s de manera predeterminada. Podrá también añadir un texto con un enlace a la opción de casilla o botón. Vea más información aquí.
  • Campo obligatorio – Aquí puede definir si el campo debe ser obligatorio u opcional.
Lógica condicional
  • Activar lógica condicional – La lógica condicional permite que el campo solo sea visible cuando todas o alguna de las siguientes reglas se cumplan.
  • Relación – Esta sección le permite mostrar u ocultar el campo de acuerdo con la información que rellene el usuario en otros campos del formulario. Puede elegir si se deben cumplir alguna o todas las reglas, las cuales tendrá que añadir a continuación.
  • Reglas – Esta opción permite hacer visibles los campos solo en el caso de que uno, algunos o todos los restantes campos cumplan los criterios que aquí se definan.
Enlace
  • URL del enlace del módulo – Escriba una URL válida en este campo para convertir el módulo entero en un enlace. No se creará un enlace si se deja el campo en blanco.
  • Destino del enlace del módulo – Elija si el enlace se abre en la misma ventana o no.
Fondo
  • Fondo – Aquí puede definir un fondo para el campo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.

Opciones de diseño del campo individual

Diseño
  • Ancho completo – Si activa este ajuste, el campo tomará el 100% del ancho del área que lo contiene, de lo contrario ocupará el 50%.
Campo Texto
  • Color de fondo de Campo – Puede usar esta opción para asignar un color de fondo al campo individual.
  • Color de texto de Campo – Si desea cambiar el color de texto del campo individual, elija el color del selector en esta opción.
  • Color de fondo al enfocar Campo – Cuando un visitante hace clic en un campo de entrada, aparece enfocado. Puede elegir un color para usar en el fondo del campo de entrada mientras está enfocado.
  • Color de texto al enfocar Campo – Cuando un visitante hace clic en un campo de entrada, aparece enfocado. Puede elegir un color para usar en el texto del campo de entrada mientras está enfocado.
  • Fuente de Campo del formulario – Puede cambiar la fuente del texto del campo individual, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Campo Peso de fuente – Esto controla el peso de la fuente del texto del campo individual. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Campo Estilo de fuente – Esto controla el estilo de la fuente del texto del campo individual. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Campo – Esto controla la alineación del texto del campo individual: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Campo – Aquí puede ajustar el tamaño del texto del campo individual. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Campo – El espacio entre letras es la separación entre cada uno de los caracteres del texto del campo individual. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Campo – La altura de línea afecta el espacio entre cada una de las líneas del campo individual. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Campo – Elija un estilo de sombra para activar en el texto del campo individual. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Texto
  • Alineación del texto – Esto controla la alineación del texto dentro del campo: izquierda, derecha, centrada o justificada.
Tamaño
  • Ancho – De manera predeterminada, el campo se ampliará al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
  • Ancho máximo – Si se establece un ancho máximo, se evitará que el campo sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Alineación del módulo – Aquí puede elegir la posición del campo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
  • Altura mínima – Cuando se establece una altura mínima, el campo siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del campo permanezca dinámica.
  • Altura – Esto establece un valor de altura estática para el campo. Una vez establecida, la altura del campo ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del campo.
  • Altura máxima – Si se establece una altura máxima, se evitará que el campo sobrepase el valor de altura definido. A medida que el contenido del campo aumenta y supera la altura máxima, desbordará el contenedor del campo.
Espaciado
  • Margen – El margen es el espacio que se agrega fuera del campo individual, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno – El relleno es el espacio que se agrega dentro del campo individual, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este campo individual. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el campo individual. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al campo individual: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para el módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.

Opciones avanzadas del campo individual

CSS personalizado

Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el campo individual.

Visibilidad
  • Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.
  • Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
  • Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
  • z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.
Transiciones
  • Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
  • Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
  • Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Añadir enlaces a las casillas de selección/botones radio

Un uso común para los campos personalizados del tipo casilla de selección o botón radio, es registrar el consentimiento para el manejo de datos de acuerdo con ciertas regulaciones, tales como el RGPD (Reglamento General de Protección de Datos). En estos casos, puede que quiera incluir un enlace a su política de privacidad o términos del servicio desde un texto con una casilla de selección. Para añadir un enlace a un determinado elemento del campo, haga clic en el icono del enlace y añada la URL y el texto del enlace en los espacios correspondientes.

Divi - Insertar enlace en casilla de seleccion

Divi - URL y texto del enlace en casilla de selección

Ver demostración en vivo del módulo

Facebook
WhatsApp
Twitter
LinkedIn
Pocket
Reddit
Enviar por correo
Imprimir

143 comentarios en “El módulo Formulario de contacto”

  1. Hola, al momento de crear el formulario, por defecto, los envía por método Method=»Post» y Action=»sitio/contacto», bueno, he aquí me pregunta, quisiera cambiar el valor de Action en el Form, si existe para poder cambiarlo o desde el editor de temas lo puedo hacer.
    Espero que me puedan ayudar.

    1. Hola, Sebastián.

      Para eso necesitás código personalizado. En Divi > Opciones del tema > Integración > Añadir código al <body> (sirve para estadísticas de visitas) pegar lo siguiente:

             <script type="text/javascript">
               jQuery(document).ready(function($){
      			$('.et_pb_contact_field input').removeAttr('placeholder');
      			$('.et_pb_contact_field textarea').removeAttr('placeholder');
      		});
             </script>
      

      Y en el archivo style.css del tema hijo (o recuadro CSS personalizado de las opciones del tema):

      .et_pb_contact_form_label {
          display: block;
      }
      

      Saludos.

    1. Hola, Sofía.

      El color del mensaje de éxito se puede cambiar mediante el siguiente código CSS:

      .et-pb-contact-message {
          color: #000;
      }
      

      Usá el valor HEX que necesites.

      Saludos.

        1. Hola, James.

          Disculpas por la demora.

          El código va o bien en el recuadro CSS personalizado de las opciones de Divi (para todas las páginas), o bien en la página que contenga el formulario, dentro del CSS personalizado de los ajustes de la página.

          Saludos.

          1. Segui las instrucciones y funciona perfecto. Mil gracias. Mi ruta fue: En la consola de WordPress Ir Divi –> Personalizador de temas –> CSS Adicional –> (Al final de este bloque, en la parte inferior esta donde se pega el codigo). Publicas y listo

        1. Hola, Juan.

          Puede que necesites agregar las declaraciones !important. Ejemplo:

          .et_contact_bottom_container {
              float: none !important;
              text-align: center !important;
              display: inherit !important;
          }
          

          Saludos.

  2. Me he dado cuenta que al agregar otros campos como checkboxes o radiobuttons no se le puede cambiar de color a la etiqueta del campo, como puedo hacer para cada etiqueta de los campos nuevos tenga un color diferente?

    1. Hola, César.

      El color de los elementos se puede cambiar desde las opciones del campo, pestaña Diseño (a menos que estés usando una versión anterior de Divi). Si te referís al título del campo, es necesario usar CSS personalizado dentro de los ajustes de la página (pestaña Avanzado):

      .et_pb_contact_field_4 .et_pb_contact_field_options_title {
          color: #FF0000;
      }
      

      .et_pb_contact_field_4 hace referencia al campo correspondiente (si hay más de uno y querés colores diferentes). El número siempre es uno menos de la posición del campo. Ejemplo: si el campo de selección está ubicado en el quinto lugar, la clase correspondiente será .et_pb_contact_field_4; si está en el cuarto, .et_pb_contact_field_3, etc.

      Saludos.

  3. Hola, quisiera saber si hay una manera de poder asignar un nombre o identificar a diferentes formularios dentro de un mismo sitio web, así cuando lo recibo entiendo desde que sección se comunicó para entender qué servicio está necesitando.

    1. Hola, Lucía.

      En el formulario de Divi, la única alternativa sería usar el Patrón del mensaje y rellenarlo con las ID correspondientes a cada campo más un texto que identifique de qué página o sección se trata (ejemplo: «Enviado desde Servicios»).

      Tener en cuenta que no servirá si el módulo del formulario es global, ya que tomará el mismo patrón en todos.

      Saludos.

  4. Hola, cómo se puede cambiar el color de los textos de error al completar el formulario??…. el texto «De correo electrónico no válido» que aparece cuando el usuario no escribe bien.

    Muchas gracias!

  5. Hola!
    ¿Es posible mandar el mensaje del formulario a varios correos electrónicos?
    Me gustaría que llegaran a dos cuentas diferentes cada vez que alguien rellene los datos.

    Gracias!

    1. Hola, Guille.

      En el campo Correo electrónico escribí las direcciones separadas por una coma. Ejemplo: mail1@servidor.com,mail2@servidor.com,mail@sitio.net… etc.

      Saludos.

        1. Hola, Ricardo.

          El módulo de Divi no incluye esa opción. Una alternativa sería crear una dirección de email específica para el formulario, y configurar una respuesta automática desde el panel de control del hosting.

          Saludos.

  6. Hola. El mensaje del formulario no llega al correo registrado en Contenido/Correo electrónico. Ya verifiqué que sea una cuenta de correo que funcione correctamente. ¿Qué puedo hacer?

  7. Hola Buenas noches, Se que ya adjunstaste el codigo para cambiar el color al texto de exito.
    me gustaria saber si tambien se puede modificar el texto que aparece cuando no llenas ningun campo y presionas Enviar:
    Aparece un texto similar a este:
    -Por favor llenar los cuadros siguientes;
    -Nombre
    -Apellido
    -Telefono
    -Mensaje

    y si esto es posible en que cuadro iria el codigo?

    por que al abrir la pestaña CSS Personalizado hay varios cuadros:
    *Antes
    *Elemento Principal
    *Despues
    *Titulo de Contacto
    *Boton de Contacto
    *Campos de Formulario
    *Campos de Mensaje
    *Campo de Captcha
    *Texto de Captcha

    en que cuadro de estos tengo que pegar el codigo?
    y la ultima observacion!
    al pegar el codigo me salen dor errores ;

    *Expected RBRACE.
    *Unexpected token }

  8. Hola, muchas gracias por la información que prestas.

    Me podrías explicar cómo puedo saber la página de envío (desde la que se envía el formulario). Es decir, cuando recibo una solicitud vía formulario, además de los campos Nombre, Email, mensaje,… que también me indique la Página o URL desde la que se envía la solicitud.

    Muchas gracias de antemano.

    1. Hola, Valen.

      Gracias por tu comentario.

      Lamentablemente, Divi no ofrece esa opción para configurarla de manera dinámica, la única alternativa sería esta, que no serviría si el formulario está guardado como global.

      Saludos.

      1. Muchas gracias por tu respuesta, Aye.

        Es un lástima que Divi no ofrezca esta opción tan importante en el módulo del formulario, ni siquiera con todas las mejoras que trae la nueva versión 4.0. La alternativa que propones es genial pero claro, como dices, no sirve con el formulario global 🙁

        Saludos.

  9. Hola, muy buenas, gracias por el contenido que publicas en este blog, es muy útil e interesante.
    Tengo una consulta que me está haciendo volverme loco con una web. Cuando uso dos formularios DIVI en el mismo html, al darle al botón de enviar me carga el otro formulario debajo del mensaje de agradecimiento. ¿Te ha pasado alguna vez? ¿Sabes de alguna manera de solucionarlo? ¡Muchas gracias de antemano!

    1. Hola, Isidro.

      Gracias por tu comentario.

      La verdad, nunca lo he visto, pero suena a que es algún bug de una versión anterior. ¿Estás usando la última versión (4.3.2)?

      Saludos.

  10. Hola, para empezar gracias por el articulo.He creado un formulario de contacto completo, con su casilla de aceptar la politica de privacidad y todo lo que le toca.El problema es que cuando relleno los campos y le doy a enviar el boton solo cambia de color pero no pasa nada mas,ni envia el mensaje ni nada ¿Alguna solución? y gracias de antemano.

  11. Hola buen día. Quisiera saber dónde puedo visualizar los contactos que se registran y los mensajes que envían quienes llenan el formulario de Divi Builder, Gracias

    1. Hola, Otto.

      Me temo que en el formulario de Divi no hay otra que introducir uno por uno los nombres de los países. 😱

      Una opción sería usar Contact Form 7 más el plugin Listo, que ya viene con la lista cargada.

      El código para el campo sería algo así: [select* your-country data:countries first_as_label "País"].

      Para adaptar los estilos de CF7 a Divi está este tutorial.

      Saludos.

      1. Agradezco tanto tu respuesta, haré una lista en divi voy a guardar en la biblioteca de formularios de divi para futuro, de pronto creo que es más fácil con contact form

    1. Hola, Abigail.

      La dirección de mail del remitente está en la cabecera de respuesta (reply-to) del mensaje. Es decir, al hacer clic en Responder dentro de tu cliente de correo, podrás ver la dirección.

      En todo caso, para asegurarte de que recibís la dirección del remitente, configurala en el Patrón de mensaje, como se detalla en el tutorial (Opciones de contenido > Correo electrónico).

      Saludos.

  12. Hola
    Estoy con divi 4.0 editando un módulo de formulario. ¿Es posible hacer que se envíe automáticamente un email de respuesta al remitente una vez éste pulsa botón de enviar? Con esto me aseguro de que contactaré con el cliente en caso de que haya escrito mal su email al rellenar el formulario (si incluyo una información tipo «recibirás un email de respuesta, en caso contrario tal vez hayas escrito mal tu dirección, rellena de nuevo el formulario). ¿Puedo hacer esto con divi o tengo que usar CForms 7? Gracias

    1. Hola, Diego.

      Gracias por tu comentario.

      Con Divi es posible enviar una copia exacta del mensaje, mediante código en el archivo functions.php del tema hijo. En este Git encontrarás el código. No he encontrado ninguna opción para enviar una respuesta automática. Para eso, sí es recomendable usar Contact Form 7.

      Saludos.

      1. Me temo que me interesa que el cliente reciba una respuesta predeterminada, no una copia exacta del mensaje. Gracias por la información de todas formas. Tal vez ésta sea una posible función a incorporar en futuras actualizaciones de DIVI

  13. Hola. Tengo un problema con un formulario que tiene campos de fecha. ¿existe la posibilidad de forzar el formato para que siempre se introduzca el mismo formato… ejemplo: 21/05/2020? Gracias

  14. Hola, como puedo hacer para que se envié a varios correos pero según el campo que seleccione. Es decir quiero que el formulario tenga un campo selección y que según la elección que escoja envié a un correo.

  15. Buenas tardes, al rellenar el formulario de contacto, en la pestaña del checkbox de Acepto la política de privacidad, cuando clicas en el no se pone el símbolo en forma de V de que has marcado la casilla, aunque si que la marca, porque si no le das no te deja enviar el mensaje

    1. Hola, Rafael.

      Eso ocurre porque está tomando el color de fondo del campo de los ajustes de diseño de todo el módulo (y el color del símbolo es blanco, por lo que no contrasta). Aplicale un color de fondo transparente al ajuste del campo específico para la casilla de selección.

      Saludos.

  16. Hola. Excelente artículo. Tengo la versión de 4 de divi pero tengo problemas con el módulo Optin en el campo email, cuando el usuario ingresa su email completo y agrega un espacio extra en el campo, el optin no envía los datos a no ser que el usuario elimine el espacio extra, esto me causa rebote en la landing ya que en el movil al autocompletar el formulario se agrega un espacio vacío extra.

    1. Hola, Elvis.

      Gracias por tu comentario.

      En la versión 4.4.9 se corrigió un error en este módulo; no sabría decirte si fue específicamente ese. En caso de que estés usando esa versión o superiores, tendrías que contactar con el soporte.

      Saludos.

  17. Buenas tardes,
    excelente ayuda la que prestáis.
    Tengo una duda.
    He hecho con DIVI el formulario de contacto siguiendo los pasos.
    Pero cuando envío a través de la web el formulario para hacer pruebas no me sale el correo de quien lo envía.
    ¿A qué puede deberse?

    1. Hola, Ezequiel.

      Fijate que está en las Opciones de contenido, allí hay que introducir la dirección en el campo Correo electrónico. Si el campo se deja vacío, el formulario enviará los mensajes a la dirección de administración de WordPress configurada en Ajustes > Generales.

      Saludos.

  18. Buenas tarde. A ver si me pueden dar una mano.
    ¿como hago para mostrar los campos adicionales separados de un email?
    Por ejemplo en el cuerpo den mensaje me llega los campos:
    Color: Verde
    Tamaño: mediano
    Numero: 6
    Cuando voy a la tabla de la base de datos están todos pegados, pero a la hora de listar en un select y mostrar en una pagina me salen todos pegados.
    Esto es lo que muestra al hacer el select * from tabla;

    Color Tamaño Numero
    color: verde tamaños: mediano numero: 6

    Gracias de antemano.

  19. Hola! Me gustaría saber si es posible modificar que dentro del mensaje que recibimos, la aceptación del aviso legal y la política de privacidad aparezca en letra más pequeña y en color gris en la parte inferior del mensaje. Ahora mismo cuando alguien nos contacta a través del formulario aparece el mensaje y justo después la aceptación duplicada y al mismo tamaño. No se si me explico. Un saludo

  20. Buenos dias, necesito saber si existe algun modulo en DIVI para poder guardar un formulario de contacto y tenerlos en una base de datos, podriais decirme si puedo hacerlo con DIVI o tengo que utilizar CONTACT FORM.

    1. Hola, Pepe.

      Gracias por tu comentario.

      Creo que la función que estás necesitando es enviar un mensaje al correo de quien completa el formulario. Esta opción no está disponible en el módulo de Divi. Podés ver esta respuesta, que tiene un enlace a un código para enviar copia exacta del mensaje al remitente.

      De lo contrario, deberás usar Contact Form 7 u otro plugin que te permita crear respuestas automáticas.

      Saludos.

    2. Creo que no es conveniente dar la opción «envíeme una copia» para que le llegue una copia del mensaje del formulario al remitente que lo llenó, porque se puede usar para SPAM.

      Por ejemplo, supongamos que sospecho que el correo del presidente de tu pais es, por ejemplo tupresidente@gobierno.gov, entonces voy a tu sitio, a tu formulario, y escribo un mensaje con amezas e insultos a dicho presidente y en lugar de mi correo pongo como remitente tupresidente@gobierno.gov, y además marco la opción indicando que deseo recibir una copia, entonces tu sitio enviará una copia de ese mensaje con amenazas a esa cuenta. ¿te das cuenta? Al dejar esa opción disponible dejas abierta la opción a que cualquiera le pueda enviar un mensaje a cualquiera a través de tu sitio, haciéndose pasar por otro, incluso puede ser un programa robot que envíe miles de correos por minuto saturando el servicio de tu servidor.

    1. Hola, Nicole.

      Disculpas por la demora.

      El patrón será la ID que hayas asignado al campo. Por ejemplo, si la ID es desplegable, en el patrón tendrás que usar %%desplegable%%.

      Saludos.

  21. Buenas noches,
    estoy intentando poner el recaptcha en el formulario de Divi, pero no me funciona, es como si no cogiera la cuenta y no aparece en el formulario. Esta puesto en la pagina de inicio

    1. Hola, Yolanda.

      Disculpas por la demora.

      Creo que ya lo resolviste, porque se ve la insignia en la página. La versión 3 de Google reCAPTCHA no lo agrega al formulario, sino que funciona a nivel del sitio entero.

      Saludos.

  22. Buenas tardes,

    Me gustaría saber dos cosas que no consigo solucionar.

    1- ¿Se puede cambiar el asunto de los mails? Al correo, llega este asunto predeterminado con el nombre de mi web y me gustaría saber como poder cambiarlo.
    2- No consigo encontrar por ningún sitio la casilla de acepto la política de privacidad. (Lo he puesto como un imput radio) pero claro, ahí no consigo colocar el enlace.

    Si me podéis ayudar sería un gran alivio.

    Muchas gracias de antemano.

    1. Hola, Rafa.

      Gracias por tu comentario y disculpas por la demora en la respuesta.

      Para cambiar el texto del asunto, sin complicarte con modificaciones del código, está la opción de editar el archivo de traducción et_builder-es_ES.po (con un programa como Poedit, o con el plugin Loco Translate desde el escritorio de WordPress).

      Con respecto al enlace para la casilla de selección, esta característica se introdujo a partir de Divi 3.4. Asegurate de usar al menos esa versión. Encontrarás un pequeño icono de en la parte derecha del campo, como se muestra aquí.

      Saludos.

      1. Hola! Tarnquil@ es totalmente entendible por las fechas.

        Muchas gracias por responder pero no consigo solucuionar el problema. He instalado loco translate pero me ha sido imposible.

        Al correo llegan todos los asuntos de todos los formularios igual, y me gustaría que cada formulario tuviera su asunto.

        ¿Es posible?

      2. Hola! Creo que la respuesta no se visualizó.

        No consigo traducir el asunto con el plugin Loco translate, me salen muchsísimas opciones pero justo esta no (o no la encuentro).

        La idea es que cuando llegue el asunto a mi cuenta de correo llegue con lo que yo ponga y no con lo predeterminado que ahora es «Nuevo mensaje»

        Gracias.

        1. Hola, Rafa.

          Entiendo, la solución es precaria porque se aplicaría a todos los formularios por igual. Lamentablemente Divi no incluye la opción de modificar el asunto. En ese caso, tendrías que considerar usar un plugin, como Contact Form 7.

          Saludos.

    1. Hola, Carla.

      Gracias por tu comentario.

      El color de fondo se controla desde la pestaña Diseño de los ajustes del campo individual. Fijate que no estés aplicando el color de fondo a todos los campos del formulario en conjunto (desde la pestaña Diseño, pero de los ajustes del módulo).

      Saludos.

  23. Hola a todxs:

    No sé si a ustedes también les pasará pero es que ya no se donde tocar…

    Mi formulario de contacto funcionaba perfectamente ( hice los testeos y he estado recibiendo los email perfectamente en cada intento) hasta que añadí la casilla de aceptar la politica de privacidad con el cuadrito, en ese momento cada vez que rellenamos el formulario, marcamos la casilla y le damos a enviar nos aparece este sms de error:

    «Presentacion invalida, actualice la página o inténtelo nuevamente»

    He actualizado e intentado nuevamente, pero no hay manera, sigue sin funcionar….
    Alguien me puede ayudar?
    Gracias

    1. Hola, José.

      Disculpas por la demora. No he podido reproducir el error, pero en la versión 4.0 corrigieron algo relacionado con la casilla de selección. Fijate actualizando al menos a esa versión.

      Saludos.

    1. Hola, Jennifer.

      Para cambiar el texto del mensaje de error, sin complicarte con modificaciones del código, está la opción de editar el archivo de traducción et_builder-es_ES.po (con un programa como Poedit, o con el plugin Loco Translate desde el escritorio de WordPress).

      Saludos.

    1. Hola, Rebeca.

      En versiones no actualizadas de Divi, es un error de jQuery obsoleto. A partir de WP 5.6 se pasó a la versión 3.5 y se desactivó la herramienta jQuery Migrate. La solución recomendada es actualizar Divi. Como solución provisoria se puede instalar el plugin Enable jQuery Migrate Helper y seleccionar una versión antigua de jQuery.

      Saludos.

  24. Hola, qué tal?
    Primero que nada, gracias por tu artículo, muy útil!
    Necesito preguntar cómo puedo cambiar el mensaje de error en el envío de formulario, ya que tengo la web en 3 idiomas y los otros dos muestran el mensaje en inglés y tengo que traducirlo. En algunas preguntas anteriores has dicho que hay que modificar el et_builder-es_ES.po. Tendría que hacer algo similar? dónde encuentro ese archivo?
    Gracias por tu respesta!!

      1. Gracias por tu respuesta.
        Lo intenté todo, incluso el Plugin Loco Translate, pero no hubo caso. En Divi me han dicho que es un bug de Polylang y que ellos debieran solucionarlo, pero no he logrado solución de momento. Eso o que me cambiara a WPML, que es 100% compatible. Supongo que tendré que esperar actualizaciones! ¿Crees que si cambio el formulario de Divi a Concact Form 7 se podría solucionar?

        Eso!
        Gracias, nuevamente.
        Un saludo,

        1. Hola, Paula.

          No creo que sea ningún bug del plugin. Lo tengo funcionando sin problemas en esta web: https://nfgene.com/. Todo está actualizado y nunca tuve inconvenientes con Polylang; de hecho es el único plugin multiidioma que he usado con Divi desde siempre.

          Fijate que estén bien configurados los idiomas, y que las traducciones estén completas. Para estar segura, colocá los archivos de traducción en la carpeta /wp-content/languages/.

          En Divi los vas a encontrar solo con el nombre de la localización. Copialos desde la carpeta /Divi/includes/builder/languages/ y agregales et_builder- delante. Ejemplo: el archivo para francés es fr_FR.mo; en la carpeta /wp-content/languages/ debe llamarse et_builder-fr_FR.mo.

          Espero que te sirva.

          Saludos.

          1. Hola Aye,
            Gracias por la recomendación! Lo he revisado y el problema sigue.
            Creo que el problema base es que tanto DIVI como Polylang no tienen desarrollado al 100% las traducciones en catalán. Es el único idioma que me da problemas en la traducción de los errores en el formulario.
            Seguiré intentándolo.

            Un saludo.

          2. Hola, Paula.

            De nada… en efecto, Divi no incluye la traducción al catalán. Tendrías que crearla y el archivo para subir deberá llamarse et_builder-ca.mo.

            Saludos.

  25. Buenos días.
    Cuando añades un casilla de verificación con enlace, como por ejemplo para la política de privacidad. En el campo sólo deja añadir el enlace pero ningún otro atributo.
    ¿Hay alguna forma de hacer ese link «nofollow» o target…?
    Gracias por el artículo.

    1. Hola, Inma.

      Disculpas por la demora.

      El atributo target="_blank" está incluido en el enlace. Para usar nofollow, podés pegar el siguiente código en las opciones del tema > Integración > Añadir código al <body>:

      <script>
      jQuery(document).ready(function($) {
      jQuery(".et_pb_contact_field a").attr('rel', 'nofollow');
      });
      </script>
      

      Saludos.

  26. Buenos días, estoy utilizando un formulario de contacto de Divi y he comprobado que funciona correctamente entrando a la web y rellenando y enviando el formulario. Recibo correctamente el correo con los datos que he introducido (la mayoría de ellos campos obligatorios). La web lleva funcionando ya 6 meses pero desde hace un mes, recibo de vez en cuando emails con el correo patrón tal cual está en la configuración del módulo, sin sustituir los valores %%VALOR%% y no entiendo por qué… ¿sabríais explicarme cuál puede ser el motivo? Muchas gracias!

    1. Hola. A mí me sucede lo mismo. Utilizo el formulario Divi con el captcha matemático (suma) en dos webs y siempre ha funcionado perfecto. Pero desde hace un mes, me están llegando bastantes emails vacíos, sólo con el patrón sin sustituir los valores:
      Contacto: %%contacto%%
      Tel: %%tel%%
      Email: %%email%%
      Mensaje: %%msg%%
      Supongo que es un bot que intenta enviar spam porque los formularios enviados por usuarios llegan correctamente.
      Pero es verdad que hasta ahora no había pasado.
      A ver si Aye nos puede aclarar algo más.

      1. Hola, Valen y Nathalie.

        Gracias por comentar y disculpas por la demora en la respuesta.

        Me pasó lo mismo durante algunos días, pero fue un bug que se corrigió al actualizar a la versión 4.9.8.

        Saludos.

    1. Hola, Elena.

      En esta web ofrecen el siguiente código para pegar en el archivo functions.php del tema hijo:

      add_filter('wp_mail', 'custom_mails', 10, 1);
       
      function custom_mails($args) {
          $bccEmail = sanitize_email('correo@servidor.com'); 
          if (is_array($args['headers'])) {
              $args['headers'][] = 'Bcc: ' . $bccEmail;
          } else {
              $args['headers'] .= 'Bcc: ' . $bccEmail . "\r\n";
          }
          return $args;
      }
      

      Solo reemplazar el correo por el que corresponda.

      Para tener en cuenta: es genérico, por lo cual todas las notificaciones de WordPress enviarán una copia oculta (nuevos comentarios en entradas, correos de administración, etc.) Una opción sería agregar una condición para que solo se ejecute esta función en la página que contiene el formulario. Ejemplo, si la página se llama Contacto (y el slug es contacto), el código quedaría:

      add_filter('wp_mail', 'custom_mails', 10, 1);
       
      function custom_mails($args) {
          if ( is_page('contacto') ) {
          $bccEmail = sanitize_email('correo@servidor.com');
          if (is_array($args['headers'])) {
              $args['headers'][] = 'Bcc: ' . $bccEmail;
          } else {
              $args['headers'] .= 'Bcc: ' . $bccEmail . "\r\n";
          }
          return $args;
      }
      }
      

      Cambiarías contacto en is_page('contacto') por el slug que corresponda.

      Saludos.

  27. Buenos días, como he podido leer en comentarios anteriores el mensaje de éxito no puede quitarse, pero estoy intentando ocultarlo. Al utilizar este código
    .et-pb-contact-message {
    display: nome !important;
    }
    me oculta el texto, pero me sigue apareciendo un contenedor de color blanco, que como mi página tiene fondo oscuro resalta mucho.
    ¿Es posible ocultar este contenedor?
    Prefiero redirigir a una página de agradecimientos cuando alguien utiliza el formulario y de esta forma poder tener datos para análisis posterior.
    Gracias

    1. Hola, Rafa.

      Gracias por tu comentario.

      El contenedor del mensaje no tiene ningún color de fondo aplicado por defecto, debería mostrarse sobre el color de fondo de la sección, fila o módulo. Fijate que no hayas agregado otro código a la clase, o que no sea algún módulo que esté apareciendo en esa ubicación. Si no, enviame la URL para poder revisarlo.

      Saludos.

      1. Hola,
        he revisado todo y no encuentro nada.
        la url es:
        mkno.es/formulario-recogida-de-datos/
        y el mensaje aparece justo antes de redigirir a la página de agradecimiento

        Un saludo

        1. Hola, Rafa.

          Es el fondo blanco aplicado al módulo Formulario, el cual funciona como contenedor y tiene valores de relleno.

          Para evitarlo, eliminá el relleno y pegá el siguiente código en el CSS personalizado de los ajustes de página:

          .et_pb_contact {
              padding: 8% 5%;
          }
          

          Saludos.

  28. Hola, buenísimo tu post. Muchas gracias.
    Yo estoy teniendo un problema que nunca me había sucedido con la web de un cliente.
    Resulta que el formulario funciona correctamente, pero de vez en cuando deja de funcionar como deberia y empieza a dar el mensaje de error: «Por favor, actualice la página y vuelva a intentarlo» cuando le das a enviar.
    He probado de todo, y no encuentro que puede ser ya que se soluciona solo, pero a los días vuelve a aparecer el fallo.
    Solo se me ocurre que pudiera ser por plugin caché…
    Tienes alguna idea?

  29. Hola,

    gracias por tu post. Me ha servido mucho 🙂 pero veo que recibo muchos correos desde el formulario en este formato:
    Nombre: %%nombre%%
    Teléfono: %%telefono%%
    Nombre: %%nombre%%
    Email: %%email%%
    Mensaje: %%mensaje%%
    Política de Privacidad: %%privacidad%%
    esto me llega directamente a la cuenta de correo de IONOS que es con quien tengo el hosting de mi web. Me llegan unos 3-4 diarios. ¿Tendrías alguna idea de porqué pasa y cómo resolverlo?
    Gracias de antemano.

  30. Buenas tardes,
    me estoy volviendo loca con una cosa muy rara que me pasa en un formulario de contacto de Divi. Lo construyo perfectamente, se ve, envía, pero en cuanto cierro el builder el formuilario no aparece. Solamente se ve y funciona si tengo el builder abierto.
    Debe ser la cosa más tonta del mundo, pero he revisado el modo de publicación de la página, y no veo nada que impida la visión del formulario.
    ¿Alguien se le ocurre qué podría ser?
    Gracias

  31. Tal vez en la propiedad de visibilidad en el último opciones avanzadas, podria estar desahabilitado, y por eso solo lo ves en modo constructor, fíjate que este habilitado la visión en todos los dispositivos y con eseo deberia quedar.

  32. Hola buen dia es mi primer pagina con divi y araiz del problema que se me precenta me encontre con su documentación y es bastante buena mi problema es el siguiente y espero y puedas apoyarme; resuta que al momento de crear un formulario en divi y agregar el correo donde quiero que me llegue los datos del formulario no me llega nada no se cual sea la problematica ya he creado dos correos y en ninguno me llegan los datos.

    1. Hola Luis Alfonso,
      el problema no está en los correos ni en el formulario, tal como me aconsejó Jennifer, y tuvo toda la razón del mundo y se solucionó.
      La propiedad de visibilidad en el último opciones avanzadas, podria estar desahabilitado, y por eso solo lo ves en modo constructor, «fíjate que este habilitado la visión en todos los dispositivos».
      A mi con esta pista me funcionó
      Suerte

Responder a James Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Scroll al inicio