---
title: "Zerif Lite con Contact Form 7"
url: https://caribdis.net/2016/09/04/zerif-lite-con-contact-form-7/
date: 2016-09-04
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Es sabido que los temas –tanto gratuitos como premium– que traen un formulario de contacto integrado, muchas veces se quedan cortos en funcionalidad, ya que nada más ofrecen los campos..."
categories:
  - "Zerif Lite"
tags:
  - "gratuito"
  - "plugin"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
  - "Zerif + Contact Form 7"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2016/09/zerif-contact-form-7.jpg
word_count: 888
---

# Zerif Lite con Contact Form 7

Es sabido que los temas –tanto gratuitos como premium– que traen un formulario de contacto integrado, muchas veces se quedan cortos en funcionalidad, ya que nada más ofrecen los campos básicos *Nombre*, *Correo electrónico* y *Mensaje*.

Si se da el caso de que necesitamos incluir campos un poco más avanzados, el formulario del tema ya no nos sirve. Y aquí es donde entran en juego los plugins.

Plugins de [formularios de contacto](https://wordpress.org/plugins/search.php?q=contact+form) abundan, pero entre los gratuitos el más famoso, completo y flexible es [**Contact Form 7**](https://wordpress.org/plugins/contact-form-7/).

Así como aprendimos a adaptarlo a [**Divi**](https://caribdis.link/Divi), tanto a las [últimas versiones](https://caribdis.net/2016/01/31/divi-2-6-con-contact-form-7/) como a las [anteriores](https://caribdis.net/2015/07/20/divi-con-contact-form-7-o-como-agregar-campos-al-formulario/), en esta oportunidad vamos a ajustarlo para su uso en **Zerif Lite**.

Hoy en día **Zerif Lite** recomienda la instalación del plugin **WPForms**, que es bastante completo en cuanto a opciones de campos, aunque carece en su versión gratuita de algunos importantes tales como subida de archivos y fecha.

Para aquellos que necesiten estos y otros campos avanzados, siempre está **Contact Form 7**.

Obviaremos los pasos iniciales de descarga, instalación y activación del plugin, que ya se han detallado [en esta entrada](https://caribdis.net/2015/07/20/divi-con-contact-form-7-o-como-agregar-campos-al-formulario/), y dejaremos a mano el código predeterminado `[contact-form-7 title="Formulario de contacto 1"]` (`#` es un número generado por el plugin).

En versiones recientes de **Zerif Lite** se ha simplificado enormemente la inclusión del *shortcode* de cualquier plugin de formularios, por lo cual ya no es necesario crear un tema hijo, ni añadir códigos complicados.

Tan solo vamos a *Personalizar > Secciones de la página de inicio > Sección "Contáctenos"* y en el campo Código corto del formulario de contacto pegamos el *shortcode* de **Contact Form 7**.

![Zerif - Shortcode de Contact Form 7](https://caribdis.net/wp-content/uploads/2016/09/zerif-contact-shortcode.png)

Por supuesto que todavía no hemos logrado nada, ya que veremos nuestro formulario “en crudo” y sin estilos. (Recordar que el número de `id` será el que genere el plugin).

![Contact Form 7 predeterminado](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-01.jpg)

Tendremos que envolver las etiquetas de **CF7** en los contenedores de **Zerif**.
<div class="col-lg-4 col-sm-4">
<p>Nombre (requerido)<br />
    [text* your-name] </p>
</div>
<div class="col-lg-4 col-sm-4">
<p>Correo electrónico (requerido)<br />
    [email* your-email] </p>
</div>
<div class="col-lg-4 col-sm-4">
<p>Asunto<br />
    [text your-subject] </p>
</div>
<div class="col-lg-12 col-sm-12">
<p>Mensaje<br />
    [textarea your-message] </p>
</div>
<p>[submit "Enviar"]</p>
Veremos que nos estamos acercando a la estructura, pero aún faltan los estilos.

![Contact Form 7 en Zerif sin estilos](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-02.jpg)

Ahora necesitamos mover los títulos dentro de los campos y aplicarles el estilo de **Zerif**. Para los títulos, eliminamos la primera línea y las etiquetas `<p></p>`, pasamos los rótulos dentro de los códigos abreviados, entre comillas, y les anteponemos la etiqueta `placeholder`. Además, incluiremos en cada uno las clases `input-box` y `form-control` precedidas de la etiqueta `class:` sin espacio (en el campo *Mensaje* solo es necesaria la clase `form-control`). El código quedaría así:
<div class="col-lg-4 col-sm-4">
   [text* your-name class:input-box class:form-control placeholder "Nombre"]
</div>
<div class="col-lg-4 col-sm-4">
   [email* your-email class:input-box class:form-control placeholder "Correo electrónico"]
</div>
<div class="col-lg-4 col-sm-4">
   [text your-subject class:input-box class:form-control placeholder "Asunto"]
</div>
<div class="col-lg-12 col-sm-12">
   [textarea your-message class:form-control placeholder "Mensaje"]
</div>
<p>[submit "Enviar"]</p>
El resultado:

![Contact Form 7 en Zerif con estilos](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-03.jpg)

Nos quedaría alinear el botón a la derecha. Aquí será necesario crear una clase especial, ya que el formulario de **Zerif** usa la etiqueta `button` y **CF7** la etiqueta `input`.

Reemplazaremos las etiquetas `p` por `div` y le pondremos una clase al `div`, por ejemplo `zerif_send` (puede ser cualquier nombre, siempre y cuando se use el mismo en la hoja de estilos).
<div class="zerif_send">[submit "Enviar"]</div>
Luego, en el archivo `custom.css` del tema hijo incluiremos el siguiente código:
div.wpcf7 textarea {
    padding: 9px 0 9px 15px;
    min-height: 250px;
} 
div.wpcf7 .ajax-loader {
/* para versiones anteriores a 4.6 de CF7 la clase es div.wpcf7 img.ajax-loader */
    position: absolute;
}
@media (min-width: 768px) {
.zerif_send {
    float: right;
    margin-right: -15px;
}
div.wpcf7 img.ajax-loader {
    position: relative;
}
}
Con esto tendremos una réplica exacta del formulario de **Zerif**:

![Contact Form 7 en Zerif](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-04.jpg)

Pero antes de continuar, tendremos que corregir los mensajes de error y de envío exitoso para que no ocurra esto:

![Mensajes de error en Contact Form 7](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-05.jpg)

Vamos al archivo `custom.css` y pegamos el siguiente código:
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ng  {
    color: #fff;
    background: #E96656;
}
div.wpcf7-response-output {
    margin: 0 15%;
    padding: .5em;
    clear: both;
    border-radius: 4px;
    border: none;
    background: #E96656;
    color: #fff;
}
span.wpcf7-not-valid-tip {
    color: #E96656;
    margin-top: -20px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 1px #333;
}
div.wpcf7-mail-sent-ok {
    color: #fff;
    background: #1E9E6B;
}
De esta manera tendremos los avisos más acordes con el diseño de **Zerif**:

![Mensajes de error con el estilo de Zerif](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-06.jpg)Mensajes de error con el estilo de **Zerif**

![Mensaje de envío exitoso con el estilo de Zerif](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-07.jpg)Mensaje de envío exitoso con el estilo de **Zerif**

Bien, hasta aquí **CF7** no hace nada distinto de lo que hace **Pirate Forms**. Pero el ejemplo sirve para comprender la estructura y reconocer las clases que se deben usar para reproducir el mismo estilo.

Vamos ahora a aprender a agregar campos. Reemplazaremos el campo de texto *Asunto* por un menú desplegable. El código de **CF7** deberá ser, por ejemplo:
[select* your-subject class:input-box class:form-control first_as_label "Asunto" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]
Eso es todo:

![Contact Form 7 con menú desplegable](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-08.jpg)

### Casillas de selección y botones de radio

En este caso, tendremos que envolver el código de **CF7** en una etiqueta `<p>` solo con la clase `input-box`. Para un campo en ancho completo no olvidar incluir el `div` con las clases `col-lg-12 col-sm-12`:
<div class="col-lg-12 col-sm-12">
   <p class="input-box">Seleccione una opción [checkbox checkbox-138 use_label_element "Opción 1" "Opción 2" "Opción 3"]</p>
</div>
![Contact Form 7 - Casillas de selección](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-09.jpg)

### reCAPTCHA

El código para incluir el **reCAPTCHA** de Google en la versión 5.05 e inferiores de **Contact Form 7**  es el siguiente:
<div class="col-xs-12 col-sm-6 col-lg-6 zerif_captcha">
   [recaptcha]
</div>
Recordemos que para que funcione es necesario incluir la clave del sitio y clave secreta de [reCAPTCHA](https://www.google.com/recaptcha/intro/index.html) en la sección *Contacto > Integración*. En versiones 5.1 y superiores, el código `[recaptcha]` no es necesario, pero sí las claves.

Aquí hemos incluido una clase adicional, `zerif_captcha` para poder ajustar el mensaje de error, con el siguiente código en el archivo `custom.css`:
.zerif_captcha span.wpcf7-not-valid-tip {
    margin-top: 0px;
    margin-bottom: 15px;
}
@media (min-width: 768px) {
.zerif_captcha {
    text-align: left;
}
}
![Contact Form 7 - reCAPTCHA](//caribdis.net/wp-content/uploads/2016/09/zerif-cf7-10.jpg)

Por último, para reproducir el efecto del botón *Enviar* al pasar el puntero, añadiremos el siguiente código en `custom.css`:
.wpcf7 input[type="submit"] {
    transition: 0.3s ease-in-out;
}
.wpcf7 input[type="submit"]:hover {
    background: #cb4332;
}
input.focus, input[type="submit"]:focus {
    border: none;
}

### Zerif Pro con Contact Form 7

El procedimiento será exactamente el mismo que se detalló en esta entrada.