Divi con Contact Form 7 o cómo agregar campos al formulario

94 comentarios

Por: Caribdis.Net

Publicada: 20 de julio de 2015

Este tutorial funciona en la versión 2.5 de Divi e inferiores

Para Divi 2.6 y superiores, leer el tutorial aquí

Pese a que Divi es un tema completísimo, y ahora con su última versión 2.4 ofrece aún más control sobre la personalización de casi todos sus elementos, una de las características más buscadas y que Elegant Themes todavía no ha extendido, es la posibilidad de añadir campos al formulario de contacto.

El módulo integrado de Divi es básico, ya que sólo cuenta con los tres campos consabidos: Nombre, Dirección de correo electrónico y Mensaje. Como opción, se puede activar un CAPTCHA para evitar el spam, pero no existe hasta el momento en ninguno de los ajustes la posibilidad de agregar más campos, que a veces son necesarios para enriquecer y facilitar el proceso de comunicación entre el usuario y el sitio web.

La solución en este caso, y aquella que recomiendan desde el mismo soporte de ET, es usar un plugin externo. Si bien existen incontables plugins de formularios (tanto gratuitos como pagos), el primero que nos viene a la mente es Contact Form 7. No solamente porque es el más usado, con más de un millón de instalaciones activas, sino porque es súper sencillo de implementar.

Entonces, pues, vamos a aprender cómo crear un formulario con Contact Form 7 y hacer que luzca prácticamente igual al formulario de Divi.

En primer lugar, buscamos el plugin desde Plugins > Añadir nuevo, y luego lo instalamos y activamos.

Veremos que una nueva opción del menú ha sido añadida a nuestro administrador de WordPress: Contacto. Si le damos clic a Contacto, abriremos la página de Contact Form 7 que contiene un bloque informativo con algunos enlaces a las preguntas más frecuentes, y más abajo una lista muy similar a la de Entradas o Páginas, donde tendremos el primer formulario de contacto que se instala con el plugin de manera predeterminada, llamado Formulario de contacto 1. Junto a ese título también veremos el código abreviado para pegar en la página donde queremos que se muestre el formulario (algo así como [contact-form-7 id="#" title="Formulario de contacto 1"], donde # es un número generado por el plugin).

Si simplemente pegamos ese código en un módulo de Texto o de Código (funciona de manera indistinta en ambos), lo que veremos en la página “en vivo” no nos gustará demasiado:

Contact Form 7 - Formulario genérico

Así luce el formulario de CF7 “en crudo”

¿Cómo hacer, entonces, para que se vea lo más parecido posible al formulario de Divi?

Así luce el formulario de Divi

Así luce el formulario de Divi

Esta pregunta tiene más de una respuesta, y la más común va a ser: aplicar estilos CSS al formulario CF7. Pero hay otra respuesta que es más práctica y sencilla de implementar, y es “hacerle creer” a Divi que estamos usando su propio formulario. De este modo, escribiremos menos código y lograremos que el formulario mantenga el diseño de Divi y se vea perfecto en todas las resoluciones de pantalla.

Para ello, vamos a envolver las etiquetas generadas por CF7 en las etiquetas correspondientes al formulario de Divi. En el menú Contacto > Formularios de contacto le damos clic al título Formulario de contacto 1 para editarlo y veremos en la pestaña Formulario la porción de código que debemos reemplazar.

Sección donde se debe pegar el código HTML con las clases de Divi

Sección donde se debe pegar el código HTML con las clases de Divi

<p>Nombre (requerido)<br />
    [text* your-name] </p>
<p>Correo electrónico (requerido)<br />
    [email* your-email] </p>
<p>Asunto<br />
    [text your-subject] </p>
<p>Mensaje<br />
    [textarea your-message] </p>
<p>[submit "Enviar"]</p>

Deberá ser:

<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>Nombre (requerido)<br />
    [text* your-name] </p>
<p>Correo electrónico (requerido)<br />
    [email* your-email] </p>
<p>Asunto<br />
    [text your-subject] </p>
</div>
<p>Mensaje<br />
    [textarea your-message] </p>
</div>
<p>[submit "Enviar"]</p>

Aunque nos vamos acercando, todavía no conseguimos que se vea exactamente como queremos. El resultado es el siguiente:

Contact Form 7 - Aplicando etiquetas de Divi

Aplicamos las etiquetas de Divi al formulario CF7

Ahora necesitamos mover los títulos dentro de los campos, y aplicar el estilo de Divi al botón Enviar. Para los títulos, eliminamos el texto inmediatamente posterior a la etiqueta <p>, pasamos los rótulos dentro de los códigos abreviados, entre comillas, y les anteponemos la etiqueta placeholder. Para el botón, añadimos las dos clases CSS de Divi et_pb_contact_submit y et_pb_button, precedidas de la etiqueta class: sin espacio:

<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>[text* your-name placeholder "Nombre"]</p>
<p>[email* your-email placeholder "Correo electrónico"]</p>
<p>[text your-subject placeholder "Asunto"]</p>
</div>
<p>[textarea your-message placeholder "Mensaje"] </p>
</div>
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>

El resultado es el siguiente:

Contact Form 7 - Aplicando estilos de Divi

Movemos los títulos dentro de los campos y aplicamos estilos al botón

¡Ya casi estamos! Se preguntarán por qué el campo Correo electrónico quedó debajo de Nombre, con el espacio en blanco arriba de Asunto. Y si añadimos uno, dos o más campos, quedarán uno arriba del otro, menos los dos últimos. Esto es porque en el ejemplo están agrupados en el mismo div, cuyo estilo les da el 50% de ancho.

Para resolver esto, necesitamos crear un div con la clase et_pb_contact_left para cada par de campos que queremos que se muestren juntos. Veamos el siguiente ejemplo, donde añadiremos un campo Teléfono para mostrar debajo de Correo electrónico y a la derecha de Asunto.

<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>[text* your-name placeholder "Nombre"]</p>
<p>[email* your-email placeholder "Correo electrónico"]</p>
</div>
<div class="et_pb_contact_left">
<p>[text your-subject placeholder "Asunto"]</p>
<p>[tel tel-1 placeholder "Teléfono"]</p>
</div>
<p>[textarea your-message placeholder "Mensaje"]</p>
</div>
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>

¡Listo! Ya tenemos un formulario con dos campos más, al estilo Divi, sin agregar una sola línea en el CSS personalizado, y manteniendo intacta la propiedad adaptable (responsive).

Contact Form 7 a la Divi

Este pequeño tutorial seguramente cubrirá las necesidades de un gran número de usuarios, pero aún podríamos aprender algunos trucos más para poder sacarle el máximo provecho.

Por ejemplo, ¿qué tal si queremos añadir un CAPTCHA para evitar que nos lleguen mensajes spam? En primer lugar, instalamos el plugin Really Simple Captcha, el cual está desarrollado como extensión de Contact Form 7 por el mismo autor (Takayuki Miyoshi). Luego de activarlo, veremos que se habrán habilitado las opciones de CAPTCHA en la página de edición de CF7.

Todo lo que tenemos que hacer ahora es colocar la etiqueta generada por CF7 al final del código, y envolverla en las siguientes etiquetas de Divi:

<div class="et_pb_contact">
<div class="et_pb_contact_right">
    <p>[captchac captcha-579] [captchar captcha-579]</p>
</div>
</div>

Con lo cual, el código para el formulario completo sería:

<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>[text* your-name placeholder "Nombre"]</p>
<p>[email* your-email placeholder "Correo electrónico"]</p>
</div>
<div class="et_pb_contact_left">
<p>[text your-subject placeholder "Asunto"]</p>
<p>[tel tel-1 placeholder "Teléfono"]</p>
</div>
<p>[textarea your-message placeholder "Mensaje"]</p>
</div>
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
<div class="et_pb_contact">
<div class="et_pb_contact_right">
    <p>[captchac captcha-579] [captchar captcha-579]</p>
</div>
</div>

Vamos a ver cómo queda:

Contact Form 7 con Really Simple Captcha

Bastante bien, pero queremos el CAPTCHA al mismo nivel que el botón Enviar, ¿verdad? Ahora sí es necesario aplicar estilos. Vamos al recuadro CSS personalizado dentro de las Opciones del tema y pegamos el siguiente código (o mejor aún, lo pegamos en la hoja de estilo del tema hijo*):

.wpcf7 .et_pb_contact_right {
  margin-top: -14px;
}

Como el campo de entrada para los cuatro caracteres nos parece algo angosto, añadimos el siguiente código para ensancharlo un poco:

.wpcf7 .et_pb_contact_right p input {
  max-width: 65px;
}

Y, además, queremos centrar verticalmente la imagen de los cuatro caracteres:

.wpcf7-captchac {
  position: relative;
  right: 0px;
  top: 7px;
}

Por último, para evitar esto en los teléfonos móviles de menor resolución,

Contact Form 7 en Divi

Evitar que el CAPTCHA se superponga con el botón “Enviar”

añadimos lo siguiente:

@media only screen and (max-width: 329px) {
.wpcf7 .et_pb_contact_right {
  float: none; 
  text-align: left;
}
}

Bien, ya tenemos un formulario con dos nuevos campos y un CAPTCHA para fortalecer la seguridad.

¿Qué tal si queremos un menú desplegable en lugar del campo de texto Asunto?

<p>[select menu-862 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>

Nos da esto:

Aplicar estilos al menú desplegable

Aplicar estilos al menú desplegable

Tendremos que meter más mano en el estilo CSS y darle al menú el color de fondo y el ancho de nuestro formulario:

.wpcf7-select {
  width: 100%;
  padding: 15.5px;
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0px;
  font-family: inherit;
  color:#aaa;
  background-color: #eee;
 }

Contact Form 7 en Divi con menú desplegable

Genial, ¿verdad? Y hasta podemos ir un poquito más allá y personalizar la flecha del menú (las últimas cinco líneas añadidas; no olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente), con el siguiente código:

.wpcf7-select {
  width: 100%;
  padding: 15.5px;
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0px;
  font-family: inherit;
  color:#aaa;
  background-color: #eee; 
  -moz-appearance: none;
  -webkit-appearance: none;
  background-position: center right 15px;
  background-image: url("https://urldelarchivo/arrow.png");
  background-repeat: no-repeat;
 }

Como podemos ver, ya tenemos un formulario con los campos que queremos, sin resignar el estilo de Divi y usando la mínima cantidad de código necesaria.

Divi con Contact Form 7

El resultado final

Antes de terminar, un último consejo, porque nunca falta el despistado que se olvida de llenar algún campo obligatorio, o no lo completa con el tipo de datos que corresponde:

Contact Form 7 - Mensajes de error

Para evitar que se superponga el aviso de error al botón, añadimos el siguiente código:

div.wpcf7-validation-errors {
  margin-top: 50px;
}

O, mejor aún, ya que lo consideramos redundante si cada campo muestra su propio mensaje de error en color rojo, lo suprimimos:

div.wpcf7-validation-errors {
  display: none !important;
}

Contact Form 7 - Mensajes de error (advertencia suprimida)

Casi olvidaba que cuando se envía el mensaje con éxito, también ocurre esto:

Contact Form 7 - Mensaje enviado

Lo corregimos con el siguiente código:

div.wpcf7-mail-sent-ok {
  margin-top: 50px;
}

O en caso de preferir no mostrar el borde en color verde:

div.wpcf7-mail-sent-ok {
  border: none;
}

Para tener en cuenta:

  • *Si bien el usuario menos experimentado preferirá pegar los códigos CSS en las Opciones del tema, siempre será más recomendable trabajar con un tema hijo y añadir los códigos a la hoja de estilo correspondiente.
  • Siempre separar en divs con la clase et_pb_contact_left cada par de campos que queremos que aparezcan juntos. En el caso de tener un número impar de campos y no desear que aparezca un espacio en blanco, lo recomendable es sacarlo afuera del div para que ocupe todo el ancho del formulario.
  • No dejar líneas en blanco dentro del código de CF7 (para evitar saltos de párrafo de más).
  • ¡No olvidarse de cerrar los divs!
  • Y no olvidarse de agregar a la plantilla de Correo electrónico las etiquetas correspondientes a los nuevos campos, ya que es la única manera de que nos lleguen en el mensaje todos los datos introducidos por el usuario en el formulario.
  • Este tutorial sirve para aplicar los estilos de Divi a uno o a todos los formularios por igual. No nos sirve si necesitamos que varios formularios tengan un estilo diferente (por ejemplo, que uno tenga los campos con bordes y otro sin bordes, o distintos colores de fondo). Tal vez otro día haga otro tutorial para eso 😉

Espero que se haya comprendido y haya resultado útil. Desde ya me gustaría recibir comentarios, todas las preguntas que sean necesarias si algo no se entendió, y ¿por qué no? muestras de cómo les han quedado sus formularios CF7 al estilo Divi. 🙂

Edición para Divi 2.5.4 y superiores

Con la actualización a la versión 2.5.4 se modificó el estilo del botón Enviar, para que incluya la “flechita” al posar el puntero, que aparece por defecto en todos los botones de Divi.

Botón "Enviar" de DiviLamentablemente, no es posible recrear este efecto con CF7, ya que este usa la etiqueta input para el botón, mientras que Divi usa button con un seudoelemento :after. En caso de querer evitar esto:

Botón "Enviar" de CF7hay dos alternativas. Una es ir al Personalizador de Tema > Botones > Estilo de botones y seleccionar No en la opción Añadir icono de botón. Esta corregirá el relleno del botón Enviar de CF7 pero desactivará el efecto de los botones a nivel global (se tendrá que manejar individualmente para cada módulo donde haya un botón presente).

La otra es añadir el siguiente código a la hoja de estilos:

.wpcf7-submit:hover {
  padding: 0.3em 1em;
}

Finalmente obtendremos esto:

Botón "Enviar" en CF7 con estilo

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

94 Comentarios

  1. Angélica Rodríguez

    Hola,

    Muchas Gracias por tu post, está genial! Lo implementé y funciona perfect, solo que no logro hacer que trabaje en 2 columnas. Al encerrar en el div el par de campos, solo me aparecen las dos filas pegadas una encima de otra, pero con el ancho total de la pantalla. ¿Puedes ayudarme?

    Responder
    • Caribdis.Net

      Hola, Angélica.

      Gracias por tu comentario.

      ¿Qué versión de Divi estás usando? Tené en cuenta que este tutorial sirve solo hasta la 2.5.

      De todas maneras, si es posible enviame la URL donde lo hayas implementado, porque es imposible determinar la causa sin verlo directamente.

      Saludos.

      Responder
      • Angélica Rodríguez

        En efecto, uso la versión 3.0.40. Tienes alguna solución para esto? También tengo problemas con la ubicación del botón “Enviar”, no se ubica alineado a la derecha y choca con el captcha…

        El formulario lo tengo aqui http://villaluengaventura.com/programa-a-la-carta

        Gracias de nuevo!

        Responder
        • Caribdis.Net

          Hola, Angélica.

          En ese caso, tenés que seguir los pasos que se detallan en este tutorial, ya que las etiquetas del módulo del formulario cambiaron a partir de Divi 2.6.

          Saludos.

          Responder
  2. Marcos

    Buenas, no entiendo este apartado para personalizar la flecha del menú desplegable. Mi pregunta es la siguiente, de donde saco la imagen para la flecha?

    – Genial, ¿verdad? Y hasta podemos ir un poquito más allá y personalizar la flecha del menú (las últimas cinco líneas añadidas; no olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente).

    Y una vez subido, debería coger la URL de la biblioteca de medio y sustituirla en la línea esta??:

    background-image: url(“https://urldelarchivo/arrow.png”);

    Gracias

    Responder
    • Caribdis.Net

      Hola, Marcos.

      Exacto, la URL será la ruta completa a la imagen, previamente subida (a la biblioteca de medios o a una carpeta del servidor).

      Saludos.

      Responder
      • Marcos

        Buenas, mi pregunta es la siguiente, de donde saco la imagen para subir al servidor de la flecha del menú desplegable? Gracias

        Responder
        • Caribdis.Net

          Hola, Marcos.

          Disculpas que no entendí bien la pregunta. La imagen debe ser un archivo en formato PNG, creado con algún editor tipo Photoshop o similar. También se puede descargar de un banco gratuito de imágenes, como por ejemplo Freepik.

          Saludos.

          Responder
  3. Enrique

    Muchas gracias por el post, por fín he conseguido darle un paspecto adecuado a los formularios de contact from, pero sigo teniendo un problema, cuando intento dividir con los div para que aparezcan el formulario en dos columnas no me muestra como a ti te aparece, sinplemente me aparecen las dos filas pegadas una encima de otra, pero con el ancho total de la pantalla, he intentado diefentes métodos pero no consigo ponerlo en dos columnas tal como muestras en la imagen. ¿Alguna idea?

    Responder
    • Caribdis.Net

      Hola, Enrique.

      ¿Tendrás una URL para verlo?

      Saludos.

      Responder
  4. Gustavo A. Salinas

    Muy buenas y gracias de antemano.
    Tengo varios sitios funcionando con el típico “checkbox + Acepto las condiciones legales”.

    Ahora estoy con otra web, última versión tanto de Divi como de Contact Form 7
    Copie el mismo código y el checkbox no me aparece… y por más vueltas que le doy no se que puede ser.

    Me pueden ayudar?

    Ejemplo donde si funciona:
    http://secundinoglez.com/contacto

    Ejemplo donde no funciona:
    https://beta.buendiatours.eu/contacto

    Código empleado:

    [text* nombre placeholder “Nombre*”]
    [email* email placeholder “Correo electrónico*”]
    [tel telefono placeholder “Teléfono”]
    [text* asunto placeholder “Asunto*”]
    [textarea mensaje placeholder “Mensaje”]
    [checkbox* checkbox-689 use_label_element “Acepto las”]<a href=”https://buendiatours.eu/aviso-legal” rel=”nofollow”> <strong>condiciones legales</strong></a>

    [dynamictext ticket “codigoticket”]

    Enviar

    [captchac captcha-579] [captchar captcha-579]

    Responder
    • Caribdis Diseño Web

      Hola, Gustavo.

      En el código CSS correspondiente a la casilla te está faltando :before. El selector completo es .wpcf7 input[type="checkbox"] + .wpcf7-list-item-label:before.

      Saludos.

      Responder
      • GSR

        Lo he modificado y está igual.
        Sigo investigando, de todas formas mil gracias por responder.
        Si doy con la solución os lo hago saber.

        Un saludo

        Responder
        • Caribdis Diseño Web

          Hola, GSR.

          Tenés mal los códigos CSS. Los dos selectores que debés usar son .wpcf7 input[type="checkbox"] + .wpcf7-list-item-label:before y .wpcf7 input[type="checkbox"]:checked + .wpcf7-list-item-label:before.

          Saludos.

          Responder
          • GSR

            Está todo probado y mirado y sigue igual…
            Pero ya se que está pasando, es una incompatibilidad de un plugin.
            En el momento que lo desactivo, el formulario funciona perfectamente.
            Pondré una incidencia a los creadores de dicho plugin a ver si hay una solución.

            Mil gracias por todo.

          • GSR

            Ya está resuelto, al final el problema era la incompatibilidad entre 2 plugins.
            Me puse en contacto con el desarrollador y sacaron un parche para ello.

            Mil gracias

  5. Eustorgio Reyes

    Hola Ana, quiero agradecerte por dar excelente contenido de valor. Gracias a este post pude adecuar mi formaulario de Contact Form a Divi 3.0. Sólo tengo una duda y es que no me sale el mensaje de exito cuando el suscritor rellena el formulario. Realicé las pruebas y a pesar que no indica el mensaje, llega el correo de confirmación suscribirse a la lista.
    Coloque los codigos Css segun tu tutorial pero nada.
    Agradeciendo de antemano tu ayuda, me despido,
    Atentamente.

    Responder
  6. Eustorgio Reyes

    Hola un saludo desde Venezuela, quiero darte muchas gracias por compartir contenido de gran valor. Tengo una pregunta: En mi pagina web el tema es Divi 3.0. La configuración en html de Contact form me queda claro, pero para darle forma al formulario todos los códigos que indicas, se colocan en DIVI, en el area avanzado y luego en CSS personalizado?. Gracias de antemano por tu ayuda.

    Responder
    • Caribdis Diseño Web

      Hola, Eustorgio.

      Gracias por tu comentario.

      Los códigos van en Divi > Opciones del tema > Generales > CSS personalizado (o en el archivo style.css del tema hijo, si estás usando uno).

      Saludos.

      Responder
  7. Nacho

    Hola Ana,

    Gracias por toda esta aportación de conocimiento…

    Tengo una consulta: Como podria poner un enlace en el titulo que acompaña a una casilla de verificación de “He leido y acepto las condiciones legales” y que me lleve a la pagina de Aviso Legal.

    Gracias

    Responder
    • Caribdis Diseño Web

      Hola, Nacho.

      Gracias por tu comentario.

      Si estás usando CF7, el código del enlace debería ir dentro del formulario. Por ejemplo:

      [acceptance acceptance-123] <a href="http://urldelsitio.com/aviso-legal/">He leído y acepto las condiciones legales</a>

      Saludos.

      Responder
  8. Daniel Gutiérrez

    Gracias! Ahora ha cambiado un poco pero la idea general es muy buena!

    Responder
  9. Alfredo eguX

    Hola Srta. Ana Ayelén Martínez, el formulario esta super bien te felicito, pero como cambio de color el fondo gris de los campos

    Responder
    • Caribdis Diseño Web

      Hola, Alfredo.

      Fijate en esta respuesta.

      Saludos.

      Responder
  10. Javier

    Gracias por tu tutorial. Tengo una duda, como se puede hacer para que al poner el cursor “onFocus” desaparezca el texto “placeholder”.

    Gracias de nuevo.

    Responder
    • Caribdis Diseño Web

      Hola, Javier.

      Gracias por tu comentario. Esta respuesta que le di a otro usuario te puede servir. También está explicado en el tutorial para Divi 2.6 (en la parte Estilos en los marcadores de posición), que para el caso del placeholder es igual que para Divi 2.5.

      Espero que te sirva.

      Saludos.

      Responder
  11. Marcos

    Hola, tengo la última versión de Divi y un problema a ver si me puedes ayudar.

    Cuando alguien envía un mensaje desde el formulario de contacto de Divi, el mail que te llega es y no puedo responder al quien ha escrito el mensaje ni puedo saber su mail. ¿esto es correcto o normal con el formulario de contacto de divi?

    Muchas gracias!

    Responder
    • Caribdis Diseño Web

      Hola, Marcos.

      Gracias por tu comentario.

      Si el formulario está configurado correctamente, deberías recibir el correo como un mensaje normal, con el nombre y la dirección del remitente. Esto es, el formulario debe tener el campo de tipo Correo electrónico en los Ajustes de campo y ser obligatorio. En todo caso, configurá el Patrón del mensaje para que incluya la información del campo Correo electrónico, así por lo menos recibís ese dato en el cuerpo del mensaje.

      Saludos.

      Responder
      • Milton

        Por curiosidad, se sabe todo lo que admite el Patron del mensaje? Es decir, aparte del mail, nombre, tel, etc etc. se pude poner [URL] o cosas así como en CF7?

        Responder
        • Caribdis Diseño Web

          Se puede poner cualquier ID que uno quiera (siempre que no contenga caracteres especiales o espacios) y agregar todos los campos que uno quiera, pero el tipo de campo siempre va a estar limitado a correo electrónico, entrada de texto o área de texto. Por ejemplo, si el usuario introduce texto en el campo Teléfono, a Divi le da igual, mientras que CF7 lo toma como erróneo porque solo admite números.

          Responder
          • Milton

            Gracias! 🙂

    • Caribdis Diseño Web

      No se trata de un bug, sino que es la manera más segura de que el formulario envíe los correos sin problemas de entrega, ya que muchos servidores bloquean mensajes de un dominio determinado, si es que ingresan con un dominio distinto en el remitente (por temas de spam, phishing, etc). Si bien el correo del remitente figura como , la cabecera de respuesta (reply-to) es la correcta. Es decir, al hacer clic en Responder, se ve la dirección real del remitente.

      En todo caso, para estar completamente seguros de que recibimos la dirección del remitente, hay que configurarla en el Patrón de mensaje.

      Responder
    • Brad Hodson

      Marcos, justo me encuentro con el mismo dilema acá y no tengo ni idea donde esta el control para eso. Supongo que tendria que ser un bug pero tenemos la versión 2.7.4 y esta el 2.7.5 disponible pero no dice nada en las notaciones de la acutalizacion sobre un arreglo.

      Todavia tienes el problema, o ya has descubierto una solución?

      Responder
      • Caribdis Diseño Web

        Hola, Brad.

        Quizá esta respuesta te sirva. No es un bug, y fue explicado en el foro de soporte.

        Voy a editar mi respuesta de esta entrada, para que no genere confusiones.

        Saludos.

        Responder
  12. Milton

    Hola de nuevo! 🙂

    Tal como he comentado en la entrada que habéis publicado sobre la nueva versión de DIVI 2.6, la nueva actualización ha provocado que las modificaciones que hicimos en los formularios de CF7 para que tenga la misma apariencia que el formulario de Divi no funcione. Parece que el nuevo formulario de Divi utiliza otra estructura. Ahora todos los formularios creados con CF7 mediante esta forma ya no funcionan en Divi. Parece ser que los “div” ya no hacen efecto y apila los campos uno encima de otro.

    Responder
    • Milton

      Parece ser que han cambiado las clases para los campos del formulario. Utilizando el inspector he conseguido arreglarlo bastante. Pero se me resiste el botón de enviar. No he conseguido mejorarlo. Pero voy a pegar aquí los cambios del formulario con un antes y un después para mostrar hasta donde he podido llegar:

      En un formulario básico con teléfono antes era:

      [text* your-name placeholder “Nombre”]
      [email* your-email placeholder “Correo electrónico”]

      [text your-subject placeholder “Asunto”]
      [tel* tel-1 placeholder “Teléfono”]

      [textarea your-message placeholder “Mensaje”]

      [submit class:et_pb_contact_submit class:et_pb_button “Enviar”]

      Y ahora, con Divi 2.6 es:

      [text* your-name placeholder “Nombre”]

      [email* your-email placeholder “Correo electrónico”]

      [text your-subject placeholder “Asunto”]

      [tel* tel-1 placeholder “Teléfono”]

      [textarea your-message placeholder “Mensaje”]

      Enviar

      Pero algo no estoy haciendo bien porque el botón “Enviar no se acaba de ver bien, aparece un poco recortado por encima.

      Responder
      • Milton

        Ops! lo siento, no deja pegar el código en las respuestas. Por favor, borrenlo, y disculpen. Sólo pretendía pegar el código que había puesto.

        Saludos

        Responder
      • Caribdis Diseño Web

        Sí, no más se pegaron las etiquetas de CF7. Cuando pegues código en un comentario, hacelo dentro de las etiquetas <pre></pre> 😉

        Responder
        • Milton

          Muchas gracias! 🙂

          Responder
          • Milton

            Esto es lo que pretendía mostrar:

            Antes:

            [text* your-name placeholder “Nombre”]
            [email* your-email placeholder “Correo electrónico”]

            [text your-subject placeholder “Asunto”]
            [tel* tel-1 placeholder “Teléfono”]

            [textarea your-message placeholder “Mensaje”]

            [submit class:et_pb_contact_submit class:et_pb_button “Enviar”]

            Y ahora he puesto:

            [text* your-name placeholder “Nombre”]

            [email* your-email placeholder “Correo electrónico”]

            [text your-subject placeholder “Asunto”]

            [tel* tel-1 placeholder “Teléfono”]

            [textarea your-message placeholder “Mensaje”]

            Enviar

    • Caribdis Diseño Web

      ¡Hola de nuevo!

      Si pasás por aquí, encontrarás la solución a los campos del formulario. Y acabo de revisarlo y este código sirve para los checkbox.

      Responder
  13. Joan

    Hola,

    Muy interesante tu tutorial.
    Tengo un problema, he introducido el campo telèfono en el formulario, pero la sorpresa surge cuando en el correo recibido no sale el nº de teléfono introducido en el formulario
    También pasa cuando pongo fechas
    No se que hacer.

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Joan. Gracias por comentar.

      Fijate que estés agregando las etiquetas correspondientes a estos campos dentro de la plantilla de la pestaña Correo electrónico, en el cuerpo del mensaje. Y recordá no usar acentos o caracteres especiales en las etiquetas, porque CF7 no los reconoce.

      Otra solución no se me ocurre sin verlo directamente en funcionamiento. Cualquier otra duda, contactame.

      Saludos 🙂

      Responder
      • Joan

        Primero de todo gracias.

        Tengo una duda.

        He de poner un enlace en el formulario, ver disponibilidad. Que al clicar se vaya a un calendario de reserva.
        Saludos

        Responder
        • Caribdis Diseño Web

          Hola, Joan.

          En ese caso, te convendría instalar un plugin de reservas que se pueda integrar a Contact Form 7. Por ejemplo, WP Availability Calendar & Booking.

          Saludos.

          Responder
  14. Damián

    Ana,
    Quiero agradecerte infinitamente!!! Quedo perfecto!
    Todo lo fui pegando en el “E-Panel” pero por algun motivo no se veian los cambios hasta la ultima explicación!
    Muchas gracias por todo!
    Saludos!!!

    Responder
  15. Damián

    Quiero felicitarte por esta explicaciòn, llevo dos dias buscando esta solución y es increible lo bien y simple que lo has publicado! Muchas gracias y felicitaciones!

    Aprovecho para consultarte como puedo hacer modificar los tamaños y hacer transparentes los campos, y ponerles un borde blanco? y modificar el color del botón?

    De ante mano muchas gracias!

    Responder
    • Caribdis Diseño Web

      Hola, Damián. Gracias por tu comentario 🙂

      Para modificaciones de apariencia, sí o sí tendrás que agregar código CSS en la hoja de estilos del tema hijo (lo más recomendable), o en el campo CSS personalizado de las Opciones del tema.

      Los campos de texto tienen la clase .wpcf7-text; los campos de área de texto, .wpcf7-textarea; el campo del CAPTCHA, .wpcf7-captchar, y los campos desplegables, .wpcf7-select.

      Por ejemplo, para los cambios de fondo y borde te quedaría algo así:

      .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select {
          background-color: transparent !important;
          border: 2px solid #fff !important;
      }
      

      Los tamaños del texto los manejás con font-size y el relleno con padding.

      El botón enviar tiene la clase .wpcf7-submit (y .wpcf7-submit:hover para el efecto al posar el puntero). Un botón también transparente y con borde blanco quedaría así:

      .wpcf7-submit {
          background-color: transparent !important;
          border: 2px solid #fff !important;
          color: #fff;
      }
      

      Si tenés campos desplegables es muy probable que también debas ajustar la altura. Por ejemplo:

      .wpcf7-select {
          height: 30px;
      }
      

      Espero que se entienda, y cualquier otra duda podés volver a consultar.

      Saludos.

      Responder
      • Damián

        Genios Absolutos! Pegué los códigos y quedo perfecto! Una consulta mas, como hago para que el texto de los datos que ingresa el contacto, dentro de cada campo, sea de color blanco? Actualmente tiene una tipografia por defecto y es de color gris y casi no se ve!
        Aguardo la ayuda y una vez mas, Muchas gracias por tantas soluciones!!!

        Responder
        • Caribdis Diseño Web

          Para que el color del texto de los campos también sea blanco tendrás que agregar color: #fff !important; a:

          .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select {
              background-color: transparent !important;
              border: 2px solid #fff !important;
          }
          

          Eso basta para que al llenar los campos se vea blanco… pero quizá también quieras evitar la semitransparencia de los placeholder. Esto no tiene que ver ni con Divi ni con CF7, sino que es la manera en que el navegador interpreta ese atributo.

          Para que se vea en un blanco uniforme, tendrás que agregar lo siguiente:

          ::-webkit-input-placeholder {
              opacity: 1;
              color: #fff;
          }
          :-moz-placeholder {
              opacity: 1;
          }
          ::-moz-placeholder {
              opacity: 1;
          }
          :-ms-input-placeholder {
              opacity: 1;
          }
          

          Si tenés campos con menús desplegables, tené en cuenta que deberás agregar un color visible para las opciones, ya que quedarían sobre un fondo también blanco. Para esto:

          .wpcf7-select option {
              color: #000 !important;
          }
          

          Y si querés controlar la opacidad del texto dentro del campo al hacer clic, 0.5 para semitransparente o 0 para “limpiar” el campo:

          input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
              opacity: 0.5 !important;
          }
          input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { 
              opacity: 0.5 !important;
          }
          input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
              opacity: 0.5 !important;
          }
          input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
              opacity: 0.5 !important;
          }
          
          Responder
          • Milton

            Vaya cracks! Gracias! 🙂

          • Caribdis Diseño Web

            De nada, Milton 😀 Al parecer con Divi 2.6 van a incluir la posibilidad de agregar campos personalizados. Está por verse si solo serán simples campos de texto o si se juegan y lo hacen bien completo, como con menús desplegables, casillas de selección, selectores numéricos, selectores de fechas… bueno, creo que estoy soñando demasiado, con desplegables y casillas supongo que bastará. 😉

            Saludos.

          • Milton

            Yo creo que con Divi 2.6 solamente se podrá añadir algún campo de texto… tipo teléfono, etc, y como mucho la opción de si el campo es obligatorio o no. Pero no creo que vayan más allá de eso. Porque para tener más funciones avanzadas ellos mismos seguirán recomendando CF7 o Gravity forms, como hacen siempre. Incluso también lo hacen los desarrolladores de del theme Avada que es un super ventas. Al final más vale controlar bien CF7 y tener la fantástica ayuda que ofrecéis desde Caribdis. 🙂

          • Damián

            Aca si que me perdí!
            El código que me pasas, para que se vea con un blanco uniforme, o el primero para que se vea blanco, donde tengo que pegarlo?
            Perdon la molestia, pero probe en distintos lugares y no resulta!
            Muchas gracias nuevamente!

            Saludos,
            Damián.

          • Caribdis Diseño Web

            No sé si usaste la hoja de estilos o el ePanel. En el caso que sea, allí tenés que tener un código que ya pegaste:

            .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select {
                background-color: transparent !important;
                border: 2px solid #fff !important;
            }
            

            Ahí agregás color: #fff !important;. Te tendría que quedar así:

            .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select {
                background-color: transparent !important;
                border: 2px solid #fff !important;
                color: #fff !important;
            }
            
  16. Jesús

    ¡Muchas gracias por el aporte! Es genial, muy bien explicado y nos ha ayudado mucho a todos. He seguido los pasos pasos paso a paso, y me ha surgido el error de que llegan los correos pero no llega el asunto, ¿sabrías decirme a qué es debido?

    Un saludo!

    Responder
    • Caribdis Diseño Web

      Hola, Jesús. Gracias por comentar.

      Fijate que estés agregando la etiqueta correspondiente en el campo Asunto de la pestaña Correo electrónico (ninguna etiqueta debe contener caracteres especiales, tales como acentos, eñes, espacios u otros símbolos; solo letras, guiones y/o números).

      Mensaje - CF7

      Saludos 🙂

      Responder
      • Damián

        Ana,
        Nuevamente necesito de tu ayuda! Me pasa exactamente lo mismo que a Jesús con el asunto, pero en mis formularios no llega el dato “teléfono”. He intentado de todas formas, sin acentos ni nada que lo complique, pero no se exactamente en que sector y como debo pegarlo dentro de la pestaña “correo electrónico” de la configuración de CF7. Una excelente explicación o una captura de pantalla me salvaría, ya que al ingresar contactos de Clientes, me pierdo el dato fundamental del teléfono.
        De ante mano como siempre, muchas gracias por la ayuda!

        Responder
        • Caribdis Diseño Web

          Hola, Damián.

          Fijate si esto te sirve:

          CF7 Correo Electrónico

          Cuando la etiqueta está agregada correctamente a la plantilla de Correo electrónico, se muestra grisada donde la marqué con rojo.

          Responder
          • Damián

            Ana,
            Una vez mas muchas gracias por la ayuda! Con la configuración que me enviaste, lo solucione al momento! Muchas muchas muchas gracias!

  17. Francisco

    No se si se podrá realizar que el check box que genera contact form, tenga un cuadrado parecido al que tiene el botón de enviar por ejemplo (para que no parezca que pertenece a otra página.. ¿Sabrías como solucionarlo?

    Mil gracias

    Responder
    • Caribdis Diseño Web

      Hola, Francisco.

      Gracias por comentar. Con CSS todo se puede 😉

      Para una serie de opciones con casilla de verificación el procedimiento es el siguiente:

      En el formulario de CF7 agregamos el campo con las opciones (tildando “Envolver cada elemento con la etiqueta <label>”). El código nos quedaría algo así:

      [checkbox* checkbox-5 use_label_element "Opción 1" "Opción 2" "Opción 3"]
      

      Luego, agregamos los siguientes estilos CSS (ePanel o style.css del tema hijo):

      input[type="checkbox"] {
        display: none;
      }
      label {
        cursor: pointer;
      }
      input[type="checkbox"] + .wpcf7-list-item-label:before {
        border: 2px solid #2EA3F2;
        border-radius: 3px;
        display: inline-block;
        font: 16px/1em ETmodules;
        content:"\00a0"; 
        height: 16px;
        margin: 0 .25em 0 0;
        padding: 0;
        vertical-align: top;
        width: 16px;
      }
      input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
        background: #fff;
        color: #666;
        content: "N";
        text-align: center;
      }
      

      El resultado se verá más o menos así:

      CF7 checkbox

      El color y radio del borde lo manejás con los valores border y border-radius, lo mismo que el tamaño de fuente y los margin y padding.

      También podrías optar por otro símbolo para seleccionar la casilla, como una x o un cuadrado. Para eso, reemplazás content: "N"; por content: "M"; o por content: "^"; respectivamente.

      CF7 checbox 2

      Tené en cuenta que estos estilos no sirven para la casilla de aceptación de términos (porque no usa label). En este caso, la alternativa sería manejarlo como una casilla de verificación con una única opción y asignarle obligatoriedad:

      [checkbox* checkbox-689 use_label_element "Acepto los términos y condiciones"]
      

      Espero que te sirva.

      Responder
  18. Milton

    Madre mía… es el mejor tutorial que he visto nunca para CF7 y Divi. Y mira que he visto muchos tutoriales en inglés al respecto, porque uso mucho Divi y CF7. No tenía fe en encontrar nada parecido en español y al buscar por “divi y contact form poner un campo al lado del otro” ( que es el problema que me encuentro siempre utilizando la solución mediante CSS y el e-Panel ) me he encontrado esta joya de tutorial. Todavía no lo he probado pero me lo he leído entero y tengo la impresión de que va a funcionar muy bien. Estoy ansioso por probarlo!

    Muchas gracias de antemano.

    Responder
    • Caribdis Diseño Web

      Milton:

      Gracias por tu comentario. Es genial saber que este tutorial es útil para muchos usuarios de Divi. Y sí, a veces el abordaje más simple al problema es el que mejores resultados da. Luego nos cuentas cómo te fue con la implementación, y te invito a que compartas la página o las páginas donde lo uses, así las puedo añadir como ejemplos.

      Un cordial saludo.

      Responder
      • Milton

        Hola de nuevo, y muchas gracias por responder.

        Ya he implementado todos vuestros pasos y funciona a la perfección excepto algo que se me resiste: El campo de menú desplegable. No hay forma de que el código CSS haga efecto:

        .wpcf7-select {
          width: 100%;
          padding: 15.5px;
          border: none;
          -moz-border-radius: 0;
          -webkit-border-radius: 0;
          border-radius: 0px;
          font-family: inherit;
          color:#aaa;
          background-color: #eee;
         }
        

        Utilizando el inspector veo que aparece, por lo que está bien pegado en el Custom CSS panel. Pero incluso cambiando los valores en el inspector de Chrome, no hace caso. Solo se puede cambiar el color de fondo y texto, perono el padding. Con lo cual el campo queda muy delgado. Además no coge la fuente externa que tengo cargada, con lo cual algunos campos muestran la tipo del tema por defecto y otros la que tengo cargada. He probado a borrar todo el resto del código CSS del e-panel por si alguno causaba el conflicto, pero nada. Te pondría la URL aquí para que lo veas pero es un directorio de prueba y pide user y contraseña para visualizar la web. Que si fueras tan amable de darle un vistazo te los paso por correo, pero es para no poner aquí los accesos. He intentado de todo pero se me sigue resistiendo. No se que hago mal.

        Responder
        • Caribdis Diseño Web

          El padding del ejemplo está asignado a la fuente heredada (es decir, la predeterminada del tema), pero si usás otra fuente, lo más probable es que tengas que ajustarlo, además obviamente de asignar la fuente correspondiente en font-family. En una situación normal, el padding debería tomarlo sin más, pero si todavía se resiste, agregale la declaración !important.

          Fijate si esto te sirve. Si no, enviame los datos desde la sección de contacto y lo veo.

          Saludos.

          Responder
  19. Francisco Serrano

    Muchas gracias. Todo muy claro, conciso y funcionando a la perfección.

    Un saludo

    Responder
  20. Carlos

    Un artículo impresionante! Felicidades y muchas gracias!

    Responder
    • Caribdis Diseño Web

      De nada, Carlos. Gracias a vos por dejar tu comentario. 🙂

      Responder
  21. Jokin García

    Buenos días:

    Lo primero enhorabuena por tu página y por este fantástico tutoria. Lo he seguido y he logrado crear mi nuevo formulario para Divi.
    Pero no logro corregir el mensaje que aparece al enviar con éxito o con fallo el formulario. Aparece superpuesto al propio botón de enviar y Recaptcha.

    ¿Dónde tengo que escribir el siguiente código y los otros que indicas?:

    div.wpcf7-mail-sent-ok {
      margin-top: 50px;
    }
    

    Lo he intentado tanto en “ajustes adicionales” del formulario Contact-form-7, como en Divi: Hoja de estilo (style.css) añadiendolo al final. Pero en ambos casos no logro que se modifique nada.

    ¡Muchas gracias de antemano. Saludos!

    Responder
    • Caribdis Diseño Web

      Hola, Jokin.

      Gracias por comentar. El código indicado hay que pegarlo, preferiblemente, en la hoja de estilos del tema hijo. Si aún no toma el cambio, añadirle la declaración !important, con lo cual quedaría:

      div.wpcf7-mail-sent-ok {
        margin-top: 50px !important;
      }

      Si no has creado un tema hijo, entonces deberás pegar el código dentro del recuadro CSS personalizado, desde Divi > Opciones del tema > Ajustes generales

      Con eso, debería funcionar.

      Saludos 🙂

      Responder
      • Jokin García

        Genial! ya funciona. Como utilizo el Recaptcha, he puesto un margen de 70px en lugar de los 50px que sugerías y así el recuadro del mensaje aparece sin superponerse.

        Lo que no he logrado es que en el móvil el recuadro “Enviar” no se superponga al Recaptcha. Lo he intentado añadiendo el código que sugieres detrás del código anterior. De esta forma:

        div.wpcf7-mail-sent-ok {
          margin-top: 70px !important;
        }
        @media only screen and (max-width: 329px) {
        .wpcf7 .et_pb_contact_right {
          float: none; 
          text-align: left !important;
        }
        }
        

        ¿Podrías darme alguna sugerencia? Muchas gracias Caribdis

        Responder
        • Caribdis Diseño Web

          Intentá con float: none !important;

          Como el reCaptcha es bastante más ancho no sabría decirte si sirve. Si no, tendría que verlo en funcionamiento, ¿podrías pasarme la URL?

          Responder
          • Jokin García

            Hola, lo he intentado de nuevo sin éxito. Quizás Recaptcha es demasiado grande para que no se solape en los móviles. Si me das alguna nueva pista, perfecto. Pero de todas formas muchas gracias por tu ayuda, al menos en el PC queda bien. Saludos,

          • Caribdis Diseño Web

            Ahora que lo veo, es porque está tomando el margen negativo que modificamos para alinearlo con el botón. Para eso, entonces hay que reemplazar:

            .wpcf7 .et_pb_contact_right {
            margin-top: -14px;
            }
            

            por

            @media only screen and (min-width: 539px) {
            .wpcf7 .et_pb_contact_right {
            margin-top: -14px;
            }
            }
            
          • Jokin García

            Hola,

            He conseguido que deje de solaparse. Curiosamente si visualizo la pantalla del móvil en horizontal, Enviar queda perfectamente ubicado a la derecha del Recaptcha, pero al verlo en vertical como no caben ambos botones, entonces Enviar, queda encima. No importa, lo voy a dejar así.

            Muchas gracias por tus instrucciones y te animo a continuar con este blog tan útil.

            Un saludo,

            Jokin

    • Juan

      Hola Jokin, yo tampoco he dado con el lugar exacto para colocar el código. No encuentro el rcuadro “CSS personalizado, desde Divi > Opciones del tema > Ajustes generales”. Podrías ayudarme? gracias de antemano

      Responder
      • Caribdis Diseño Web

        Hola, Juan. El código CSS —en caso de no usar un tema hijo— se debe añadir en el ePanel. Opciones del tema (Theme Options) > Ajustes generales (General settings) > CSS Personalizado (Custom CSS).

        El código HTML del formulario se debe añadir en la sección de CF7 Contacto > Formularios de contacto > Formulario de contacto 1 > Editar.

        Responder
  22. Samuriosa

    Muy buenas:

    Tengo insalado wordpress con Divi (última versión) y Contact Form 7. He seguido tu tutorial para imitar el estilo de divi en el formulario de contacto y no me está funcionando, de forma que los campos con class=”et_pb_contact” siguen apareciendo uno debajo del otro. No flotan.

    ¿Qué puede estar fallando en mi caso?

    Responder
    • Caribdis Diseño Web

      Hola, Samuriosa.

      Me resulta extraño lo que te sucede. Si el par de campos está contenido en un div con la clase et_pb_contact_left deben aparecer uno al lado del otro. Por casualidad, ¿no has hecho algún cambio anterior en los estilos? También recordar que todos los pares de campos deben estar contenidos en un div con la clase et_pb_contact.

      Otra cosa no se me ocurre sin ver directamente el código. Si me pudieras pasar una dirección para verlo, podría revisarlo mejor.

      Saludos. 🙂

      Responder
      • Samuriosa

        Muy Buenas de nuevo:

        Tenía la web en local para cacharrear un poco con ella, pero la he subido al servidor para que la veas a ver si puedes echarme un cable.

        Te he dejado el enlace en el formulario, de todos modos vuelvo a ponerlo aquí. http://samualv.info. El módulo de contacto de Contact Form 7 es el último de abajo del todo.

        Un saludo y un millón de gracias

        Responder
        • Caribdis Diseño Web

          Hola de nuevo 🙂

          Fijate que tenés cinco cierres de etiqueta <p> de más. Todos antes del cierre de los <div>. Los está tomando como párrafos flotados a la derecha, pero como están vacíos no ves nada. Aquí te paso el detalle:

          <div class="et_pb_contact">
          <div class="et_pb_contact_left">
          <p>Campo a la izquierda</p>
          <p>Campo a la derecha</p>
          </p> <-- Etiqueta de más
          </div>
          <div class="et_pb_contact_left">
          <p>Campo a la izquierda</p>
          <p>Campo a la derecha</p>
          </p> <-- Etiqueta de más
          </div>
          <p>Campo mensaje</p>
          </p> <-- Etiqueta de más
          </div>
          <p>Botón enviar</p>
          <div class="et_pb_contact">
          <div class="et_pb_contact_right">
          <p>Captcha</p>
          </p> <-- Etiqueta de más
          </div>
          </p> <-- Etiqueta de más
          </div>
          

          Simplemente eliminá esas </p> que están sobrando y ahí debería verse correctamente.

          Responder
          • Samuriosa

            Muchas gracias:

            Efectivamente ya ha funcionado. Simplemente era quitar los intros que había colocado en el formulario (por eso de evitar el “churro código”).

            Un saludo y un millón de gracias

  23. Juan

    Muchísimas gracias por la aportación, estoy empezando a realizar páginas con WordPress y todavía no controlo mucho.

    Un tutorial genial, la verdad es que la plantilla DIVI es fantástica pero en algunas cosas como los formularios se queda un poco coja. Tengo una duda, ¿cómo se pondría en el formulario un campo para adjuntar archivos?

    ¡Un saludo!

    Responder
    • Caribdis Diseño Web

      Hola, Juan. Gracias por dejar tu comentario.

      El campo para adjuntar archivos lo generás con el botón archivo (en el formulario de CF7 que estés creando o editando), y esa porcioncita de código podrías ponerla dentro de las etiquetas

      <div class="et_pb_contact_left">
      </div>
      

      Depende de dónde quieras ubicarlo, por ejemplo, debajo del campo Mensaje, podría quedar así:

      <div class="et_pb_contact_left">
      <br />
      [file file-540 limit:1mb filetypes:pdf|doc|docx|txt]
      </div>
      

      La etiqueta <br /> es para que no quede tan pegado al campo anterior. Y si querés agregar algún texto, como por ejemplo: “Envíe el archivo en formato tal y tal”

      <div class="et_pb_contact_left">
      <br />
      Envíe el archivo en formato PDF, DOC o TXT
      [file file-540 limit:1mb filetypes:pdf|doc|docx|txt]
      </div>
      
      Responder
  24. Rafa Ferrero

    Hola hola !!!
    Ante todo gracias por la labor que desempeñas ayudándonos a todos con el tema Divi… lo hace genial !!!
    Mi duda es la siguiente… Resulta que estoy intentando seguir el tutorial para personalizar el formulario según lo explicas, pero no tengo ni idea de dónde tendría que insertar el código para el formulario completo:

    <div class="et_pb_contact">
    <div class="et_pb_contact_left">
    <p>[text* your-name placeholder "Nombre"]</p>
    <p>[email* your-email placeholder "Correo electrónico"]</p>
    </div>
    <div class="et_pb_contact_left">
    <p>[text your-subject placeholder "Asunto"]</p>
    <p>[tel tel-1 placeholder "Teléfono"]</p>
    </div>
    <p>[textarea your-message placeholder "Mensaje"]</p>
    </div>
    <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
    <div class="et_pb_contact">
    <div class="et_pb_contact_right">
    <p>[captchac captcha-579] [captchar captcha-579]</p>
    </div>
    </div>
    

    Lo que estoy intentando hacer es que necesito poner al final de mi formulario la típica casilla de verificación y Acepto los términos y condiciones… Algo que no puedo hacer con el formulario que viene por defecto con DIVI, pero que sí me permite hacer Contact Form aunque lo tengo que personalizar para que tenga el mismo estilo que lleve la web.

    Desde ya muchísimas gracias por todo lo que nos enseñas !!!

    Responder
    • Rafa Ferrero

      Solucionado !!! He indagado y he comprobado que había que introducir ese código en el mismo sitio que donde Contact Form genera el suyo propio.

      Gracias de antemano !!! Saludos !!!

      Responder
      • Caribdis Diseño Web

        Hola, Rafa:

        Me alegro de que hayas podido resolver tu duda. Para cualquier otra, estoy para ayudar. Saludos 🙂

        PD: Agrego tu sitio a la lista de ejemplos.

        Responder
  25. Luis Nieto

    Hola!!! me encanta tu web, casualmente investigando sobre DIVI por que lo adquiri recientemente y estoy sacandole el máximo provecho, encontré que eres responsable por varias traducciones de manuales de este excelente tema, me gustaria aprender mucho mas, y este post por ejemplo me ha servido, por que uso CF7 para todos mis formularios en los sitios que diseño, me parece de lejos el mejor plugin para Forms ya lo uso desde hace años y me ha salvado la vida varias veces y aquí me enseñas a conectarlo con DIVI muy bien. Pero tengo otra dudita a ver si me pudieras dar luces: tengo unas imágenes colocadas en 4 columnas a todo lo ancho del explorador, estas actuarían con links que me llevan a otros sitios, pero las veo muy simples, me gustaría hacer algunos efectos con CSS de modo que al pasar el mouse o alguna otra acción, haga algún efecto llamativo, pero no se manejar mucho el tema del CSS personalizado, agradezco si me ayudas con algo.

    Saludos desde Colombia!!

    Responder
    • Caribdis Diseño Web

      Hola, Luis:

      Muchas gracias por tu comentario. Coincido totalmente con tus apreciaciones sobre el plugin Contact Form 7. A mí me encanta su flexibilidad y simplicidad para integrar a cualquier tipo de tema. Para el usuario principiante puede parecer muy básico por la forma en que está constituido (sin interfaz visual o drag and drop, ni adornos excesivos), pero con los conocimientos adecuados de CSS y HTML se puede lograr casi cualquier cosa.

      En cuanto a tu otra consulta, tendrías que usar una clase personalizada para la fila en la cual están colocadas las cuatro columnas, y luego manejar todo con CSS.

      Por ejemplo, le ponés el nombre “efectos” a la fila (en el campo Clase CSS de los Ajustes generales). Luego, en el recuadro CSS personalizado de las Opciones del tema, o mejor aún en la hoja de estilos del tema hijo, agregás lo siguiente:

      .efectos img:hover { código css aquí; }
      /* para el efecto al posar el mouse */
      .efectos img { código css aquí; }
      /* opcional, si usás alguna transición en el :hover,
      o para el estado inicial de la imagen */
      .efectos .et_pb_image { código css aquí; }
      /* también opcional para determinados efectos */
      

      Un efecto de imagen ampliada podría ser:

      .efectos img:hover {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      }
      /* esto es para que al posar el mouse la imagen tenga un efecto de
      zoom aumentado */
      .efectos img {
      -webkit-transition: all 0.7s ease;
      transition: all 0.7s ease;
      }
      /* esto es para que la transición sea suave y la imagen no se
      agrande de golpe */
      

      Y el opcional:

      .efectos .et_pb_image {
      overflow:hidden;
      }
      /* esto es para que la imagen no supere sus contornos actuales */
      

      En esta página encontrarás un montón de ejemplos de transiciones con sus respectivos códigos CSS. Para referencia, .container:hover .image sería el equivalente a .efectos img:hover, .image el equivalente a .efectos img, y .container el equivalente a .et_pb_image.

      También podés usar filtros (fijate en el manual Explorando Divi, en la sección Las nuevas pestañas CSS personalizado).

      Espero no haberte confundido con tanta cosa junta 😉 De todas maneras, te recomiendo buscar algún buen tutorial de CSS; es un código muy fácil de aprender (por supuesto, complementar con HTML) y cuando lo dominás te das cuenta de las infinitas posibilidades que te ofrece.

      Quedo a tu disposición por cualquier otra consulta. Un cordial saludo 🙂

      Responder
      • Luis Nieto

        Hola!!! super!!!! me quedo de maravilla, mejor de lo esperado, no me confundi con tus explicaciones, por que ya manejo un poco de CSS, ademas explicaste perfecto, solo que la mecanica del Theme para colocar el codigo CSS era lo que me daba dolores de cabeza, en este momento estoy leyendo tu manual, solo tengo algunas dudas con respecto a las galerias y portafolios, sobre todo a la forma de obtener informacion directa de los POST, PAGES y reflejarla en los controles del tema, pero seguro, estaran en el manual si me siento enredado seguro, te pediré ayuda… Gracias por tu ayuda!!!

        Responder
        • Caribdis Diseño Web

          ¡Perfecto, entonces! Cualquier otra duda, aquí estoy. Saludos.

          Responder
  26. Luis Mosquera

    Gracias por tu ayuda, me sirvió muchisimo, sigue así crack!

    Responder
    • Caribdis Diseño Web

      De nada, Luis. Me alegro de que te haya servido.

      Saludos 🙂

      Responder

Responder a Caribdis Diseño Web Cancelar la respuesta

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

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!