¡Zelle Lite (ex Zerif) ya no se actualiza! Ahora están...

Tema Hestia Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Tema Hestia Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

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 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, 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).

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

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

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

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.

Caribdis.Net

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una Vizsla loca.
Caribdis.Net

Últimas entradas por Caribdis.Net (ver todas)