Zerif Lite con Contact Form 7

41 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

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

Más opciones en Hestia Pro

Neve

Neve

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

Más opciones en Neve Pro

Zerif + Contact Form 7

Por: Caribdis.Net

Publicada: 4 de septiembre de 2016

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.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

41 Comentarios

  1. Fernando Alonso Jaén

    Hola Ana,

    Gracias por tu artículo!
    Verás, tengo un problema con Zerif Lite. Cuando activas el recaptcha y el usuario lo falla, te devuelve al principio de la página. Aparece un error justo arriba del formulario de contacto, pero el usuario seguramente no lo verá porque está demasiado lejos. ¿Cómo podría arreglarse eso? Gracias!

    Fernando

    • Caribdis Diseño Web

      Hola, Fernando.

      Aparentemente es un bug del tema. Tendrías que plantearlo en el foro de soporte.

      Saludos.

      • Fernando Alonso Jaén

        Acabo de hacerlo. Gracias, Ana!

  2. Jonathan

    Hola Ana

    Aunque no tengo instalado el plugin Pirate Forms. No logro ver el formulario del contact 7. ya he copiado el content-fronpage al tema hijo y sigo sin resolver ese inconveniente alguna idea de que puede ser.

    Saludos

    • Caribdis Diseño Web

      Hola, Jonathan.

      ¿Tenés la URL a mano para poder verlo?

      Saludos.

      • Jonathan

        gracias por responder esta la url audioelectronic.com.ve el formulario esta abajo de la pagina y tengo desactivado el pirate y el contact 7 activo

        • Caribdis Diseño Web

          Hola, Jonathan.

          Fijate que hay una versión más actualizada de Zerius (aunque aclaran que no van a seguir dando soporte); es probable que eso influya. También actualizá Zerif. Si modificaste archivos de Zerius, recordá hacer backup, pero lo más probable es que tengas que volver a editarlos.

          Probé CF7 en las últimas versiones y sí funciona.

          Saludos.

          • Jonathan

            actualmente tengo actualizado el tema a la Versión: 1.8.5.32

  3. alexander perez

    MUCHISIMAS GRACIAS me has ayudado muchísimo en mi proyecto de servicio comunitario para graduarme de ingeniero informático eres un sol saludos desde Venezuela sigue asi agradecido eternamente

    • Caribdis Diseño Web

      Hola, Alexander.

      Muchas gracias por tu mensaje. 🙂

      Saludos.

  4. Miranda

    Holaaaa!!
    Gracias por el tutorial, para mi página web funciona bien el formulario de Pirate pero no logro configurarlo, envío mensaje de prueba y me llega la confirmación de que fue enviado con éxito pero nunca llega al correo destino.

    Espero que puedas ayudarmee!!
    Mil mil gracias!!

    Saludos,
    Miranda.

  5. Hector Garrido Díaz

    Hola, me gustaría saber como has puesto la sección de contacto en una página con el fondo y todo. A mi me sale al final de la portada y no sé como ponerla como la tienes tú.

    • Caribdis Diseño Web

      Hola, Héctor.

      La sección de Contacto es fija, siempre va arriba del área de widgets/pie de página. Si seguís los pasos de este tutorial, el formulario debería aparecer en reemplazo del predeterminado.

      Saludos.

  6. Andres

    Hola me gustaria que me ayudaras en lo siguiente: Necesito colocar el contact form 7 en una pagina, pero cuando lo hago con el shortcode los campos no se muestran a lo ancho de la pagina, aunque el borde del formulario si toma el ancho de la pagina, instalé el personalizador de contact form 7 y lo único que me funciona a lo ancho es el botón de enviar.
    Me gustaria saber como hacer que los campos se ajusten a lo ancho del formulario… y también me gustaria que el formulario ocupara la mitad de la pagina para agregar una segunda columna y colocar texto al frente de este…
    Ojaá me puedas ayudar, muchas gracias.

    • Caribdis Diseño Web

      Hola, Andrés.

      Para lograr lo que mencionás, lo más conveniente es usar un constructor de páginas: Elementor, SiteOrigin, Beaver, etc.

      Y para los campos con un ancho completo podés usar el siguiente código:

      .wpcf7 input[type="text"], .wpcf7 input[type="email"] {
          width: 100%;
      }
      

      Saludos.

  7. sebastian arboleda naranjo

    Hola, muchas gracias por tus tutoriales me han sido de gran ayuda, pero aun me queda una pequeña duda, si me pudieran ayudar se los agradecería:

    Estoy intentado que el botón de ACEPTACIÓN en la sola de contacto, me envíe una notificación al correo tal cual y como pasa con la de teléfono, nombre y correo, ya que requiero el soporte de que la persona dio aceptación marcando la casilla, ya que es de “autorización de uso de tratamiento de datos personales”, la pregunta es ¿como hago para que me llegue algo parecido con el correo?. Gracias de antemano y asi tengo la linea en este momento: [acceptance acceptance-796] <a href="http://soytuabogadoonline.com/aviso-de-autorizacion-de-tratamiento-de-datos-personales/">Acepto tratamiento de datos personales.</a>

    • Caribdis Diseño Web

      Hola, Sebastián.

      Gracias por tu comentario.

      Podés agregar el código al cuerpo del mensaje (el [acceptance-796]), pero solo imprimirá como resultado un 1.

      Como alternativa, podrías usar una casilla de verificación obligatoria en su lugar, y ocultar la etiqueta con CSS para no repetir el texto. El código sería algo así:

      [checkbox* checkbox-1 use_label_element "Acepto tratamiento de datos personales"] <a href="http://url/aviso-de-autorizacion-de-tratamiento-de-datos-personales/">Acepto tratamiento de datos personales.</a>
      

      Y el CSS:

      .checkbox-1 .wpcf7-list-item-label {
          display: none;
      }
      

      Saludos.

      • sebastian arboleda naranjo

        Muchas gracias me sirvió de gran ayuda tu consejo y código. Por ahora lo deje sin que fuese “obligatorio” ya que al ponerlo así el punto queda como metido en el mensaje de “El campo es obligatorio” y es imposible marcarlo y pues no se muy bien donde o como lo podría mover. Muchas gracias por tu tiempo.

  8. Antonio

    Hola, por favor podrías ayudarme? cuando quiero editar mi pagina web me sale el siguiente error “Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 786432 bytes) in /home/escuelainka16/public_html/wp-content/plugins/contact-form-builder/frontend/views/CFMViewForm_maker.php on line 872”

    • Caribdis Diseño Web

      Hola, Antonio.

      Parece un error ocasionado por el plugin Contact Form Builder. Eliminá la carpeta del servidor.

      Saludos.

  9. paulo vargas

    hola por que cuando intento enlazar en #contact ya no se me redirige al contacto e inclusive no tengo el titulo contactanos lo intento colocar pero

    h2 class=”white-text”>Contacto pero se me pega mucho al formulario
    alguna idea?

    • Caribdis Diseño Web

      Hola, Paulo.

      Por error había pegado el código en un lugar que no correspondía. 😳

      Seguí por favor las nuevas instrucciones, y deberías poder acceder al Título y Subtítulo de la sección Contáctenos en el personalizador, además de poder enlazar correctamente con el anclaje #contact.

      Saludos y gracias por hacerme notar el error.

  10. Silvia

    Hola y enhorabuena por tu tutorial. Es fantástico !!! Queria preguntarte ya que no logro que me que quede bien. Me gustaria incluir una aceptación de las politicas de privacidad. Con este codigo, pero por mas pruebas que he hecho no consigo que me quede como por ejemplo la posicion del captcha

    [acceptance acceptance-23] <a href="http://web.net/?page_id=12">Acepto la Política de privacidad.</a>

    muchisimas gracias !!!

    • Caribdis Diseño Web

      Hola, Silvia.

      Gracias por tu comentario.

      El código está bien y si lo colocás en un div similar al del reCaptcha debería verse correctamente.

      En todo caso, enviame la URL para revisarlo.

      Saludos.

  11. Natalia Martorelli

    Hola! Muchas gracias por tu post!. Estoy justamente trabajando con este tema y necesitaba cambiar el formulario original. Estoy trabada en la parte de “Tendremos que envolver las etiquetas de CF7 en los contenedores de Zerif.” evidentemente estoy poniendo mal los divs y no me doy cuenta. Podrías decirme si debería pegar las clases ”
    [text* your-name class:input-box class:form-control placeholder “Nombre”]
    …”
    en el mismo front-page.php o en otro documento?

    Mucgas gracias!

    • Caribdis Diseño Web

      Hola, Natalia.

      Los campos del formulario los editás desde Contacto > Formularios de contacto, dentro de la pestaña Formulario. Podés ver el ejemplo en esta entrada (al final de todo).

      Saludos.

  12. RAM

    Hola Ana, buenos días. Para mi son suficientes las opciones que ofrece al usuario el formulario integrado pero el problema es que no recibo los correos que se envían desde ese formulario. Contacte con el servidor para ver si había algún problema de configuración y esto es lo que me respondieron:

    “Estimado, debe editar las cabeceras de su formulario, la configuración debe ser de la siguiente manera:
    misitio.com
    From:
    Reply-To:
    Return-Path:

    pero no se desde donde editar esto ya que el personalizador del formulario integrado solo me da la opción para poner 1 correo electrónico y nada más…. Quedo a la espera, gracias Ana.

    • Caribdis Diseño Web

      Hola, Ram.

      WordPress tiene una función nativa para el envío de los correos. Si tu servidor no tiene la función de PHP mail, que es la que usa WP, tenés que configurar el envío por SMTP, marcando Yes en ¿Usar SMTP para enviar los mensajes? de Ajustes > Pirate Forms > SMTP y configurando los datos correspondientes (servidor, puerto, etc.).

      Saludos.

  13. lengriv

    buenas noches espero estes muy bien. quería hacerte una pregunta.
    resulta que estoy manejando un template hijo de zerif, estoy manejando el formulario de contacto que trae por defecto (pirate form) de este tema, y me funciona muy bien, pero tengo un pequeño problema, cuando envío la información, la pagina recarga, al hacerlo aparece en el encabezado o en el big title, como puedo hago para que al recargar no aparezca allí si no en la misma sección de contacto…. muchas gracias por tu atención…

    • Caribdis Diseño Web

      Hola, Lengriv.

      El comportamiento predeterminado es que quede visible el formulario con un mensaje de envío exitoso arriba. Fijate que estés usando las últimas versiones, tanto de Zerif como del plugin.

      Saludos.

  14. cesar santana

    Buenas de nuevo, ReCaptha, pide :
    Pegue este fragmento antes de la etiqueta de cierre en su plantilla HTML:

    en que parte de Zerif hijo la pongo

    Gracias y nuevamente felicidades por esta gran ayuda

    esta es mi web, por si quieres echarle un vistazo…www.cobaslimpiezaviaria.org

    • cesar santana

      disculpa no salio esta linea

    • Caribdis Diseño Web

      Hola, César.

      Para usar reCaptcha con CF7 nada más tenés que incluir la etiqueta [recaptcha] en el código del formulario. Y para que funcione, tenés que pegar la clave del sitio y la clave secreta que generaste en la página de reCaptcha en Contacto > Integración > Configurar claves.

      Saludos.

  15. Johana

    Buenas noches, necesito programar el botón submit con un sistema de conteo de votos y que los guarde en la base de datos.
    Que debo hacer.
    Gracias

    • Caribdis Diseño Web

      Hola, Johana.

      Para guardar entradas del formulario en la base de datos podés usar este plugin. Pero si necesitás algo específico buscá un plugin para encuestas/votaciones.

      Saludos.

  16. Araceli Correa

    Hola, llevo siguiento tu blog, y la verdad solo con leer las respuestas que das he resolvido un monton de cosas, pero por mas que intento no he podido cambiar el color del boton de submit now, y los mensajes de error de contact form 7, he visto en el style css original del tema y encontre esto:
    /*—————————————-
    ** Contact us —–
    —————————————–*/
    .contact-us {
    background: rgba(0, 0, 0, 0.5);
    padding-bottom: 95px;
    }
    .contact-us .section-header .section-legend {
    color: #FFF;
    }
    .contact-us .input-box,textarea {
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 4px;
    }
    .contact-us textarea {
    border: 1px solid transparent;
    }
    .contact-us .custom-button {
    float: right;
    margin-right: 15px;
    }
    .zerif-g-recaptcha {
    margin-left: 15px;
    display: none;
    }
    .contact-us .notification p {
    border-radius: 3px;
    color: #FFF;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    }
    .contact-us .error p {
    background: #E96656;
    }
    .contact-us .success p {
    background: #34d293;
    }
    .contact_submit_wrap {
    float: right;
    }
    pero lo probe y no funciona, claro que cambie los colores y todo, si me pudieras ayudar te lo agradeceria mucho, Muchas Gracias y saludos desde Chile 🙂

    • Caribdis Diseño Web

      Hola, Araceli.

      El código que está en la hoja de estilos original aplica únicamente al formulario integrado. Si estás usando CF7 tenés que editar los estilos de CF7 que pegaste (en el tema hijo o en el CSS personalizado). Para cambiar el color del botón sería:

      .wpcf7 input[type="submit"] {
          background: #000000;
      }

      Y los fondos de los mensajes de error o envío exitoso los editás en los respectivos valores de background del código de CF7.

      Saludos.

  17. Alejandro

    tambien te cometo, que al tirar un error por los campos el boton enviar se mueve hacia la derecha y esto no pasaba anteriormente, hay alguna manera de arreglarlo?

    Muchas Gracias.

    • Caribdis Diseño Web

      Te faltan algunos códigos CSS para eso (específicamente los de la clase zerif_send y del icono de carga, img.ajax-loader).

  18. Alejandro

    Esta muy bueno el instructivo, el unico problema que tengo es que contact forms 7 esta en ingeles, saber como pasarlo a español?.

    los mensajes de ERROR que tira cuando no estan los campos completos del formulario estan en ingles. sabes como pasarlos a español?.

    sino pense en traducirlos o modificarlos a mano.

    • Caribdis Diseño Web

      Hola, Alejandro.

      Contact Form 7 incluye el español. Fijate que en Ajustes > Generales > Idioma del sitio tengas WordPress configurado en Español y no Español de Argentina. Otra alternativa es editar los mensajes de alerta desde la pestaña Mensajes del formulario activo.

      Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!