Come personalizzare lo stile del modulo di contatto 7 in modo che corrisponda al tuo sito web

Con oltre un milione di installazioni attive, Contact Form 7 è di gran lunga uno dei plugin WordPress più popolari di sempre. La sua popolarità probabilmente ha molto a che fare con la verità dietro la sua descrizione: "Semplice ma flessibile".

Contact Form 7 ti consente di creare più moduli di contatto utilizzando nient'altro che un semplice markup HTML (che genera per te). Una volta creato, ogni modulo può essere distribuito rapidamente posizionando lo shortcode corrispondente dove desideri che appaia il modulo; nella pagina, nel post o nell'area del widget. I messaggi inviati tramite i moduli vengono inviati all'indirizzo e-mail fornito nelle impostazioni del plug-in e lo spam viene combattuto tramite il supporto per CAPTCHA e Akismet.

Contact Form 7 è così semplice che sembra letteralmente che chiunque possa usarlo in modo efficace. Anche lo stile deve essere semplice. Ma forse troppo semplice per alcuni. Per impostazione predefinita, il plug-in Contact Form 7 non modella i suoi moduli. Qualsiasi stile che hanno è il risultato di stili predefiniti presenti nel foglio di stile di un tema WordPress.

Di solito risulta in qualcosa di abbastanza semplice, come questo:

Sfortunatamente questo tipo di modulo, sebbene semplice e flessibile, potrebbe non essere progettato in modo così bello come gli altri elementi del proprio sito web. Lasciando molti utenti altrimenti felici alla ricerca di alternative a Contact Form 7 con più opzioni di stile. Per fortuna, però, con solo un po' di CSS, non è necessaria alcuna alternativa al plugin.

Nel post di oggi condividerò una serie di suggerimenti che apriranno un'ampia varietà di possibilità di stile di Contact Form 7 per chiunque, utilizzando qualsiasi tema.

Come personalizzare lo stile del modulo di contatto 7 in modo che corrisponda al tuo sito web

Iscriviti al nostro canale Youtube

Dove modificare il modulo di contatto 7 CSS (e perché)

È importante che quando si aggiunge CSS personalizzato non lo si aggiunga al foglio di stile di Contact Form 7 o del tema principale. Eventuali modifiche o aggiunte apportate verranno sovrascritte non appena il tema e/o il plug-in verranno aggiornati.

Invece, vorrai aggiungere il CSS sottostante al CSS del tuo tema figlio. Puoi anche utilizzare la funzione CSS personalizzata su Jetpack, o se il tuo tema fornisce una sezione nel suo pannello di amministrazione per CSS personalizzati puoi usarla anche tu.

Ok, ora che sappiamo dove posizionare gli stili che esamineremo di seguito, iniziamo!

Come creare stili wide form del sito

Iniziamo apportando alcune modifiche generali che si applicheranno all'intero modulo. Possiamo farlo usando il selettore di classe .wpcf7 e poi aggiungendo stili sotto di esso.

(Vorrei anche suggerire caldamente di inserire l'intestazione commentata che ho scritto di seguito all'interno del tuo foglio di stile per indicare dove iniziano gli stili del modulo di contatto 7.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Dopo aver aggiunto il codice sopra al tuo foglio di stile, ogni modulo che crei con Contact Form 7 avrà gli stili di sfondo e bordo che hai appena definito. Di seguito è riportato un esempio.

Come puoi vedere, ci sono alcuni problemi di spaziatura. Per risolvere questo problema ti consigliamo di regolare i margini tra il bordo e gli elementi del modulo interno. Puoi farlo con il codice qui sotto.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Sul mio sito di test, ciò ha comportato quanto segue:

Nota: questi stili possono influenzare i tuoi moduli in modi leggermente diversi a causa del fatto che molto probabilmente stiamo lavorando con temi diversi. Ciò non significa che questo codice non funzionerà per te, solo che potresti dover modificare leggermente i numeri per ottenere le cose giuste per il tuo sito.

Come creare stili di campo wide form del sito

Una delle richieste più comuni che le persone hanno quando si tratta di stilizzare il Contact Form 7 è come regolare la larghezza dei campi. In particolare l'area messaggi che non si estende molto.

Il codice seguente estenderà l'area del messaggio alla larghezza desiderata (se regolata). Ho impostato il mio nell'esempio per il 95% in quanto è ciò che sembrava migliore nel mio caso d'uso immaginato. Puoi anche impostarlo in base alle tue esigenze, utilizzando una percentuale o un numero di pixel fisso.

.wpcf7-textarea {

width: 85%;

}

Puoi anche regolare la larghezza degli altri campi regolando il selettore della classe di input .

.wpcf7 input {

width: 50%;

}

Se non vuoi modificare tutti i tuoi campi di input con gli stessi criteri, puoi approfondire un po' selezionando solo quelli che ti interessano. Nell'esempio sotto ho scelto di cambiare solo i miei campi di testo in modo che il mio pulsante di invio non è anche interessato.

.wpcf7-text {
width: 50%;
}

Dopo tutte le modifiche di cui sopra, sono stato in grado di modellare il modulo che vedi di seguito.

Personalmente non volevo cambiare il colore del mio bottone, ma penso che sia molto probabilmente un altro desiderio comune. Quindi, se desideri modificare il colore del pulsante, puoi utilizzare il CSS di seguito per sperimentare.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Con questi frammenti di CSS in atto, ogni modulo creato con Contact Form 7 assomiglierà all'immagine finale sopra. Ma cosa succede quando vuoi che una forma in particolare appaia diversa da tutte le altre?

Come modellare una forma specifica

Ottenere l'ID CSS specifico richiesto per apportare modifiche di stile a un modulo specifico può essere un po' fastidioso, ma è possibile con un po' di ritocchi.

La prima cosa che vorrai fare è effettivamente aggiungere lo shortcode del modulo nel tuo sito e visualizzarne l'anteprima. (Noterai che all'interno di quello shortcode c'è un numero per l'ID, ma questo non è in realtà l'ID completo di cui avrai bisogno.)

Quindi, utilizzando la funzione di ispezione dell'elemento di Google Chrome o qualcosa di simile in un altro browser, dai un'occhiata al codice per il modulo. Usando questo troverai l'ID completo del modulo.

Nel mio caso, il numero ID nel mio shortcode era 4407 . L'ID completo si è rivelato essere wpcf7-f4407-p4405-o1 . Ciò significava che potevo apportare ulteriori modifiche, solo a quel modulo specifico, utilizzando il codice seguente con vari criteri che differivano dalle mie impostazioni a livello di sito.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Come applicare uno stile a campi specifici

Puoi fare la stessa cosa con campi specifici. Invece di rintracciare una specifica classe o ID CSS nel tuo browser, tutto ciò che devi fare è aggiungerlo nel generatore di moduli.

Quando generi un tag da inserire nel generatore di moduli, noterai che ci sono due opzioni per creare un ID, una classe o entrambi.

In questo esempio ho scelto di creare una classe chiamata custom-field . Se fai lo stesso (o qualcosa di simile) sarai in grado di modellare solo quel campo usando il tuo nuovo ID (o classe) come ho di seguito.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Come creare layout di moduli personalizzati per caselle di controllo e pulsanti radiali

Per impostazione predefinita, le caselle di controllo e i raggi vengono visualizzati da sinistra a destra.

Ma a causa delle preferenze personali o di un caso d'uso specifico in cui potrebbe essere preferibile visualizzarli dall'alto verso il basso, puoi utilizzare una delle due opzioni seguenti.

Per visualizzare le caselle di controllo o i pulsanti radiali dall'alto verso il basso ea sinistra, usa questo.

.wpcf7-list-item {
display: block;
}

Per visualizzare le caselle di controllo e i pulsanti radiali dall'alto in basso e a destra, usa questo. Assicurati inoltre che quando generi il tag per questa opzione scegli la casella di controllo "etichetta prima".

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Suggerimento bonus: come rimuovere i titoli dei campi e utilizzare invece il testo segnaposto

Questo suggerimento non richiede l'uso di CSS come gli altri sopra, ma piuttosto una semplice modifica al markup utilizzato nel generatore di moduli Contact Form 7.

A volte non è necessario avere i titoli dei campi, specialmente quando puoi inserire del testo segnaposto all'interno dei campi stessi che spiegano quali informazioni vi appartengono.

Se questo è il caso del tuo sito, tutto ciò che devi fare è eliminare i titoli nel generatore di moduli e aggiungere il testo segnaposto come ho fatto nell'esempio seguente.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Il risultato è una forma più pulita con meno ingombro.

In conclusione

Spero di aver mostrato negli esempi precedenti che il plug-in Contact Form 7 è altamente personalizzabile. È vero, richiede un po 'di armeggiare, ma per un plug-in gratuito che potrebbe essere previsto.

Penso che la mancanza di opzioni di stile predefinite sia una parte importante del motivo per cui il plugin funziona così bene per così tanti. Quindi è giusto che chiunque tragga molto valore da esso e che desideri più stile, si impegni per alcuni minuti a rilasciare una versione di uno degli esempi di codice sopra.

Hai qualche tuo consiglio di stile Contact Form 7? Ci sono preferiti che hai usato che vorresti condividere? Scrivici una riga nei commenti qui sotto!

Miniatura dell'articolo tramite Dmitry Lemon5ky // shutterstock.com