Come sovrascrivere in modo sicuro gli stili di Contact Form 7?

Ecco alcuni modi per ottenere questo risultato.

Se stai utilizzando un tema personalizzato, puoi modificare il file style.css e apportare le modifiche di stile che desideri direttamente lì.

Se stai utilizzando un tema standard che aggiorni periodicamente, puoi creare un tema figlio (child theme) in modo che il tuo foglio di stile non venga sovrascritto.

Puoi anche creare il tuo foglio di stile personalizzato e semplicemente collegarlo nel file header.php del tema che stai utilizzando.

Il mio sito utilizza anche Contact Form 7 con stili personalizzati e Bootstrap: http://splash.inting.org/wp/

Ecco le tue opzioni:

1) Durante la creazione del modulo, racchiudi i campi con altri elementi HTML (con le classi pertinenti), come mostrato di seguito:

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

Puoi anche definire ID e Classi per gli elementi di Contact Form 7 come mostrato sopra.

2) Crea un file custom.css e aggiorna l'header.php del tuo tema attuale, assicurandoti che il foglio di stile venga aggiunto per ultimo (appena prima della chiusura dell'header). Se viene aggiunto per ultimo, è meno probabile che venga sovrascritto dagli stili del tema o dei plugin.

3) Usa !important nelle definizioni delle classi e degli ID CSS per evitare che vengano sovrascritti da altri stili

Quello che ho fatto è semplicemente impedire il caricamento del foglio di stile incluso nel plugin. Questo è documentato su http://contactform7.com/controlling-behavior-by-setting-constants/ e si presenta così:

/* Impostazioni per Contact Form 7 */
define('WPCF7_LOAD_CSS', false);

Questo snippet va inserito nel file wp.config.

Facendo questo si ottiene un modulo senza alcuno stile speciale. Potrebbe sembrare un lavoro extra, ma in realtà si adatta meglio all'integrazione in un tema esistente, poiché il layout e l'aspetto del modulo possono essere completamente controllati.

Ad esempio, i miei stili per il modulo di contatto sono così:

.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 importante è il prefisso .wpcf7-, in quanto gli stili possono essere applicati solo ai moduli generati da questo plugin.

Esiste un comune malinteso secondo cui il plugin Contact Form 7 (CF7) controlla l'aspetto dei moduli CF7 attraverso i fogli di stile CSS del plugin. In realtà, il plugin Contact Form 7 utilizza solo un CSS minimale per permettere ai moduli CF7 di integrarsi con la maggior parte dei siti web.

L'aspetto effettivo dei moduli CF7 sul tuo sito dipenderà principalmente dal tema WordPress attualmente in uso e dagli stili CSS che il tema applica agli elementi standard dei form HTML. Per modificare l'aspetto dei tuoi moduli CF7 in base alle tue esigenze, dovrai regolare il CSS utilizzato dal tuo tema corrente per questi elementi dei form HTML.

Utilizza un Child Theme per apportare modifiche al CSS dei tuoi moduli CF7

Il metodo più comune e preferito per apportare modifiche agli stili dei moduli CF7 è creare un Child Theme. Effettua tutte le aggiunte necessarie nel file style.css del child theme, piuttosto che direttamente nel file style.css del tema genitore. In questo modo, non perderai le tue modifiche quando aggiornerai il tema.

Il file style.css del child theme di solito importa tutti gli stili dal tema genitore includendo il seguente codice CSS all'inizio del file style.css del child theme.

/* Importa il Tema Genitore */
@import url('../parent-theme/style.css');

Qualsiasi modifica CSS necessaria per alterare l'aspetto dei nostri moduli CF7 viene aggiunta sotto questo codice. Grazie alla gerarchia di caricamento del CSS, le modifiche CSS apportate qui generalmente sovrascriveranno gli stili precedentemente impostati nel tema genitore.