¿Cómo puedo sobrescribir de forma segura los estilos de Contact Form 7?

Aquí hay algunas formas de lograr esto.

Si estás usando un tema personalizado, puedes editar el archivo style.css y realizar los cambios de estilo que desees allí.

Si estás usando un tema estándar que actualizas, puedes crear un tema hijo y así tu hoja de estilos no será sobrescrita.

Puedes crear tu propia hoja de estilos y simplemente enlazarla en el archivo header.php del tema que estás utilizando.

Mi sitio también utiliza Contact Form 7 con estilos personalizados y Bootstrap: http://splash.inting.org/wp/

Aquí tienes tus opciones:

1) Al construir tu formulario, envuelve los campos con otros elementos HTML (con clases relevantes), como se muestra a continuación:

<div class="control-group">
    <label class="control-label" for="input01">Nombre*</label>
    <div class="controls">
        [text* FirstName id:FirstName class:input-xlarge]
    </div>
</div>

También puedes definir IDs y clases para los elementos de Contact Form 7 como en el ejemplo anterior.

2) Crea un archivo custom.css y actualiza el header.php de tu tema actual, asegurándote de que la hoja de estilos se agregue al final (justo antes de cerrar el header). Si se agrega al final, es menos probable que sea sobrescrita por los estilos del tema o plugins.

3) Usa !important en las definiciones de clases CSS e IDs para que no sean sobrescritas por otros estilos

Lo que he hecho es simplemente evitar que se cargue la hoja de estilos incluida con el plugin. Esto está documentado en http://contactform7.com/controlling-behavior-by-setting-constants/ y se ve así:

/* Configuración para Contact Form 7 */
define('WPCF7_LOAD_CSS', false);

Este fragmento de código va en el archivo wp-config.php.

Hacer esto resulta en un formulario sin ningún estilo especial. Puede parecer trabajo extra, pero en realidad se adapta mejor a la integración en un tema existente, ya que el diseño y la apariencia del formulario pueden controlarse por completo.

Como ejemplo, mis estilos para el formulario de contacto lucen así:

.wpcf7-form { margin-top: 1em; }
.wpcf7-form fieldset p { margin: 0; }
.wpcf7-form label { display: block; float: left; clear: left; width: 150px; text-align: right; margin-right: 5px; margin-bottom: 1.5em; }
.wpcf7-form input[type="text"], .wpcf7-form textarea { display: block; float: left; width: 250px; margin-top: 0; }
.wpcf7-form textarea { width: 450px; }
.wpcf7-form fieldset.submit { margin-top: 1em; position: relative; }
.wpcf7-form input[type="submit"] { display: block; margin-left: 154px; width: 150px; }

.wpcf7-display-none { display: none; }
.wpcf7-response-output { margin: 0 155px; border: 1px solid #000; padding: 0.5em; top: -1em; position: relative; }
.wpcf7-mail-sent-ok { border-color: #398f14; }
.wpcf7-mail-sent-ng { border-color: #ff0000; }
.wpcf7-spam-blocked { border-color: #ffa500; }
.wpcf7-validation-errors { border-color: #f7e700; }
.wpcf7 img.ajax-loader { margin: 1em 0 0 155px; }

span.wpcf7-form-control-wrap { position: relative; float: left; }
span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 0.9em; padding: 0.2em; }
span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; }

La parte .wpcf7- es la importante, ya que los estilos pueden aplicarse solo a los formularios producidos por este plugin.

Existe un error común al pensar que el plugin Contact Form 7 (CF7) controla la apariencia de los formularios CF7 a través de sus hojas de estilo CSS. En realidad, el plugin Contact Form 7 utiliza solo un estilo CSS mínimo para permitir que los formularios CF7 se integren con la mayoría de los sitios web.

El aspecto real de los formularios CF7 en tu sitio web dependerá en gran medida del tema de WordPress que estés utilizando y del estilo CSS que ese tema aplique a los elementos estándar de los formularios HTML. Para cambiar la apariencia de tus formularios CF7 según tus necesidades, deberás modificar el CSS que utiliza tu tema actual para estos elementos de formulario HTML.

Usa un Tema Hijo para realizar cambios en el CSS de tus formularios CF7

El método más común y preferido para realizar cambios en el estilo de los formularios CF7 es crear un Tema Hijo. Realiza las modificaciones necesarias en el archivo style.css del tema hijo, en lugar de hacerlo directamente en el style.css del tema principal. De esta manera, no perderás tus cambios cuando actualices el tema.

El archivo style.css del tema hijo generalmente importa todos los estilos del tema padre incluyendo el siguiente código CSS al principio del archivo style.css del tema hijo.

/* Importar Tema Padre */
@import url('../parent-theme/style.css');

Cualquier cambio de CSS que necesites para modificar la apariencia de tus formularios CF7 se añade debajo de esto. Debido a la jerarquía de carga del CSS, los cambios realizados aquí generalmente sobrescribirán los estilos previamente establecidos en el tema padre.