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("http://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

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web