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.
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).
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.
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:
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:
Pero antes de continuar, tendremos que corregir los mensajes de error y de envío exitoso para que no ocurra esto:
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
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:
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>
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;
}
}
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.
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.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
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
Hola, Fernando.
Aparentemente es un bug del tema. Tendrías que plantearlo en el foro de soporte.
Saludos.
Acabo de hacerlo. Gracias, Ana!
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
Hola, Jonathan.
¿Tenés la URL a mano para poder verlo?
Saludos.
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
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.
actualmente tengo actualizado el tema a la Versión: 1.8.5.32
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
Hola, Alexander.
Muchas gracias por tu mensaje. 🙂
Saludos.
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.
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ú.
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.
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.
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.
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>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í:
Y el CSS:
.checkbox-1 .wpcf7-list-item-label { display: none; }Saludos.
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.
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”
Hola, Antonio.
Parece un error ocasionado por el plugin Contact Form Builder. Eliminá la carpeta del servidor.
Saludos.
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?
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.
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 !!!
Hola, Silvia.
Gracias por tu comentario.
El código está bien y si lo colocás en un
divsimilar al del reCaptcha debería verse correctamente.En todo caso, enviame la URL para revisarlo.
Saludos.
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!
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.
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.
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.
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…
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.
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
disculpa no salio esta linea
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.
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
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.
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 🙂
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
backgrounddel código de CF7.Saludos.
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.
Te faltan algunos códigos CSS para eso (específicamente los de la clase
zerif_sendy del icono de carga,img.ajax-loader).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.
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.