Come modellare i moduli di contatto 7 in WordPress

Con oltre 1 milione di utenti attivi, Contact Form 7 è uno dei plugin di moduli di contatto più popolari per WordPress. Il loro più grande svantaggio è che i moduli pronti all’uso che aggiungi sono molto semplici. Per fortuna, Contact Form 7 può essere facilmente disegnato usando CSS nel tema WordPress. In questo articolo, ti mostreremo come modellare i moduli di modulo di contatto 7 in WordPress.


Nota: Non consigliamo più il plug-in Contact Form 7. Raccomandiamo invece WPForms, che è il plug-in per moduli di contatto più adatto ai principianti. Puoi anche scaricare WPForms Lite gratuitamente.

Abbiamo una guida passo passo su come creare un modulo di contatto in WordPress.

Tutorial video

Iscriviti a WPBeginner

Se non ti piace il video o hai bisogno di ulteriori istruzioni, continua a leggere.

Iniziare

Supponiamo che tu abbia già installato il plug-in Contact Form 7 e che tu abbia creato il tuo primo modulo di contatto. Il prossimo passo è copiare lo shortcode per il tuo modulo di contatto e incollarlo in un post di WordPress o in una pagina in cui desideri che appaia il tuo modulo.

Per il bene di questo articolo, abbiamo utilizzato il modulo di contatto predefinito e aggiunto in una pagina di WordPress. Ecco come appariva il modulo di contatto sul nostro sito di test.

Modulo di contatto predefinito 7 modulo su un sito WordPress utilizzando il tema WordPress predefinito

Come puoi vedere, il modulo di contatto eredita alcuni stili di modulo dal tuo tema WordPress. A parte questo è molto semplice.

Stileremo i moduli del modulo di contatto 7 utilizzando i CSS. Tutto il CSS viene inserito nel foglio di stile del tema o del tema figlio.

Styling Contact Form 7 Forms in WordPress

Modulo di contatto 7 genera un codice conforme molto utile e standard per i moduli. Ogni elemento nel modulo ha un ID e una classe CSS appropriati associati.

Ogni modulo di contatto utilizza la classe CSS .wpcf7 che è possibile utilizzare per modellare il modulo.

In questo esempio stiamo usando un font Google Lora nei nostri campi di input. Scopri come aggiungere Google Fonts in WordPress.

div.wpcf7 {
colore di sfondo: #fbefde;
bordo: 1px solido # f28f27;
padding: 20px;
}
.wpcf7 input [tipo ="testo"],
.wpcf7 input [tipo ="e-mail"],
.wpcf7 textarea {
background: # 725f4c;
colore: #FFF;
famiglia di caratteri: lora, sans-serif;
font-style: italic;
}
.wpcf7 input [tipo ="Invia"],
.wpcf7 input [tipo ="pulsante"] {
background-color: # 725f4c;
width: 100%;
text-align: center;
text-transform: uppercase;
}

Ecco come il nostro modulo di contatto si è occupato dell’applicazione di questo CSS.

Styling dei moduli di contatto 7 con CSS in WordPress

Designazione di più moduli di contatto 7 moduli

Il problema con il CSS che abbiamo usato sopra è che verrà applicato a tutti i moduli del Modulo di contatto 7 sul tuo sito web. Se si utilizzano più moduli di contatto e si desidera modellarli in modo diverso, sarà necessario utilizzare l’ID generato dal modulo di contatto 7 per ciascun modulo.

Basta aprire una pagina contenente il modulo che si desidera modificare. Porta il mouse sul primo campo nel modulo, fai clic con il pulsante destro del mouse e seleziona Ispeziona elemento. La schermata del browser si dividerà e vedrai il codice sorgente della pagina. Nel codice sorgente, è necessario individuare la riga iniziale del codice del modulo.

Individuazione dell'ID elemento per il modulo di contatto

Come puoi vedere nello screenshot qui sopra, il nostro codice del modulo di contatto inizia con la riga:

L’attributo id è un identificatore univoco generato dal modulo di contatto 7 per questo particolare modulo. È una combinazione di ID modulo e ID post in cui viene aggiunto questo modulo.

Useremo questo ID nel nostro CSS per dare uno stile al nostro modulo di contatto. Sostituiremo .wpcf7 nel nostro primo frammento CSS con # wpcf7-f201-p203-o1.

div # wpcf7-F201-P203-o1 {
colore di sfondo: #fbefde;
bordo: 1px solido # f28f27;
padding: 20px;
}
# wpcf7-f201-p203-o1 input [tipo ="testo"],
# wpcf7-f201-p203-o1 input [tipo ="e-mail"],
# wpcf7-f201-p203-o1 textarea {
background: # 725f4c;
colore: #FFF;
font-family: lora, "Apri Sans", sans-serif;
font-style: italic;
}
# wpcf7-f201-p203-o1 input [tipo ="Invia"],
# wpcf7-f201-p203-o1 input [tipo ="pulsante"] {
background-color: # 725f4c;
width: 100%;
text-align: center;
text-transform: uppercase;
}

Styling Contact Form 7 Forms con CSS Hero

Molti principianti di WordPress non hanno alcuna esperienza di scrittura di CSS e non vogliono passare il tempo ad impararlo. Fortunatamente, esiste una soluzione meravigliosa per i principianti che ti permetterà non solo di modellare il tuo modulo di contatto, ma quasi ogni aspetto del tuo sito WordPress.

Basta installare e attivare il plug-in CSS Hero e andare alla pagina contenente il modulo. Fai clic sulla barra degli strumenti CSS Hero, quindi fai clic sull’elemento che vuoi modellare. CSS Hero ti fornirà un’interfaccia utente semplice per modificare il CSS senza mai scrivere alcun codice.

Designazione del modulo di contatto Modulo 7 utilizzando CSS Hero

Guarda la nostra recensione completa di CSS Hero e come usarlo per dare uno stile a qualsiasi cosa sul tuo sito WordPress. Puoi utilizzare il codice coupon CSS Hero WPBeginner per ottenere uno sconto esclusivo del 34%.

Questo è tutto ciò che speriamo che questo articolo ti abbia aiutato a imparare come modellare i moduli del Modulo di contatto 7 in WordPress. Puoi anche consultare la nostra guida su come aggiungere un popup del modulo di contatto in WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me