Divi 2.6 con Contact Form 7

94 comentarios

Por: Caribdis.Net

Publicada: 31 de enero de 2016

En esta entrada, que se ha convertido en una de las más solicitadas del blog, aprendimos cómo integrar el plugin Contact Form 7 a Divi para tener la posibilidad de agregar campos que no estaban disponibles en el módulo nativo del tema de cabecera de Elegant Themes.

La última actualización de Divi trajo algunos cambios, entre ellos un módulo extendido del Formulario de contacto, que ahora permite añadir campos personalizados, aunque limitados a entrada de texto.

Para la mayoría de los usuarios esta ampliación bastará (por ejemplo, para quienes nada más necesitaban añadir un campo para el número de teléfono), pero sigue quedándose corta para aquellos que precisan campos un poco más avanzados.

Con el nuevo módulo de Formulario de contacto en Divi 2.6, gran parte de la estructura del código ha cambiado, por lo cual el tutorial anterior solo aplica hasta la versión 2.5. Sin embargo, para aquellos que aún necesiten agregar tipos de campos que no están disponibles en Divi (desplegables, casillas de selección, etc.), vamos a adaptarlo a la versión 2.6.

La nueva estructura del formulario CF7

Para comenzar, tendremos que reconocer la estructura para poder adaptarla a Divi. Veamos el formulario estándar de CF7, con los campos Teléfono y Asunto:

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

A esta estructura asignaremos las clases de Divi:

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

Notemos que el div contenedor se mantiene: .et_pb_contact. Tenemos que agregar un nuevo div inmediatamente a continuación, con la clase .et_pb_contact_form a la porción que contenga todos los campos de entrada.

Y luego manejar los pares de campos que queremos juntos como párrafos individuales con las siguientes clases:

.et_pb_contact_field
.et_pb_contact_field_half para el campo a la izquierda

.et_pb_contact_field
.et_pb_contact_field_half
.et_pb_contact_field_last para el campo a la derecha

Y si necesitamos un campo en ancho completo, usar un párrafo individual con las siguientes clases:

.et_pb_contact_field
.et_pb_contact_field_last

El botón quedará fuera de ambos div, estará dentro de un div nuevo con la clase .et_contact_bottom_container, y la etiqueta de CF7 tendrá las clases .et_pb_contact_submit .et_pb_button.

El resultado será este:

CF7 con Divi 2.6El botón queda con algo de margen innecesario a la derecha, que se debe al icono de carga (ajax-loader) cuando se hace clic al enviar. Lo corregiremos con este código en el recuadro CSS personalizado del ePanel o en el archivo style.css del tema hijo:

div.wpcf7 .ajax-loader {
/* para versiones anteriores a 4.6 de CF7 la clase es div.wpcf7 img.ajax-loader */
    position: absolute;
    left: 0;
}

Divi 2.6 y CF7 - Icono de carga

Recordemos que para evitar esto:

Botón "Enviar" de CF7Tenemos que agregar el siguiente código:

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

Botón "Enviar" en CF7 con estiloBien. Este es un ejemplo para comprender la estructura nueva, ya que aquí CF7 no hace nada diferente de lo que hace ahora el flamante módulo de Divi.

Pues bien, si necesitamos campos que no están disponibles en Divi, vamos a tener que seguir esa estructura detallada anteriormente.

Agregar Really Simple CAPTCHA

Pese a que CF7 ya no ofrece más soporte para Really Simple CAPTCHA y lo reemplazó por reCAPTCHA de Google, el plugin sigue funcionando correctamente con aquella extensión.

En mi caso particular, prefiero seguir usando Really Simple CAPTCHA siempre que demuestre funcionar: la imagen es clara, pequeña, con pocos caracteres y no desentona con el formulario desde el punto de vista del diseño.

Google reCAPTCHA me resulta recargado, molesto y estéticamente monstruoso. No dudo de su efectividad, pero… gustos son gustos.

Para tener en cuenta, es que ya no encontraremos el botón para añadir RSC en el editor del formulario de CF7. Simplemente tendremos que agregar el código abreviado correspondiente: captchac para la imagen y captchar para el campo de ingreso de texto.

Veamos cómo integrarlo en CF7 al formulario anterior.

Colocamos la etiqueta al final del código (sí, debajo del botón Enviar) y la envolvemos en las siguientes etiquetas de Divi:

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

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

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

Divi 2.6 con CF7 y Really Simple CAPTCHA

Casi perfecto; simplemente ensanchamos un poco el campo de ingreso para los cuatro caracteres y centramos verticalmente la imagen:

.wpcf7 .et_pb_contact_right p input {
    max-width: 65px;
}
.wpcf7-captchac {
    position: relative;
    right: 0px;
    top: 7px;
}

Divi 2.6 con CF7 y Really Simple CAPTCHA - FinalLa clase .cf7_rscaptcha la agregamos para evitar esto en los teléfonos móviles,

Contact Form 7 en Divi

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

Solo nos quedará añadir el siguiente código CSS:

@media only screen and (max-width: 329px) {
.wpcf7 .et_contact_bottom_container.cf7_rscaptcha {
float: none; 
overflow: initial;
}
}

Estilo en mensajes de error y de envío exitoso

Recordemos que al enviar un formulario con datos incompletos o erróneos se produce la siguiente advertencia:

Divi 2.6 y CF7 - Mensaje de errorPara evitar que ese mensaje con borde amarillo se superponga al botón Enviar, añadiremos el siguiente código:

div.wpcf7-validation-errors {
    clear: both;
    border: none;
}

O bien, si por considerarlo redundante al mostrar cada campo su propio mensaje de error en color rojo, queremos suprimirlo:

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

Para el mensaje de envío con éxito, también tenemos que evitar la superposición con el botón enviar. Opté también por eliminar el borde, ya que no “pega” con el resto del diseño:

Divi 2.6 y CF7 - Mensaje de envío exitoso

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

Agregar campo desplegable de opciones

Vamos a reemplazar el campo Asunto por un desplegable. Este será el código completo:

<div class="et_pb_contact">
<div class="et_pb_contact_form">
<p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-2 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>
<p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p>
</div>
</div>
<div class="et_contact_bottom_container">
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
</div>

Los estilos CSS serán prácticamente los mismos que para Divi 2.5:

.wpcf7-select {
    width: 100%;
    padding: 15px;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0px;
    color:#999;
    background-color: #eee;
    font-size: 14px;
 }

Divi 2.6 y CF7 - Campo desplegable¿Queremos personalizar la flecha del menú? (No olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente):

.wpcf7-select {
    width: 100%;
    padding: 15px;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0px;
    color: #999;
    background-color: #eee;
    font-size: 14px; 
    -moz-appearance: none;
    -webkit-appearance: none;
    background-position: center right 15px;
    background-image: url("https://urldelarchivo/arrow.png"); /* URL del archivo de la imagen */
    background-repeat: no-repeat;
 }

Divi 2.6 y CF7 - Campo desplegable y flecha personalizada

Agregar casillas de selección

En este último ejemplo, vamos a añadir un campo con tres opciones para seleccionar, y al cual aplicaremos estilos para que coincida con el diseño del formulario de Divi.

En el formulario de CF7 agregamos el campo con las opciones tildando Envolver cada elemento con la etiqueta <label>.

El código completo quedaría así:

<div class="et_pb_contact">
<div class="et_pb_contact_form">
<p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-2 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>
<p class="et_pb_contact_field et_pb_contact_field_last">[checkbox checkbox-738 use_label_element "Opción 1" "Opción 2" "Opción 3"]</p>
<p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p>
</div>
</div>
<div class="et_contact_bottom_container">
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
</div>

Veremos que sin estilos es un espanto:

Divi 2.6 y CF7 - Casillas de selección sin estilosEsto se puede corregir con estos dos códigos CSS:

.wpcf7-checkbox label {
    display: inline-block;
}
.wpcf7-checkbox input {
    width: initial !important;
}

Divi 2.6 y CF7 - Casillas de selección con estilos estándarPero como queremos que se vea más acorde con el diseño de Divi, vamos a aplicar estilos a las casillas.

Suprimimos la casilla predeterminada del navegador:

.wpcf7 input[type="checkbox"] {
    display: none;
}

Aplicamos el cursor de la manito al pasar encima de las opciones:

.wpcf7 label {
    cursor: pointer;
}

Y luego creamos nuestras propias casillas personalizadas:

.wpcf7 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;
}
.wpcf7 input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
    background: transparent;
    color: #666;
    content: "N";
    text-align: center;
}

Voilà!

Divi 2.6 y CF7 - Casillas de selección con estilos personalizados

Estilos en los marcadores de posición

Con estas personalizaciones, vamos a controlar el aspecto de los nombres dentro de los campos, que se ven un poco más tenues que su color verdadero.

Con el siguiente código tomarán el valor real:

.wpcf7 ::-webkit-input-placeholder {
    opacity: 1;
    color: #999;
}
.wpcf7 :-moz-placeholder {
    opacity: 1;
}
.wpcf7 ::-moz-placeholder {
    opacity: 1;
}
.wpcf7 :-ms-input-placeholder {
    opacity: 1;
}

Nótese que el primer código es para Google Chrome, que sí necesita el valor inicial del color para interpretarlo correctamente.

Con esta lógica, podemos usar los valores necesarios si es que queremos cambiar el color de los textos dentro de los campos (por ejemplo, a rojo):

.wpcf7 ::-webkit-input-placeholder {
    opacity: 1;
    color: #cc0000;
}
.wpcf7 :-moz-placeholder {
    opacity: 1;
    color: #cc0000;
}
.wpcf7 ::-moz-placeholder {
    opacity: 1;
    color: #cc0000;
}
.wpcf7 :-ms-input-placeholder {
    opacity: 1;
    color: #cc0000;
}

Divi 2.6 y CF7 - Marcadores de posición

Recordar que el campo desplegable no es un placeholder, por lo cual para cambiar el color hay que modificar el valor de color en la clase .wpcf7-select en el CSS. Lo mismo para las opciones de la casilla de selección.

Por último, le daremos el mismo estilo de Divi al efecto de “activar” el campo cuando llevamos el cursor.

Con CF7 el campo permanece visible al seleccionarlo, y en el caso del campo Nombre, incluso se oscurece un poco.

Divi 2.6 y CF7 - Marcadores de posición predeterminadosAplicamos los siguientes estilos, y tendremos el mismo efecto que en Divi:

.wpcf7 input:focus::-webkit-input-placeholder, .wpcf7 textarea:focus::-webkit-input-placeholder {
    opacity: 0 !important;
}
.wpcf7 input:focus:-moz-placeholder, .wpcf7 textarea:focus:-moz-placeholder { 
    opacity: 0 !important;
}
.wpcf7 input:focus::-moz-placeholder, .wpcf7 textarea:focus::-moz-placeholder {
    opacity: 0 !important;
}
.wpcf7 input:focus:-ms-input-placeholder, .wpcf7 textarea:focus:-ms-input-placeholder {
    opacity: 0 !important;
}

Divi 2.6 y CF7 - Marcadores de posición con estilosUna posdata importante de este tutorial es recordar dónde pegar los códigos para Divi y dónde colocar correctamente las etiquetas de CF7 para poder recibir todos los datos enviados desde el formulario.

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/editar.

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

En tanto, en la pestaña Correo Electrónico de nuestro formulario activo pegaremos las etiquetas generadas por CF7 de acuerdo con el siguiente ejemplo:

Plantilla de Correo CF7

Algunos ejemplos en funcionamiento

Ú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. Luana Vila

    Hola.
    Muy bueno y útil el post. gracias por compartirlo y explicarlo con tanto detalle.
    Yo tengo Divi 3.19.15 y casi todo me ha funcionado perfectamente.
    Solo no he conseguido que me salga la casilla de verificacion, o cuando aparece no se puede marcar, ni he conseguido quitar o personalizar los mensajes de error o éxito.
    Sabes si esto se debe a la versión de Divi? Tienes alguna sugerencia?

    Mucahs gracias. Un saludo.

    Responder
  2. Luiso25

    Buenos días, gracias por el tutoríal me va a venir genial porque en mi página que estoy construyendo se me plantea un problema con un formulario. A ver si soy capaz de explicarme: Estoy montando la web con el Tema Divi Versión: 3.19.5. y necesito hacer tres formularios distintos con un solo botón de envío. Estos tres formularios debería estar en un solo módulo pero el problema es que los tres tienen un texto de cabecera diferente. Con el DIVI me temo que no puedes insertar una línea de texto y un separador para delimitar los tres modelos de formulario. En el primer formulario el texto de cabecera sería “Datos del jugador”, el segundo sería “Datos del tutor” y el tercero (Opciones del curso); todos ellos con sus correspondientes campos para rellenar.
    La pregunta es… se puede hacer esto con DIVI (tres formularios con un solo botón de envío). La otra opción es seguir tu tutoríal y adaptar los códigos fuente y sus CSS a mi diseño.
    Muchas gracias por tu ayuda y espero tu respuesta para empezar con ello….

    Responder
    • Caribdis.Net

      Hola, Luiso25.

      Gracias por tu comentario.

      Divi falla en este aspecto, ya que tendría que tener una opción para agregar una simple etiqueta <p> que permita introducir texto entre los campos.

      Se puede lograr una apariencia muy similar, con un campo de texto y ajustando un poco los estilos. No es lo más prolijo, pero sirve para salir del paso.

      Como texto de cabecera insertá un campo de texto que no sea obligatorio y que tenga el mismo color de fondo de la página (ajustá el tamaño y color de fuente a tu conveniencia). Podés usar también un borde superior que haga las veces de separador. Por último, en el recuadro Elemento principal del CSS personalizado de los ajustes de este campo de texto escribí pointer-events: none;. Esto último hará que el campo no sea cliqueable y no se pueda escribir dentro.

      Eso sería todo. 🙂

      Espero que te sirva.

      Saludos.

      Responder
      • Luiso25

        Buenos días Ana, gracias por la rápida respuesta… Lo pondré en práctica y te cuento….
        Muchas gracias

        Responder
  3. Eustorgio Reyes

    Hola Ana, gracias por tu ayuda, ya pude adecuar mi formulario con Contact form, siguiendo tu tutorial. Me queda un problema y es que no me sale el mensaje de exito, cuando la persona deja los datos. Cuando reviso el correo sale la pagina de suscripción, lo que indica que el formulario funciona. ¿Como hacer que aparezca el mensaje de exito en el formulario?. Copie el codigo que me indicas en el tema hijo pero no toma el cambio.
    De antemano agradezco tu ayuda.
    Saludos

    Responder
    • Caribdis Diseño Web

      Hola, Eustorgio.

      ¿Cuál es el código que usaste? En todo caso, eviame la URL del formulario para revisarlo.

      Saludos.

      Responder
  4. Ernesto

    Para que aparezca en los mensajes la linea verde o amarilla donde se debe pegar el codigo? :

    div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng {
    clear: both;
    border: none;
    }

    Responder
    • Caribdis Diseño Web

      Hola, Ernesto.

      El código citado es para ocultar los bordes de color en los mensajes de validación. Si querés mostrarlos, tenés que borrar la línea que dice border: none;.

      Y el código va en el archivo style.css del tema hijo (si está creado y en uso), o en el panel CSS personalizado de las opciones del tema.

      Saludos.

      Responder
  5. Jesus

    Genial ésta guía. La he seguido paso a paso y ya tengo mi formulario como quiero, se ve genial. Sólo tengo un problema, y es que el checkbox del acceptance no se ve. ¿Sabes por qué puede ser? Gracias!

    Responder
    • Caribdis Diseño Web

      Hola, Jesús.

      La casilla de aceptación de términos no usa label y no se ve por los estilos agregados a las otras casillas. En este caso, reemplazá:

      .wpcf7 input[type="checkbox"] {
          display: none;
      }
      

      Por:

      .wpcf7 input[type="checkbox"]:not(.wpcf7-acceptance) {
          display: none;
      }
      

      Y agregá:

      .et_pb_contact p input.wpcf7-acceptance {
          width: initial;
      }
      

      Saludos.

      Responder
      • Jesus

        Funciona! Ya se ve el checkbox del acceptance. Gracias!

        Responder
  6. Paula

    Una pregunta: hay algun truco para que no aparezca el recuadro verde cuando se envía el formulario con éxito? Estoy aplicando el CSS que mencionas arriba pero aún así aparece el borde verde (o amarillo en caso de un error). Estoy usando la versión 3.0 de DIVI. No sé si tendrá algo que ver.
    Aparte de eso el tutotial ha sido excelente. Me quedó todo genial. Gracuas

    Responder
    • Caribdis Diseño Web

      El código completo es este y funciona para todas las advertencias:

      div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng {
          clear: both;
          border: none;
      }
      

      Fijate que el navegador esté cargando correctamente los cambios en la hoja de estilos.

      Responder
  7. Paula

    Fenomenal tu tutorial! Ha funcionado a la perfección y he aprendido a hacer mis propios cambios.
    Lo único es que tengo qeu agregar un campo de subida de archivo a mi formulario y no logro darle la forma que quiero y que se adapte al DIVI. Alguna sugerencia?

    Responder
    • Caribdis Diseño Web

      Hola, Paula.

      Gracias por tu comentario.

      Fijate si esta respuesta te sirve.

      Saludos.

      Responder
  8. mati

    Muy completo todo! tengo una pregunta: cómo puedo hacer para que queden 3 cuadros, quiero que ingresen Alto, Ancho y Largo.

    Responder
    • Caribdis Diseño Web

      Hola, Mati.

      Tendrías que darles una clase personalizada a los tres campos, en lugar de .et_pb_contact_field_half. Por ejemplo:

      <p class="et_pb_contact_field un_tercio">[text* alto placeholder "Alto"]</p>
      <p class="et_pb_contact_field un_tercio">[text* ancho placeholder "Ancho"]</p>
      <p class="et_pb_contact_field un_tercio">[text* largo placeholder "Largo"]</p>
      

      Y luego, aplicarles estilos con CSS:

      .un_tercio {
          width: 33.33%;
          float: left;
      }
      

      Espero que te sirva.

      Saludos.

      Responder
  9. Ricardo Alfaro Jiménez

    Estimada Anita, en primer lugar te saludo cordialmente y te deseo un año 2017 lleno de satisfacciones y alegría. Por otra parte como en muchas otras ocasiones, recurro a ti para solicitar ayuda. Tengo una página hecha con Divi, y al agregar un mapa en la sección de contacto, éste me aparece siempre en modo mapa y no en satelite como yo quiero, lo he grabado mil veces en modo satélite y siempre vuelve a aparecer en modo mapa, hay alguna posibilidad de “forzar” la vista en modo satélite?

    De antemano, muchas gracias.

    Saludos cordiales.

    Responder
    • Caribdis Diseño Web

      Hola, Ricardo.

      Gracias por tu saludo y te deseo un excelente año también 🙂

      Divi no incluye esa opción y si quisieras aplicarla tendrías que editar un archivo del tema (es poco práctico porque cada vez que se actualice tendrás que volver a editarlo, pero si es estrictamente necesario es la única alternativa).

      El archivo en cuestión es frontend-builder-scripts.js de la carpeta /Divi/includes/builder/scripts/ y la línea que tendrías que editar es mapTypeId: google.maps.MapTypeId.ROADMAP, por mapTypeId: google.maps.MapTypeId.SATELLITE,

      Un abrazo.

      Responder
      • Ricardo Alfaro Jiménez

        Nuevamente, muchas gracias estimada Anita, lo probaré a ver como anda. Pero me queda una duda, no hay forma de “enlazar” este archivo en un child theme para no tener que modificarlo cada vez que se actualice Divi?

        Saludos.

        Responder
        • Caribdis Diseño Web

          No sería lo aconsejable, porque es un archivo del core del tema y si en el futuro se actualiza para corregir alguna incompatibilidad o para añadir una función nueva, tu sitio jamás se enterará y podrían ocurrir efectos indeseados.

          Pero sí es posible. Creás una carpeta /js/ en el tema hijo y le pegás el archivo frontend-builder-scripts.js con la línea modificada. Luego en functions.php pegás el siguiente código:

          function override_parent() {
          add_action('wp_enqueue_scripts','override_js');
          }
          add_action ('after_setup_theme','override_parent');
          function override_js() {
          wp_dequeue_script( 'et-builder-modules-script' );
          wp_enqueue_script( 'et-builder-modules-script', get_stylesheet_directory_uri() . '/js/frontend-builder-scripts.js', array( 'jquery' ), true );
          }
          

          Eso sería todo.

          Saludos.

          Responder
          • Ricardo Alfaro Jiménez

            Muchas gracias Anita, probaré ambas opciones.

            Saludos.

  10. Eduardo

    Buenas tardes,

    muchas gracias por tu trabajo, que nos ayuda mucho. Estoy probando este diseño en la plantilla Extra de Elegant Themes, en principio funciona perfectamente con alguna pequeña variación, de hecho me gusta como queda en distintos navegadores.

    El problema que tengo es que no las dos columnas en móvil se siguen viendo, no funciona responsive http://ofertassingles.com/prueba2/ desde aquí pueden verlo.

    He intentado añadir al css este código pero no funciona correctamente, …

    @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last {
    width: 100%;
    }

    …supongo que algo he hecho mal, me puedes ayudar?

    Responder
    • Caribdis Diseño Web

      Hola, Eduardo.

      La verdad, no puedo reproducir el incidente. En mi instalación de Extra se ven de ancho completo en resoluciones menores.

      Este es el código tal cual lo tengo:

      <div class="et_pb_contact">
      <div class="et_pb_contact_form">
      <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half">[tel* tel-1 placeholder "Teléfono"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-1 first_as_label "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_last">[checkbox* checkbox-5 use_label_element "Opción 1" "Opción 2" "Opción 3"]</p>
      <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p>
      </div>
      </div>
      <div class="et_contact_bottom_container">
      <p>[submit "Enviar"]</p>
      </div>
      <div class="et_contact_bottom_container cf7_rscaptcha">
      <div class="et_pb_contact">
      <div class="et_pb_contact_right">
      <p>[captchac captcha-579] [captchar captcha-579]</p>
      </div>
      </div>
      </div>
      

      Fijate copiarlo y pegarlo como está. (Las clases del botón las suprimí, porque en Extra generan un efecto raro al posar el puntero).

      Si sigue sin verse correctamente fijate que no sea algún estilo (agregado al tema o de algún plugin) que lo esté sobrescribiendo.

      Saludos.

      Responder
      • Eduardo

        Gracias por la respuesta, pero sigue funcionando de forma no deseada, he revisado los plugins y no veo ninguno que afecte a las clases que hace referencia el formulario, y como código personalizado solamente tengo el siguiente:

        body {background: #f7f7f7;}
        .et_pb_widget .widgettitle {background: none; color: #800000;}
        .no-activo {background: #F3F781; color: #ff0000; text-align: center; font-size: 120%; padding: 10px; margin-top: 20px;}
        .et_pb_toggle_content ul {padding: 0 0 0 3.143em; margin-top: 0;}
        .et_pb_toggle_content ul li ul {padding: 0 0 0 4.143em;}
        .et_pb_toggle_content p {padding-bottom: 0;}
        .et_pb_slide_description {color: #fff; text-shadow: 0px 2px 3px #000;}
        .excerpt {
        font-size: 80%;
        text-align: justify;
        }

        .et_pb_module.et_pb_toggle { border-color: #ccc !important; }

        /* Customization – make links in posts bold */
        .post-content p a {
        text-decoration: none;
        color: #848484 !important;
        }

        /* Customization – underline links in posts when hovering */
        .post-content p a:hover, a:focus {
        text-decoration: underline;
        color: #a4a4a4 !important;
        }

        .cat.esc {border-bottom: 2px solid #890963 !important;}
        .custom-field-fechas {float: left; font-size: 11px; color: #000; clear: right; font-weight: bold;}
        .cff2 {float: left; margin-right: 3px; font-weight: bold; font-size: 11px; color: #800000;}

        /*LATERAL CON TELÉFONO DE BARRA LATERAL*/

        .edu1 {margin-top: 30px; text-align: center; float: left; width: 30%;}
        .edu2 {margin-bottom: 18px; text-align: center; float: left; width: 60%;}
        .edu-img {padding: 10px;}
        .edu-txt-rojo {text-align: center; padding-bottom: 5px; color: #800000; font-size: 18px !important;}
        .edu-txt-negro {float: left; padding: 5px; color: #000000; font-size: 18px !important;}
        .edu-txt-tel {float: left; padding: 10px 5px; color: #800000; font-size: 24px !important; font-weight: bold;}

        Tampoco veo que podría ser… me puedes ayudar?

        Muchas gracias

        Responder
        • Caribdis Diseño Web

          Hola, Eduardo.

          ¿Desactivaste los plugins? ¿Activaste el tema padre?

          Por otro lado, fijate que la hoja de estilos del tema hijo está cargando dos veces (como child-style-css y como extra-style-css). Esto no debería influir en la cuestión del formulario, pero tampoco debería ocurrir (revisá el código de functions.php).

          Saludos.

          Responder
          • Eduardo

            Hola que tal… he modificado el achivo functions.php, he activado extra, he desactivado todos los plugins, he limpiado chaché de navegadores… no se que le pasa, no podría forzarse el diseño para esas clases respondan correctamente?

            Si no es posible no quiero molestarte más, muchas gracias por todo de todas formas…

          • Caribdis Diseño Web

            Hola, Eduardo.

            Probá con este código:

            @media (max-width: 767px) {
            .et_pb_contact_field, .et_pb_contact_field .wpcf7-textarea, .wpcf7-select {
                width: 100% !important;
            }
            

            En una situación normal no debería ser necesario, pero para este caso puntual creo que bastará.

            Saludos.

          • Eduardo

            Muchisimas gracias por tu respuesta. Disculpa que no te diese el feedback antes pero me ha pillado de viaje, pasé el código y vi que funcionaba al final, pero no pude agradecerte tu tiempo.

            Por si sirve de algo he visto que mi child theme no está bien configurado, ya que código que pongo ahí no lo interpreta bien, y si lo pongo en el espacio de la plantilla padre si lo hace bien, será cuestión de crear otro child theme para que no vuelva a pasar.

            Tomo nota de la web caribdis y os tendré muy en cuenta para futuros proyectos así como os recomendaré siempre que pueda.

            Un saludo !!

  11. Joan

    Hola,

    De nuevo gracias por el blog.

    He puesto un checkbox de dos casillas. El problema es que deja marcar las dos opciones que pongo y cundo se envia el formulario te lo deja realizar.

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Joan.

      Para hacer las casillas exclusivas, tenés que usar la etiqueta exclusive. El código sería algo así:

      [checkbox* check-1 exclusive "Opción 1" "Opción 2"]

      Con el asterisco el campo es obligatorio.

      Saludos.

      Responder
  12. José Miguel

    Muy agradecido por esta ayuda!
    Saludos!!!

    Responder
  13. Jose

    Hola me sirvió de mucha ayuda tu guía.
    Una pregunta como has hecho para traducir tu pagina y poner la bandera arriba
    saludos.

    Responder
    • Caribdis Diseño Web

      Hola, José.

      Gracias por tu comentario. Fijate en esta respuesta.

      Saludos.

      Responder
  14. Josep

    Hola, primero que todo muchas gracias por compartir estas soluciones. Son perfectas! No sé si el nuevo divi ha cambiado el css del botón de enviar para poderlo poner más a la derecha lo comento porque el código que tienes que es el siguiente con el Divi que estoy utilizando no funciona, para que funcione hay que quitar img.
    Este es el que tienes publicado:
    div.wpcf7 img.ajax-loader {
    position: absolute;
    left: 0;
    }

    Este es el que me funciona:
    div.wpcf7 .ajax-loader {
    position: absolute;
    left: 0;
    }

    Responder
    • Caribdis Diseño Web

      Hola, Josep.

      Gracias por tu comentario.

      Lo que ha cambiado es el marcado HTML del icono de carga en la última actualización de Contact Form 7, que pasó de ser una imagen a ser un <span>. Gracias por señalarlo. Voy a actualizar el código también en la entrada.

      Saludos.

      Responder
  15. Juan Carlos

    Genial todo Ana.
    Solo hay una cosa que no consigo dejar con el mismo estilo que DIVI.

    Es la altura de los campos Select.

    Se queda aprox. la mitad de un campo convencional (Si el alto de un xampo Text es de 1 cm. el select se queda en menos de 0,5 cm).

    ¿Se te ocurre algún remedio?

    Gracias anticipadas

    Responder
    • Caribdis Diseño Web

      Hola, Juan Carlos.

      Tenés que probar con los valores de padding de la clase .wpcf7-select hasta encontrar el que se ajuste a tu diseño.

      Saludos.

      Responder
  16. Juan Carlos

    Saludos Ana y muchas gracias por tus aportaciones.
    Actualmente estoy usando DIVI 3.0
    Soy un completo novato y siguiendo tus indicaciones, mi formulario CF7 ya se parece al formulario de DIVI.
    Pero tengo un problema con los campos desplegables y no consigo averiguar donde hay que meter tu código:

    ==========
    .wpcf7-select {
    width: 100%;
    padding: 15px;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0px;
    color:#999;
    background-color: #eee;
    font-size: 14px;
    }
    ======

    ¿Se mete en algun lufar de CF7?
    ¿Tal vez en DIVI en CSS personalizado de DIVI?.

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Juan Carlos.

      Gracias por tu comentario.

      El código CSS va en la hoja de estilos del tema hijo, style.css (si estás usando uno), o en el recuadro CSS personalizado de Divi.

      Saludos.

      Responder
  17. Nacho Martinez

    Buenos días Ana:
    En primer lugar felicitarte por la labor que estás realizando. El tutorial es impresionante…He seguido tus pasos para integrar el plugin Contact form7 en la web que estoy dearrollando en DIVI 3.0 y me ha quedado bien, excepto que al divididir la sección en 2 partes (formulario y a la derecha una foto), los campos del formulario no llegan hasta el final de la sección. El botón de enviar si que llega.
    Como estoy desarrollando en localhost, ¿puedo enviarte un pantallazo y me das tu opinón?

    Responder
    • Caribdis Diseño Web

      Hola, Nacho.

      Gracias por tu comentario. Es difícil determinar la causa; la captura no sirve porque tendría que inspeccionar el código. Fijate que no estés aplicando algún margen o relleno en algún lado (sección, columna o módulo).

      Saludos.

      Responder
    • Nacho Martinez

      La verdad es que antes de mandarte la duda estuve mirando y mirando, y al final me decidí a preguntarte. Volveré a mirarlo y, en todo caso, cuando la suba al servidor te mandaré el enlace. Aprovecho para consultarte otra duda. Estoy con otra página en la que he colocado el logo en medio del menú (es un logo más bien cuadrado, y cuando lo veo para móvil o tablet el logo sale ‘pequenísimo’. Tengo que tocar alguna función o solo el CSS para conseguir que aparezca mucho más grande?
      Muchas gracias
      Un saludo

      Responder
      • Caribdis Diseño Web

        Hola, Nacho.

        El tamaño del logo en móviles lo manejás con CSS. Por ejemplo:

        @media (max-width: 980px) {
        .et_header_style_left #logo {
            max-height: 100%;
        }
        }
        

        Saludos.

        Responder
    • Nacho Martinez

      Gracias de nuevo
      ¿Sabes si existe algún manual o web donde se pueda ver cómo construye/nombra DIVI las secciones?

      Un saludo
      Nacho

      Responder
      • Caribdis Diseño Web

        Hola, Nacho.

        Podés ver los nombres de todas las clases en la pestaña CSS personalizado de cualquier sección, fila o módulo, haciendo clic en cada campo. Para más info, podés revisar el manual Explorando Divi (capítulo Las pestañas CSS personalizado).

        Saludos.

        Responder
  18. Samuriosa

    Buenos días:

    He puesto el tutorial en funcionamiento paso por paso y me ha funcionado todo correctamente, muchísimas gracias.

    Sólo me he encontrado con un problema, y es que necesito meter un campo de aceptación (del aviso legal) y al haber modificado los estilos del campo checkbox no se visualiza el checkbox de este tipo de campo.

    ¿Podrías, por favor, ayudarme a resolver este problema? Gracias

    Responder
    • Caribdis Diseño Web

      Hola, Samuriosa.

      Fijate en esta respuesta.

      Saludos.

      Responder
    • Samuriosa

      Gracias. Efectivamente, ha funcionado. Siento las molestias

      Responder
  19. Raquel MS

    Hola Ana,
    Gracias por tu ayuda en este tutorial tan detallado.

    ¿Me puedes confirmar si este código es compatible con la versión actual de DIVI 3.0.15 y el Contact Form 7 v. 4.5.1?
    No sé si no lo he aplicado bien o si es que no es compatible…
    Gracias de nuevo, un saludo desde España.

    Raquel MS

    Responder
    • Caribdis Diseño Web

      Hola, Raquel.

      Sí son compatibles. ¿Qué sería exactamente lo que no te funciona?

      Responder
  20. Milton

    Hola Ana,

    Llevo tiempo utilizando tu guía para implementar CF7 con Divi y me va fantástico!

    Lo único es que hay algo que se me resiste. En el caso de un selector desplegable (.wpcf7-select) no tengo manera que hacer para tratar el texto como un place holder de un color y que al selecionar aparezca como los demás campos de entrada. Me explico mejor:

    Los campos de texto normales los tengo para que, cuando no hay nada escrito aún aparezcan en rojo, y que al introducir texto éste sea en negro. El problema viene en que, si hago esto, en el caso del selector ya aparece en negro directamente. Por lo que el formulario queda un poco feo porque aparecen todos los placeholders en rojo y el del select en negro directamente. Sabes si se puede hacer algo?

    Responder
    • Caribdis Diseño Web

      Hola, Milton.

      Fijate que está aclarado en la entrada: “Recordar que el campo desplegable no es un placeholder, por lo cual para cambiar el color hay que modificar el valor de color en la clase .wpcf7-select en el CSS.” La única macana es que al quedar seleccionada una opción se va a mostrar del color que le asignes a .wpcf7-select. La verdad, no sé si habrá alguna manera de cambiarle el color mediante jQuery. 😕

      Saludos.

      Responder
  21. Joan

    Hola,

    Excelente. Quiero poner campo fecha de nacimiento. ¿Es posible?
    ¿Cómo?

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Joan.

      Tendrías que usar la opción de CF7 fecha dentro de las etiquetas <p></p> como se explica en esta entrada. No hay muchas opciones de estilo, el calendario no se ve en algunos navegadores y hay que integrarlo mediante este filtro en el archivo functions.php del tema hijo:

      add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
      

      Saludos.

      Responder
      • Joan

        Muchas gracias

        Quiero insertar campo de código postal.

        Saludos

        Joan

        Responder
        • Caribdis Diseño Web

          Hola, Joan.

          El código es el mismo y tendrías que insertar el campo de CF7 número.

          Responder
          • Joan

            Hola gracias por responder. El campo número para el código postal oK.
            Pero quiero que salgan sólo las 5 posiciones. Ejemplo 08600. ¿Es posible?

            Muchas gracias

          • Caribdis Diseño Web

            En el caso del número no es posible asignar un mínimo/máximo de caracteres. Lo que podrías hacer es usar el campo teléfono, con el siguiente formato:

            [tel* cp-1 minlength:5 maxlength:5 placeholder "Código postal"]
            

            Recordá editar el mensaje de error “El número de teléfono que introdujo el usuario no es válido” para que no diga “teléfono” (podría ser algo así como “El número no es correcto”).

            Saludos.

  22. Ricardo Alfaro Jiménez

    Estimada Anita:

    Excelente guía, me sirvió muchisimo, sobre todo para “migrar” mis formularios de contacto desde la versión anterior. El único problema es que no logro hacer que el campo mensaje, quede con el mismo estilo de los demás (recuadro con bordes redondeados y fondo transparente). No sé cual es la clase a la que debo aplicar el estilo respectivo.

    Saludos desde Chile.

    Responder
    • Caribdis Diseño Web

      Hola, Ricardo.

      La clase que tenés que modificar es .wpcf7 .et_pb_contact p textarea.

      Quedaría algo así (editá los valores correspondientes):

      .wpcf7 .et_pb_contact p textarea {
          padding: 16px;
          border: 3px solid #000000;
          border-radius: 3px;
          background-color: transparent;
      }
      

      Espero que te sirva.

      Saludos.

      Responder
      • Ricardo Alfaro Jiménez

        Muchas gracias nuevamente Anita, justo unos minutos antes de que me llegara tu correo, había logrado determinar que esa era la clase correcta. Me sirvió mucho todo lo que publicaste y ahora he podido desarrollar un formulario de lujo.

        Me aprovecho de este contacto para pedirte ayuda en otro tema que me tiene muy complicado. Se trata de la forma en que aparecen las imágenes en Divi en el Fullwidth Slider, ya que no logro evitar que se “agranden” y sólo aparezca una parte de la fotografía. He probado con todos los ajustes de imágen que ofrece el componente y nada, incluso he dejado las imágenes del tamaño específico de la pantalla y nada.

        Te agradezco nuevamente y por favor continúa con este blog que es una luz para muchos que encontramos en él la solución a nuestros problemas de desarrollo Web.

        Atentos saludos.

        Responder
        • Caribdis Diseño Web

          Hola, Ricardo.

          Te había respondido sobre esto aquí. Cuando seleccionás la opción tamaño de fondo “Cubrir”, lo que hace es adaptar el ancho, pero el alto depende del relleno inferior y superior que uses en el módulo. Y si usás varias imágenes, todas tienen que tener la misma proporción, de lo contrario siempre va a haber alguna que no va a coincidir.

          Fijate si te sirve.

          Saludos.

          Responder
          • Ricardo Alfaro Jiménez

            Muchas gracias estimada Anita, te cuento que he probado de todo y no logro conseguir ajustar las imágenes como corresponde. Además al poner cualquier valor en Relleno superior e inferior, la imágen se acorta y queda de una altura pequeña fija.

            Me he leído con mucha atención la documentación de Divi y no encuentro nada que me pueda ayudar con esto.

            De todas formas te agradezco por tru ayuda.

            Saludos.

      • Ricardo Alfaro Jiménez

        Estimada Anita:

        Disculpa que te vuelva a molestar con este tema, pero la verdad es que no logro dar con la regla adecuada para resolver la alineación de los controles radio en el formulario, los que me salen corridos a la izquierda.

        Este es el css que tengo en el tema (trabajo con divi)

        .et-cart-info span {
        display: none;
        }
        /* Códigos para Contact Form 7 */
        div.wpcf7 img.ajax-loader {
        position: absolute;
        left: 0;
        }
        .wpcf7-submit:hover {
        padding: 0.3em 1em;
        }
        .wpcf7 .et_pb_contact_right p input {
        max-width: 65px;
        }
        .wpcf7-captchac {
        position: relative;
        right: 0px;
        top: 7px;
        border: 2px solid #000;
        border-color: #6F7577;
        background: #E3E3E3;
        border-radius: 7px;
        }
        @media only screen and (max-width: 329px) {
        .wpcf7 .et_contact_bottom_container.cf7_rscaptcha {
        float: none; 
        overflow: initial;
        }
        }
        div.wpcf7-validation-errors {
        clear: both;
        border: none;
        }
        div.wpcf7-mail-sent-ok {
        clear: both;
        border: none;
        }
        /* Estilo de los cuadros de texto - Con bordes redondeados y transparente */
        .wpcf7 .et_pb_contact p input {
        border: 2px solid #000;
        border-color: #6F7577;
        background-color: #E3E3E3;
        border-radius: 7px;
        }
        /* Estilo del área de texto - Con bordes redondeados y transparente */
        .wpcf7 .et_pb_contact textarea {
        border: 2px solid #000;
        border-color: #6F7577;
        background-color: #E3E3E3;
        border-radius: 7px;
        }
        /* Estilo para el Botón enviar */
        .wpcf7 .et_pb_button {
        border-radius: 7px;
        border: 2px solid #6F7577;
        background-color: #E3E3E3;
        font-family: Arial, Helvetica, Verdana;
        color: #00396F;
        }
        /* Estilo para lista de selección */
        .wpcf7-select {
        width: 100%;
        padding: 15px;
        border: 2px solid #6F7577;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 7px;
        color:#999;
        background: #E3E3E3;
        font-size: 14px;
        color: #00396F !important;
        }
        /* Estilo para textos en formularios */
        .wpcf7 ::-webkit-input-placeholder {
        opacity: 1;
        color: #00396F;
        font-family: Arial, Helvetica, Verdana;
        }
        .wpcf7 :-moz-placeholder {
        opacity: 1;
        color: #00396F;
        font-family: Arial, Helvetica, Verdana;
        }
        .wpcf7 ::-moz-placeholder {
        opacity: 1;
        color: #00396F;
        font-family: Arial, Helvetica, Verdana;
        }
        .wpcf7 :-ms-input-placeholder {
        opacity: 1;
        color: #00396F;
        font-family: Arial, Helvetica, Verdana;
        }
        .wpcf7 .boton-radio {
        opacity: 1;
        color: #00396F;
        font-family: Arial, Helvetica, Verdana;
        }
        /* Controles radio */
        .wpcf7 input[type="radio"] {
        display: none;
        }
        .wpcf7 label {
        cursor: pointer;
        }
        .wpcf7 input[type="radio"] + .wpcf7-list-item-label:before {
        border: 2px solid #6F7577;
        border-radius: 7px;
        display: inline-block;
        font: 14px/1em ETmodules;
        content:"\00a0"; 
        height: 14px/1em;
        margin: 0 .25em 0 0;
        padding: 0;
        width: 16px;
        }
        .wpcf7 input[type="radio"]:checked + .wpcf7-list-item-label:before {
        background: transparent;
        color: #999;
        content: "^";
        text-align: center;
        }
        .wpcf7 .boton-radio {
        padding: 15px;
        border: 2px solid #6F7577;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border-radius: 7px;
        color:#999;
        background: #E3E3E3;
        font-size: 14px;
        color: #00396F !important;
        height: 54px;
        text-align: left;
        margin: 0 auto;
        }
        

        Espero me puedas ayudar con esto, que me tiene superado hace rato.

        Saludos y muchas gracias de antemano.

        Responder
        • Caribdis Diseño Web

          Hola, Ricardo.

          Un gusto saludarte nuevamente. 🙂

          La verdad, no entiendo la lógica que usa ET en los márgenes del formulario, jaja. Pero como todo tiene su vuelta, lo único que tendrías que hacer es, en la clase .wpcf7 .boton-radio, borrar margin: 0 auto; y agregar margin-left: 3%; y width: 47%;. Y para que no se descalabre en los dispositivos móviles, agregá:

          @media all and (max-width: 767px) {
          .wpcf7 .boton-radio {
              width: 97% !important;
          }
          

          Con eso debería bastar.

          Saludos.

          Responder
          • Ricardo Alfaro Jiménez

            Estimada Anita:

            Lo has hecho nuevamente, eres genial, tu solución me funcionó a la perfección y hoy por fin pude sacar a producción ese formulario que me estaba molestando tanto. Te recontra agradezco por tu paciencia y buena voluntad.

            Un abrazo.

            Saludos.

          • Caribdis Diseño Web

            De nada, Ricardo. Un placer.

            Saludos.

  23. Caribdis Diseño Web

    Hola, Paco.

    Gracias por tu comentario.

    Para ajustar los estilos del botón y de los campos tenés que usar CSS. Las clases del botón son .et_pb_contact_submit y .et_pb_button y las de los campos/área de texto, .et_pb_contact p input y .et_pb_contact p textarea.

    Por ejemplo, para los campos con bordes de 2px y fondo transparente, sería:

    .et_pb_contact p input, .et_pb_contact p textarea {
        border: 2px solid #000;
        background: transparent;
    }
    

    Y para el botón, la clase .et_pb_contact_submit te sirve para cambiarle el color. Por ejemplo:

    .et_pb_contact_submit {
        color: #000;
    }
    

    Con la clase .et_pb_button manejás rellenos, color de fondo, tamaño de fuente, bordes, etc. Por ejemplo:

    .et_pb_button {
        border: 1px solid #999;
        font-size: 15px;
        background: #f00;
    }
    

    Espero que te sirva.

    Saludos.

    Responder
    • Paco

      Me sirvió todo perfecto. Mil gracias Ana.
      Solo me ocurre algo raro y es que se superponen dos botones. El texto no. Se ve el borde del botón ant… Cuando posiciono el ratón (hover) me sale el color gris sobre el color burdeos que he asig… ejem
      En la página de contacto lo puedes ver mejor (si tienes un ratito) que tratar de explicartelo.
      Y un detalle mas que no consigo. El texto dentro de los campos me gustaría que fuera blanco (mas concretamente #e2e2e2) en lugar de ese grisaceo actual.
      Por lo demás y como puedes ver y tras seguir tus indicaciones, está todo recontrarechulo, como a mi me gusta y con el resultado que tan magnificamente has expuesto en tu estupendo post y tras incorporar tus anotaciones posteriores.

      Un millón de gracias maja.

      PD: No consigo enviar archivos pero ese es otro cantar que voy a investigar mas adelante en algún post que he visto de pasada sobre ese asunto.

      Responder
      • Caribdis Diseño Web

        OK, buenísimo.

        El tema de los botones… es probable que tengas que agregarle la declaración !important al border. Y, en la respuesta anterior me olvidé de aclararlo, el código CSS conviene que apunte solo a los estilos de CF7 para que no te cambie los botones o campos de otros módulos. Esto es:

        .wpcf7 .et_pb_contact p input, .wpcf7 .et_pb_contact_submit y .wpcf7 .et_pb_button.

        En cuanto al texto de los campos, aplicale color: #e2e2e2; a .wpcf7 .et_pb_contact p input y usá los valores de los placeholder como se explica en esta entrada para que no se vean semitransparentes.

        Saludos.

        Responder
        • paco

          Genial Ana:

          No consigo resolver el asunto del boton pero creo que lo añadiré a una lista que tengo para dejar en manos del experto igual que el hecho de que aparezca el nombre del archivo cuando lo selecciono porque pienso que despista un poco que no se refleje a la derecha del boton “seleccionar archivos”.

          Aún así, mil gracias. He conseguido que mi formulario tenga el aspecto que deseaba con la posibiliad de adjuntar archivo, con tu ayuda gratuita y usando un plugin gratuito. ¿Qué mas puedo pedir?

          Ademas tus respuestas son rapidas y fiables. Un placer y un gusto.

          Responder
        • Paco

          Hola Ana:
          Ya creo que se por donde pueden ir los tiros en cuanto al asunto del botón enviar.
          Yo tengo instalado woocommerce y el botón que tu creaste y que yo intento modificar según el gusto y estética de mi página para el FC7, justo está incorporando los estilos del boton de woocommerce.
          De hecho me gustaría modificar este botón genérico del carrito de woocommerce pero lo intenté hace tiempo sin ningun exito.

          Bueno solo era eso.

          Un saludo

          Responder
  24. Paco

    Hola Ana:
    Fantástico post. He seguido al pie de la letra todos los pasos y practicamente he conseguido los resultados deseados. El botón de enviar es el problema mayor pues no se donde introducir los codigos de clase y etiqueta.
    la cuestión es que me gustaría añadir recuadros (bordes) en los campos de nombre, mail, mensaje… y despues de tres días volviendome loco he decidido pedirte ayuda.

    Un saludo
    Felicitaciones

    Responder
  25. Milton

    Hola de nuevo!

    Quería pedirte consejo para una cosa que no consigo hacer. He hecho un formulario que contine dos campos de “carga de archivo” y he añadido la clase .wpcf7-file a los ajustes css para que el campo tenga el mismo fondo, texto, etc… pero no consigo ver en el inspector cómo apuntar a la clase que controla el botón que aparece para cargar los archivos, el que pone “seleccionar archivo”. Ahora sale un botón con el fondo blanco y texto negro. Y me preguntaba si esto pertenece a CF7 o si debe pertenecer a una clase de Divi. De igual forma no logro encontrarla para poder hacer el botón con otro estilo. Te adjuntaría una captura aquí si pudiera para que vieses a qué botón me refiero. Alguna idea de como puedo encontrar dónde se controla este botón? Gracias de antemano!

    Responder
    • Caribdis Diseño Web

      Hola, Milton.

      La apariencia del botón Examinar o Seleccionar archivo depende del navegador. Te copio el código que usé para un formulario con carga de archivos.

      .wpcf7 input[type="file"] {
        display: none;
      }
      .cf7_file label {
        border: 1px solid #EF8112;
        border-radius: 3px;
        padding: 5px 10px;
        display: inline-block;
      }
      .wpcf7-file {
          background: transparent !important;
          padding: 11.5px !important;
          border: none !important;
      }
      

      El código en CF7 es:

      <p class="et_pb_contact_field et_pb_contact_field_last cf7_file"><label>Seleccione un archivo [file* file-658 limit:1mb filetypes:doc|docx|txt|rtf|pdf|odt|zip|rar]</label></p>
      

      La única contra es que al hacer un display: none; en el campo file también queda oculto el nombre del archivo una vez seleccionado (esto puede confundir al usuario). No sé si existirá algún snippet de JavaScript para mostrarlo, pero mis conocimientos de JS no llegan a tanto…

      Fijate si te sirve. Saludos.

      Responder
      • Milton

        Vaya, es genial tu solución! Además el diseño es fantástico. Lo que sí es verdad es que es una lástima que no aparezca el nombre del archivo pero es un mal menor. Gracias por la ayuda, me ha servido muchísimo. 🙂

        Responder
        • Caribdis Diseño Web

          De nada, un placer. Dándole vueltas al código del input[type="file"], probé poner en lugar de display: none; un opacity: 0; y luego ajustarle el tamaño para que coincida con el botón (label).

          El código quedó así:

          .wpcf7 input[type="file"] {
          	opacity: 0;
          	position: absolute;
          	left: -178px; /* este valor depende del tamaño del botón */
          	width: 189px; /* este valor depende del tamaño del botón */
          	height: 53px; /* este valor depende del tamaño del botón */
          	margin-top: -19px; /* este valor depende del tamaño del botón */
          	cursor: pointer;
          }
          

          De esta manera, aunque no se muestra en pantalla el nombre del archivo, se ve una etiqueta al posar el puntero: Ningún archivo seleccionado como inicial, y el nombre-del-archivo.nnn una vez seleccionado. No es la solución ideal, pero es un poco mejor que la anterior.

          Responder
          • Milton

            Pues si, aún mejor!

            Muchas gracias por compartirlo! 🙂

  26. zeng

    Muchas gracias por tu excelente aportación.

    Después de aplicar tus pasos me encuentro con un problema. Necesito hacer un botón desplegable y con select* debería hacerse obligatorio al ponerle asterisco pero a mi no mefunciona.

    Veo aquí en la demo que el desplegable obligatorio sí funciona:
    http://contactform7.com/checkboxes-radio-buttons-and-menus/

    ¿A alguien más le pasa que en Divi no le funciona?

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Zeng.

      Lo que te debe estar sucediendo es que te falta agregar la primera opción en blanco (la etiqueta include_blank de CF7).

      Tendrías que agregar lo siguiente:

      [select* op-3 include_blank "Opción 1" "Opción 2" "Opción 3"]
      

      Espero que te sirva.

      Saludos.

      Responder
      • Zeng

        Excelente! Funcionó. Muchas gracias!

        Una última cuestión que me lleva loco desde hace días y no consigo solucionar. Uso un pie como elemento global y quiero duplicarlo para usarlo en un segundo idioma que tengo en la web.

        El problema es que si lo copio y voy a Divi > Biblioteca de Divi y creo un elemento nuevo, le pego el pie (en memoria) y lo traduzco al otro idioma resulta que me cambia también el original, a pesar de que tienen diferente nombre en la biblioteca. Tampoco encuentro la manera de quitarle el ser global al original para poder modificar la copia sin que afecte al primero ¿sabes como solucionarlo?

        Muchas gracias de nuevo.

        Saludos

        Responder
        • Caribdis Diseño Web

          He usado poco y nada los elementos globales de la Biblioteca, así es que no estoy muy segura de cuál es la solución… Si guardaste como global la fila o sección y sincronizaste las tres pestañas, fijate si te permite desmarcar la opción Incluir ajustes generales en el módulo global correspondiente al pie. Ahora bien, si creaste el módulo global de cero, desde la Biblioteca, no es posible quitarle la propiedad de global. No te quedará otra que duplicarlo a mano :(.

          Responder
          • Zeng

            He probado y no hay manera de desactivar tampoco las pestañas, gracias igualmente. A ver si añaden esta característica para ahorrar todavía más tiempo.

            Muchas gracias por todo.

          • Zeng

            Hola guapa. Acabo de descubrir la solución. Creas una fila nueva y puedes arrastrar elementos de un bloque global al que acabas de crear y dejan de ser globales. Pasan de ser verdes a grises. Perfecto!

            Saludos y gracias!

          • Caribdis Diseño Web

            ¡Excelente! Gracias por compartir la solución 😀

  27. David

    Excelente. Muchas gracias, me ha servido muchísimo.

    ¿Podrías explicar como personalizar los botones “radio”? Los de elegir sólo una opción entre varias.

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, David.

      Gracias por tu comentario.

      Para los botones radio es muy similar a los checkbox:

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

      El código de CF7 sería [radio radio-1 use_label_element "Opción 1" "Opción 2" "Opción 3"] o bien [radio radio-1 use_label_element default:1 "Opción 1" "Opción 2" "Opción 3"] para el primer botón seleccionado de manera predeterminada.

      Espero que te sirva.

      Saludos.

      Responder
      • David

        Felicidades. Gracias por tu explicación. Funciona a la perfección.
        Recibe un cordial saludo y sigue adelante con el blog!

        Responder
  28. Dany Colombus

    Excelente recurso como siempre!

    Pregunta de novato ¿qué diferencia hay entre el Divi Builder y el Divi Theme? ¿Cuál es el que hay que instalar sobre el WordPress?

    Responder
    • Caribdis Diseño Web

      Hola, Dany.

      Gracias por dejar tu comentario. En cuanto a tu duda, es simple: uno es un plugin y el otro es un tema. La diferencia es que si instalás solo el plugin, podés usarlo con cualquier otro tema (aunque no siempre se integra de manera óptima), y si instalás el tema, tenés todas las características del plugin más los ajustes propios de Divi. La razón de ser del plugin está más bien relacionada con el hecho de no perder el aspecto de las páginas creadas con el constructor de Divi, en caso de decidir cambiar de tema. Yo sugiero instalar el tema, ya que está garantizado que todos los módulos (en especial los de ancho completo) van a funcionar como corresponde.

      Espero que te sirva.

      Saludos. 🙂

      Responder
  29. S

    Excelente guía paso a paso, todo perfectamente explicado. Enhorabuena y gracias!

    Responder
    • Caribdis Diseño Web

      De nada, me alegro de que te haya servido. Saludos 🙂

      Responder
  30. Milton

    Fantástica actualización del tutorial Contact Form 7 y Divi que ya hiciste. Muchas gracias por actualizarlo tan rápido y por el gran aporte que realizas. Es de gran ayuda!

    Saludos,

    Responder

Responder a Joan 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!