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.