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 abundan, pero entre los gratuitos el más famoso, completo y flexible es Contact Form 7.

Así como aprendimos a adaptarlo a Divi, tanto a las últimas versiones como a las anteriores, en esta oportunidad vamos a ajustarlo para su uso en Zerif Lite.

Hoy en día Zerif Lite recomienda la instalación del plugin Pirate Forms, que fuera desarrollado por ThemeIsle especialmente para ser integrado en sus temas.

Si bien en las últimas actualizaciones lo ampliaron un poco (ahora permite el envío de archivos adjuntos), todavía no cubre las necesidades de campos tales como desplegables o casillas de selección.

Hagamos una vista rápida a lo que ofrece Pirate Forms:

Pirate Forms - Opciones

Aquí podemos configurar un mensaje que se enviará al correo electrónico del remitente informándole que los datos ingresados en el formulario fueron enviados con éxito, además de la posibilidad de elegir una página de redireccionamiento (de lo contrario, aparecerá el mensaje de envío exitoso en la misma página de inicio).

Pirate Forms - Campos

Aquí podemos seleccionar los campos que queremos mostrar y asignar la obligatoriedad, además de poder elegir si se muestra o no el reCAPTCHA (requiere clave API de Google) y si se incluye o no el campo para envío de archivos adjuntos.

Pirate Forms - Etiquetas

Aquí podemos editar las etiquetas de los campos, como por ejemplo, reemplazar Asunto por Teléfono.

Otras opciones como Mensajes de alerta y SMTP son útiles si queremos editar los mensajes que aparecen al dejar algún campo obligatorio vacío, o configurar el envío mediante SMTP cuando no está disponible la función mail en el servidor.

Hasta aquí lo que podemos lograr con el plugin Pirate Forms, que será suficiente para muchos usuarios:

Formulario de Pirate Forms

Para aquellos que necesiten 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, y dejaremos a mano el código predeterminado [contact-form-7 id="#" title="Formulario de contacto 1"] (# es un número generado por el plugin).

Desactivaremos el plugin Pirate Forms si estaba activado.

Crearemos un tema hijo de Zerif (si no lo tenemos ya creado). Las instrucciones están en esta entrada.

Copiaremos el archivo front-page.php de la carpeta del tema padre a la del tema hijo y con un editor de texto buscaremos el bloque de código que se encuentra entre <!-- CONTACT FORM--> y <!-- / END CONTACT FORM-->

Reemplazaremos todo ese código que está entre las etiquetas <div class="row"></div> por el código abreviado del plugin en un do_shortcode. Debería quedar más o menos así:

<!-- CONTACT FORM-->
    <div class="row">
    <?php echo do_shortcode( '[contact-form-7 id="186" title="Formulario de contacto 1"]' ); ?>
    </div>
<!-- / END CONTACT FORM-->

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

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

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

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 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

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

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

Mensajes de error con el estilo de Zerif

Mensaje de envío exitoso con el estilo de Zerif

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

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

reCAPTCHA

El código para incluir el reCAPTCHA de Google 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 en la sección Contacto > Integración.

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

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;
}
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

Últimas entradas por Caribdis Diseño Web (ver todas)