Come formattare un modulo Contact Form 7 in Divi

Spesso questi tipi di pagine portano con sé molti piccoli dettagli da coprire, come il modo in cui i prodotti possono essere filtrati nel motore di ricerca o nei relativi design pubblicitari.

Detto questo, possiamo renderci conto quando il livello di dettaglio per essere in grado di coprire all’interno dei nostri siti web. Tuttavia, tutto dipende dal livello di creatività che possiamo avere per impegnarci nel nostro sito web. Perché, prima di questo, ti parliamo di un piccolo dettaglio che puoi coprire in pochi minuti, e questo è il ContactForm 7.

ContactForm 7 è uno dei plugin per moduli più utilizzati dagli utenti di diverse pagine web. Questo perché è un modo molto efficiente per consentire ai nostri visitatori di interagire con noi attraverso una pagina di contatto o un’altra posizione.

Ma hai il piccolo dettaglio che spesso si rivela un plugin di indagine alquanto semplice, al punto che molti considerano il suo aspetto alquanto sgradevole. Ecco perché dobbiamo pensare a modi migliori per adattare questo popolare plugin al nostro tema.

Con quest’ultimo in mente, possiamo menzionare Divi come uno dei temi più popolari in WordPress e per la sua estetica. È davvero bello da vedere. Per questo motivo, può risultare un po’ fastidioso utilizzare ContactForm 7 all’interno di una pagina Web con Divi, perché i due stili non si abbinano.

Ecco perché dobbiamo formattare ContactForm 7 in modo che possa essere visto nello stesso senso estetico di Divi. Vedi sotto come puoi farlo.

Personalizzazione ContactForm 7 per Divi

In realtà, essere in grado di utilizzare ContactForm 7 è una benedizione quando vogliamo ricevere un messaggio dai nostri visitatori ed essere in grado di interagire con loro se lo desideriamo. Ma se abbiamo Divi come tema, potremmo avere il piccolo problema di scoprire che questo plugin non si combina affatto con il nostro tema.

Questo è il motivo per cui dobbiamo riformulare l’aspetto di ContactForm 7 e adattarlo all’aspetto di Divi. Possiamo farlo in un modo molto semplice. Per fare ciò, dobbiamo entrare nel menu Divi e quindi nell’opzione che appare come «Opzioni tema», qui troveremo il CSS personalizzato. All’interno di questo dovremo inserire il seguente codice.

.wpcf7-text,.wpcf7-textarea,.wpcf7-captchar {

background-color: #eee!importante;

bordo: nessuno! importante;

larghezza: 100%! importante;

-moz-border-radius: 0! importante;

-webkit-border-radius: 0!importante;

bordo-raggio: 0! importante;

dimensione del carattere: 14px;

colore: # 999! importante;

padding: 16px! importante;

-moz-box-sizing: border-box;

-dimensionamento-scatola-webkit: riquadro-bordo;

box-size: border-box;

}

.wpcf7-submit {

colore: # 8B3C90! importante;

margine: 8px automatico 0;

cursore: puntatore;

dimensione del carattere: 20px;

peso del carattere: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

raggio di confine: 3px;

imbottitura: 6px 20px;

altezza della linea: 1,7 em;

fondo: trasparente;

bordo: solido 2px;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: scala di grigi;

-moz-transizione: tutti 0.2s;

-transizione webkit: tutti 0.2s;

transizione: tutti 0.2s;

}

.wpcf7-submit: hover {

colore di sfondo: #eee;

colore del bordo: #eee;

padding: 6px 20px! importante;

}

Tieni presente che ciascuno dei luoghi in cui si dice #eee e # 8B3C90, dovrai cambiarlo per poter personalizzare maggiormente i colori in base a quelli che usi nella tua pagina web. Ora devi solo usare il costruttore Divi per poter personalizzare il modulo.

Perché non usare altre alternative?

Forse ti starai chiedendo perché non dovresti fare un uso migliore dello strumento modulo di contatto fornito con Divi. La risposta a questa domanda è che non è davvero utile come l’utilizzo di ContactForm 7, non ha tante opzioni e non è così intuitivo e diretto. Ecco perché è meglio attenersi a ContactForm 7 e modificarlo secondo necessità.