Contact Form 7 es un plugin fantástico para gestionar todo tipo de formularios de contacto, pero francamente, es muy feo estéticamente hablando. Hay multitud de plugins que retocan los css necesarios para darle un estilo más bonito pero en nuestro caso buscamos algo más concreto.

Estamos usando el tema DIVI para maquetar, y queremos hacer que el formulario de contacto generado con el plugin Contact Form 7 tenga un aspecto lo más similar posible a los formularios generados por el tema DIVI.

Simplemente añadiremos este código CSS:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
    background-color: #eee!important;
    border: none!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;
}
.wpcf7-submit {
    color: #2d81eb!important;
    margin: 8px auto 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    border-radius: 3px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: transparent;
    border: 2px solid;
    -webkit-font-smoothing: antialiased;
    transition: all 0.2s;
}
.wpcf7-submit {
    float: right;
}
span.wpcf7-list-item {
    line-height: 20px;
  	font-size: 13px;
}

Este código lo podemos poner en las propiedades de la propia página donde esté puesto el formulario de contacto, o bien en el CSS general de la web.

El resultado es sin duda espectacular 🙂