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

Para Divi 2.6 y superiores, leer el tutorial aquí

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

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

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

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

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

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

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

Contact Form 7 - Formulario genérico

Así luce el formulario de CF7 “en crudo”

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

Así luce el formulario de Divi

Así luce el formulario de Divi

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

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

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

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

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

Deberá ser:

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

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

Contact Form 7 - Aplicando etiquetas de Divi

Aplicamos las etiquetas de Divi al formulario CF7

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

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

El resultado es el siguiente:

Contact Form 7 - Aplicando estilos de Divi

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

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

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

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

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

Contact Form 7 a la Divi

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

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

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

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

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

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

Vamos a ver cómo queda:

Contact Form 7 con Really Simple Captcha

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

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

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

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

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

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

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

Contact Form 7 en Divi

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

añadimos lo siguiente:

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

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

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

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

Nos da esto:

Aplicar estilos al menú desplegable

Aplicar estilos al menú desplegable

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

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

Contact Form 7 en Divi con menú desplegable

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

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

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

Divi con Contact Form 7

El resultado final

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

Contact Form 7 - Mensajes de error

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

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

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

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

Contact Form 7 - Mensajes de error (advertencia suprimida)

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

Contact Form 7 - Mensaje enviado

Lo corregimos con el siguiente código:

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

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

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

Para tener en cuenta:

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

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

Edición para Divi 2.5.4 y superiores

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

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

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

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

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

Finalmente obtendremos esto:

Botón "Enviar" en CF7 con estilo

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