---
title: "Divi 2.6 con Contact Form 7"
url: https://caribdis.net/2016/01/31/divi-2-6-con-contact-form-7/
date: 2016-01-31
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Consejos"
  - "Divi"
tags:
  - "Divi"
  - "Divi + Contact Form 7"
  - "Elegant Themes"
  - "español"
  - "tutorial"
image: https://caribdis.net/wp-content/uploads/2016/01/Divi26-CF7.png
word_count: 1489
---

# Divi 2.6 con Contact Form 7

En [esta entrada](https://caribdis.net/2015/07/20/divi-con-contact-form-7-o-como-agregar-campos-al-formulario/), que se ha convertido en una de las más solicitadas del blog, aprendimos cómo integrar el plugin **[Contact Form 7](https://wordpress.org/plugins/contact-form-7/)** a [**Divi**](https://caribdis.link/Divi) para tener la posibilidad de agregar campos que no estaban disponibles en el módulo nativo del tema de cabecera de [Elegant Themes](https://caribdis.link/ET).

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.6](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-1-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-1.png)El botón queda con algo de margen innecesario a la derecha, que se debe al icono de carga (![ajax-loader](//caribdis.net/wp-content/uploads/2016/01/ajax-loader.gif)) 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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-2-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-2.png)

Recordemos que para evitar esto:

[![Botón "Enviar" de CF7](//caribdis.net/wp-content/uploads/2015/07/cf7-15.png)](https://caribdis.net/wp-content/uploads/2015/07/cf7-15.png)Tenemos que agregar el siguiente código:
.wpcf7-submit:hover {
    padding: 0.3em 1em;
}
[![Botón "Enviar" en CF7 con estilo](//caribdis.net/wp-content/uploads/2015/07/cf7-16.png)](https://caribdis.net/wp-content/uploads/2015/07/cf7-16.png)Bien. 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**](https://wordpress.org/plugins/really-simple-captcha/) y lo reemplazó por [**reCAPTCHA de Google**](https://www.google.com/recaptcha), 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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-3-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-3.png)

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 - Final](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-4-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-4.png)La clase `.cf7_rscaptcha` la agregamos para evitar esto en los teléfonos móviles,

[![Contact Form 7 en Divi](//caribdis.net/wp-content/uploads/2015/07/cf7-7.png)](https://caribdis.net/wp-content/uploads/2015/07/cf7-7.png)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 error](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-5-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-5.png)Para 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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-6-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-6.png)
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>
<div>
<p>[text* your-name placeholder "Nombre"]</p>
<p>[email* your-email placeholder "Correo electrónico"]</p>
<p>[tel tel-1 placeholder "Teléfono"]</p>
<p>[select menu-2 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>
<p>[textarea your-message placeholder "Mensaje"]</p>
</div>
</div>
<div>
<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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-7-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-7.png)¿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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-8-1024x600.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-8.png)

## 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 estilos](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-9-1024x750.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-9.png)Esto 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ándar](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-10-1024x630.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-10.png)Pero 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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-11-1024x630.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-11.png)

## 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](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-12-1024x630.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-12.png)

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 predeterminados](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-13-1024x630.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-13.png)Aplicamos 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 estilos](//caribdis.net/wp-content/uploads/2016/01/cf7divi26-14-1024x630.png)](https://caribdis.net/wp-content/uploads/2016/01/cf7divi26-14.png)Una 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](//caribdis.net/wp-content/uploads/2015/07/cf7-form.png)](https://caribdis.net/wp-content/uploads/2015/07/cf7-form.png)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](//caribdis.net/wp-content/uploads/2016/01/cf7-plantilla-correo.png)

## Algunos ejemplos en funcionamiento

- [Ejemplo 1](https://www.gpyc.com.ar/capital-humano/)
- [Ejemplo 2](http://www.labicicletanaranja.com.ar/reservas/)