Estilos CSS personalizados para Contact Form 7

El plugin Contact Form 7 tiene un fichero de CSS para dar estilos mínimos al formulario pero estos no siempre concuerdan con la estética de nuestra Web. Sigue los pasos de este artículo para que puedas aplicar tus propias líneas de CSS y hacer que tu formulario luzca perfecto.

Desgranando el HTML

Lo primero que tendrás que hacer es entender el HTML que genera este plugin con sus correspondientes clases, para que luego puedas atacarlas desde tu tema hijo o bien desde el personalizador.

El formulario básico

A modo de ejemplo voy a transcribir parte de la estructura de HTML que general el Contact Form 7 y sus respectivas clases:

<form class="wpcf7-form"> <!-- (1) -->
    <p><!-- (2) -->
        <label> Tu nombre (obligatorio)<br><!-- (3) -->
            <span class="wpcf7-form-control-wrap your-name"><!-- (4) -->
                <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"><!-- (5) -->
            </span>
        </label>
    </p>
    <p>
        <input type="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit"><!-- (6) -->
    </p>
</form>

Como podrás ver, agregué un par de comentarios en el HTML para explicar cada uno de los puntos:

1. Puedes ver que todo el formulario está agrupado bajo el elemento <form> con la clase .wpcf7-form la cual te servirá para atacar los estilos en forma general.
   Por ejemplo, podrías asignarle el atributo display: grid para cambiar la estructura general del mismo.
2. Cada campo y hasta el botón de enviar se encierran automáticamente con un elemento <p>. Poco más que agregar aquí.
3. Los campos que damos de alta en el Administrador de WordPress (a excepción del botón enviar) se encierran dentro de la etiqueta label.
4. A su vez, cada campo se encierra en un span con algunas clases que nos facilitarán su selección para aplicar estilos. Las clases que se agregan son:
   • wpcf7-form-control-wrap: clase genérica para representar cualquier campo.
   • [campo name del input]: agrega también una clase dinámica con el mismo nombre del atributo name del input. En el ejemplo, agrega la clase your-name.
5. Ahora sí ya estás en el input mismo, donde CF7 agrega una serie de clases en forma automática, a saber:
   • wpcf7-form-control: clase genérica para todos los campos.
   • wpcf7-text: clase con el tipo de campo configurado en el Administrador de WordPress (más adelante te mostraré las clases de los otros tipos de campos).
   • wpcf7-validates-as-required: CF7 agregará esta clase en caso de que el campo sea obligatorio.

Las clases para cada tipo de campo de Contact Form 7

• Campo de texto => wpcf7-text
• Campo de email => wpcf7-email
• Campo de URL => wpcf7-url
• Campo de teléfono => wpcf7-tel
• Campo numérico => wpcf7-num
• Campo fecha => wpcf7-date
• Campo de textarea => wpcf7-textarea
• Campo desplegable => wpcf7-select
• Campo de verificación => wpcf7-checkbox
• Botones de selección => wpcf7-radio
• Campo de aceptación => wpcf7-acceptance
• Campo de archivo => wpcf7-file

Mensajes

Tanto como si el formulario se envía correcta o incorrectamente, el plugin genera un mensaje con una estructura de HTML definida y algunas clases que podrás utilizar para modificar su estilo.

Mensaje de éxito

<!-- mensaje de éxito -->
<form class="wpcf7-form sent">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok">Gracias por tu mensaje. Ha sido enviado.</div>
</form>

Aquí puedes ver el HTML del mensaje exitoso que genera el plugin además de agregar la clase sent al formulario.

Mensaje de error

<!-- mensaje de error -->
<form class="wpcf7-form invalid">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors">Uno o más campos tienen un error. Por favor, revísalos e inténtalo de nuevo.</div>
</form>

Al igual que el mensaje anterior, el plugin genera un HTML específico para el mensaje y también agrega la clase invalid al formulario.

Ejemplos de modificaciones

Cambios en el formulario

¿Qué tal si agregamos borde, cambiamos de color y ponemos un poco de sombra? Así quedaría el CSS final.

.wpcf7-form {
    background-color: #ffffff;
    border: 3px solid #000000;
    box-shadow: 0px 9px 21px 6px rgba(0,0,0,0.5);
    padding: 2em;
    overflow: none !important;
}

Campos con bordes animados

Ya sabes que tienes clases que afectan a todos los campos independientemente del tipo que sean. Vamos a hacer uso de esta clase para darle un toque más original al formulario.

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea {
    background-color: transparent ;
    border-bottom: 1px solid #001;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    margin-bottom: 40px;
	outline: none;
	transition: 0.4s border;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-text:hover,
.wpcf7-form .wpcf7-textarea:hover {
	border: 1px dashed #001;
}

Editando el mensaje de éxito

Podemos darle al mensaje de éxito un toque más parecido a las alertas de Bootstrap. Como verás, solo basta con atacar a la clase wpcf7-mail-sent-ok que es la que se agrega al mensaje en cuanto el formulario se envía correctamente.

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    border: 2px solid #c3e6cb;
    border-radius: .55rem;
    display: block;
    color: #155724;
    font-family: roboto;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative;
}

Como puedes ver, la estructura de HTML puedes modificarla fácilmente desde el configurador de formularios y la estética puedes cambiarla con algunas líneas de CSS seleccionando las clases que Contact Form 7 agrega automáticamente.

Ánimo y a ajustar los colores de esos formularios 💪🏻