En el artículo anterior os explicábamos cómo hacer dos columnas en Contact Form 7 y en este, vamos a darle vida a este formulario que por desgracia, el plugin va muy bien para insertar un formulario donde queramos pero por defecto trae un estilo así:
Concretamente, os enseñaremos cómo darle el estilo de Weberas. Para sacarte de dudas: no, no necesitas instalar ningún plugin extra ni saber de CSS un montón. Tú sólo copia el código que te daremos a continuación y luego te explicaremos un poco de qué va.
Dar estilo a Contact Form 7
En Weberas, tenemos este formulario de contacto:
Quitando la imagen de fondo, lo que tenemos es un borde inferior en todos los campos, un fondo transparente, los nombres de los campos dentro de los mismos (eso se llama Placeholder) y finalmente, la aceptación de los términos y condiciones (esto es obligatorio ponerlo).
El código que tenemos es el siguiente:
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar { background-color: transparent !important; border-bottom: 1px solid #001!important; border-top: 0px!important; border-left: 0px!important; border-right: 0px!important; width: 100% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 40px!important; font-family: 'Droid Sans', Helvetica, Arial, Lucida, sans-serif; font-size: 20px; } .wpcf7-submit { color: #000 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 700; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding: 6px 20px; line-height: 1.7em; background: #AAE1D4; border: 1px solid #AAE1D4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important; text-transform: uppercase; } .wpcf7-submit:hover { background-color: #57e6e6; border-color:#57e6e6; padding: 6px 20px !important; color: #fff!important; } div.wpcf7 { font-family: 'Droid Sans', Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 300; text-transform: uppercase; text-align: center;} .wpcf7-textarea { font-family: 'Droid Sans', Helvetica, Arial, Lucida, sans-serif; width: 100%; box-sizing: border-box; color: inherit; padding: 24px; position: relative; line-height: 1.5em; font-size: 20px; margin-bottom: 40px; color: #eee; }
Con este código le estamos dando forma a todos los campos actuales; desde el del email, teléfono y asunto hasta al del mensaje. Además, le hemos dado al botón color y al pasar el mouse (es decir, al hacer hover) le damos otro estilo. En otros artículos daremos más estilos a contact form para que los puedas aplicar en tu web.
Cómo añadir aceptación de términos y condiciones en Contact Form 7
Esta es una parte importante si quieres cumplir la ley. Normalmente nadie te va a decir nada hasta que algún día pase y te arrepientas de no haberlo puesto. Ya verás que es muy sencillo.
Aquí te mostraremos cómo lo tenemos en Weberas, del mismo modo que también verás cómo añadir Placeholder en Contact Form 7 y quitar los nombres encima de los campos del formulario.
Tienes que dirigirte a tu formulario de contacto y editar el cuadro HTML donde están los campos que quieres poner. En nuestro caso:
<div class="one-half"><label> [text* your-name placeholder "Nombre"] </label></div> <div class="one-half last"><label> [email* your-email placeholder "Email"] </label></div> <div class="one-half"><label> [text your-subject placeholder "Asunto"] </label></div> <div class="one-half last"><label> [tel* tel-503 placeholder "Teléfono"] </label></div> <label> [textarea your-message placeholder "Mensaje"] </label> <label> [acceptance acceptance-902] He leído y acepto la <a href="https://weberas.com/politica-de-privacidad/">política de privacidad</a></label> [submit "Enviar"]
Si te fijas, hemos eliminado el nombre de cada campo que se encuentra detrás de «label» y lo hemos incluido dentro de los corchetes detrás de «placeholder«.
Para la aceptación de términos y condiciones en Contact Form 7, añadimos el campo de «aceptación» y, mediante HTML incrustamos la URL de los términos. Si copias este formulario recuerda poner la URL de los tuyos 🙂
Ahora viene lo más importante. Para que el usuario pueda enviar el formulario, como condición necesitamos que esté marcada la casilla de aceptación. Para ello, tenemos que ir a Ajustes Adicionales dentro de la edición de tu formulario e insertar:
acceptance_as_validation: on
Es lo que indica que el formulario se podrá enviar cuando la aceptación esté marcada. ¡Et voilà! Ya tendrás tu formulario de contacto bien chulo en tu web.
Hola.
Gracias por la ayuda, esto me esta quedando un poco mas presentable, solamente no se porque no me queda en columnas, si no que todos los campos hacia abajo.
espero puedan ayudarme.
Gracias
¡Hola Christian! Para que te quede en dos columnas sigue el siguiente artículo con el código CSS. Es este: https://weberas.com/poner-dos-columnas-contact-form-7-responsive/
¡Espero que te sirva!
Gracias y un saludo 🙂
Buenos días!! tengo un problema que me estoy volviendo loco a ver si me puedes ayudar… en mi web https://correduriacantos.com/contacto/ cuando pongo la casilla de aceptación de la política de privacidad me cambia de linea y me deja la casilla en una linea y luego hace como un cambio de línea… Gracias por el post y por tu ayuda.
Buenas tardes Juanra, ¿podrías colocar el código html por aquí? Así podré ver si es un problema de código. ¡Gracias y buen fin de semana! 🙂
Además de tener el mismo problema de Jaunra, la casilla de aceptación me queda muy pequeña, sobretodo para MOBILE. Adjunto de nuevo el código, a ver si le puedes echar un ojo:
[text* name placeholder «Nombre»]
[email* email placeholder «Email*»]
[text* subject placeholder «Asunto»]
[text* your-subject placeholder «Teléfono»]
[textarea* message placeholder «Comentario*»]
[acceptance acceptance-902] He leído y acepto la política de privacidad
[submit «Enviar»]
Muchas gracias!
¡Hola!
Los problemas que me comentas son de estilo, no del código html del formulario. Para cambiar la casilla de aceptación deberás encontrar la clase que tiene y darle más anchura. Puedes probar de aumentar el tamaño con este código:
input[type=checkbox]
{
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
transform: scale(2);
}
O también se aumenta con este:
input[type=checkbox]
{ font-size: 110%;}
Un saludo 🙂
buenas tardes necesito saber donde pego ese codigo para agarrar el estilo
Hola José. Lo pegas en el mismo formulario .
Hola muy buen post. Te pido una ayuda con un tema, no se porque me esta saliendo el titulo del form y no me deja ni editarlo. Lo peor es que el titulo esta en ingles «Product Enquiry».
¿Sabes como cambiarlo o si se puede desde el css?
Gracias
¡Hola Claudio! Me he estado mirando tu web y he localizado lo que dices. He hecho «inspeccionar elemento» y el título forma parte del plugin Woo quote or Enquiry Contact Form 7. Por lo que he investigado solamente se puede cambiar mediante el plugin Loco Translate. Hay que buscar esa línea y cambiar la traducción por lo que desees poner. También por lo que he visto cuando se actualiza el plugin se restablece el título anterior, así que habrá que estar atento.
¡Muchas gracias!
Un saludo 🙂
Gracias por la ayuda
Hola. como puedo modificar el hover y los colores del boton «enviar»
dentro del código no puedo encontrarlo
Hola German,
Para cambiar el hover del botón y colores tienes que ir a .wpcf7-submit y .wpcf7-submit:hover.
Un saludo