UX: Come modificare lo stile di contact form 7 facilmente.

18 Ottobre 2018
condividi

Ebbene sì, oggi vedremo come modificare facilmente un form di contatto di Contact Form 7 (CF7). 
Se il tuo obiettivo è quello di mettere in moto il funnel, sai che la User Experience gioca un ruolo fondamentale del web design e del web marketing.
I form di contatto (con tutte le integrazioni che ne conseguono) sono di certo tra gli elementi più importanti di un sito, che esso sia un sito di presentazione di un'azienda o un e-commerce.

Uno dei plug-in più popolari di WordPress è per l'appunto CF7, fantistico plug-in che ci permette di creare in semplicità dei form molto complessi e utilissimi.
Una delle pecche di questo plugin è l'impossibilità di modificare il suo stile dal backend di WordPress, ma niente paura… con pochi passi e un codice (che ti fornisco in questo articolo) vedrai che non è impossibile affatto modificarlo.

Passi Preliminari per Personalizzare CF7

  • Effettua il login in WordPress
  • Se non esiste Ancora, crea un form da "Contatti" 
  • Copia lo shortcode e incollalo in una pagina
  • Clicca su Aspetto
    • Personalizza
    • CSS Aggiuntivo

Se hai effettuato tutto correttamente troverai una schermata così:

Contact Form 7 non ha un suo stile e l'unica cosa che prende dal nostro tema è lo stile del pulsante.

Ecco il codice per modificare CF7

Una volta che siamo all'interno della personalizzazione del css del nostro sito (il miglior modo per non perdere modifiche a causa di aggiornamenti) andiamo ad inserire le " classi css " di CF7 : segue il codice

/*customize CF7 Form (commento per ricordaci che è codice che modifica CF7 */

.wpcf7 {
	background: #dbdbdb;
	border: 5px solid #6666
}
.wpcf7-form {
	margin:25px;
}
.wpcf7 input{
	width:85%;
	border-radius: 3px;
}
/* CF7 end */

piccolo appunti sulle classi: 

.wpcf7 = il corpo (bordo e sfondo)

.wpcf7-form =  il form (in questo caso ho dato 25px di margine da ogni lato

.wpcf7 input = lo stile delle caselle 

A questo punto dovremmo trovarci con un situazione ben diversa.


modifica CSS

Non ti resterà che divertirti con le modiche css, se non conosci le regole css ti consiglio di divertirti con l'ispezione del sito con Google Chrome o di dare un occhio al sito di w3c schools.

Come puoi vedere questo form di contatto ha i campi all'interno dell'area input. ciò avviene sostituendo le label: vedi esempio qui sotto

<label> Nome
        [text* text1] </label> 
/*sostituisci come di seguito*/
[text* text1 placeholder "Nome"]

In questo modo renderemo molto più snello ed elegante il nostro form.

Se qualcosa non dovesse essere chiaro o non funzionare, commenta pure l'articolo, insieme troveremo le migliori idee e soluzioni per modificare contact form 7

Potrebbe interessarti

Downgrade WordPress: guida rapida al ripristino

Se hai cercato la parola downgrade worpress su google, molto probabilmente lo stai facendo perché hai problemi di compatibilità di alcune funzioni del tuo sito web. Niente paura, può succedere, anche se non dovresti arrivare a fare il downgrade perché potresti utilizzare il backup giornaliero. Non lo hai il backup o non puoi permetterti di […]

Read More
Telegram Registra un record di utenti in un giorno... "Avanti Anni Luce"

Riporto la traduzione del fondatore di telegram, la quale dovrebbe far pensare che la pubblicità online deve assolutamente prendere anche altre direzioni. Ieri Telegram ha registrato un aumento record nella registrazione e nell'attività degli utenti. Il tasso di crescita giornaliero di Telegram ha superato la norma di un ordine di grandezza e in un giorno […]

Read More
DAD - i Rischi di un sistema non omologato di didattica a distanza.

DAD e FAD: Chi mi conosce sa che per scelta dal 2014 lavoro in smart working (questo non significa stare rintanato a casa). L'inizio del 2020 si è presentata l'emergenza pandemica mondiale del covid, il quale ha fatto adottare misure straordinarie a cui si sono dovuti abituare un po' tutti. La DAD, la cosiddetta didattica […]

Read More
Formazione a Distanza "FAD", 7 suggerimenti

Formazione a Distanza e COVID-19 sono alcune delle parole più usate in questo momento. In effetti in questo periodo ho finito alcuni corsi che avevo cominciato "offline" e sto inizando altre docenze su diverse tematiche. Stiamo portando a termine un corso di Digital Marketing "Starter Kit", a Salerno, una classe numerosa, circa 20 alunni, le […]

Read More
Smart working e sostenibilità contro ogni Virus!

Smart Working e sostenibilità: se non ora quando ?! È innegabile,è un momento molto difficile per la società, in questo momento direi che giustamente alcune tematiche siano andate in sordina. Troppo spesso sentiamo parlare di mercati, crisi, prezzo del petrolio, guerra, guerre e ancora… guerra. Per sdrammatizzare senza scendere nell'ironia spicciola vorrei dire che questo […]

Read More
Usare Gutenberg per Creare un Sito Internet si Può!

Gutenberg! Il Tanto temuto nuovo editor dei contenuti di WordPress è stato davvero una rivoluzione, e chi non ha voluto adattarsi e seguire lo sviluppo perché si è affidato a strumenti terzi, o perché si è sviluppato i suoi template di pagina da zero... Ebbene sì, con Gutenberg creare dei contenuti è diventato molto intuitivo, […]

Read More
Facebook Down: e se un giorno lo fosse per sempre?

#facebookdown potrebbe essere un grande problema per le aziende che grazie proprio al popolare social network hanno avuto incredibili risultati grazie agli strumenti per le inserzioni pubblicitarie, quindi un ipotetico crollo del colosso dei social network sarebbe un problema, certo, ma non insormontabile. Agli albori della piattaforma di Zuckerberg i social come li conosciamo oggi […]

Read More
Ridimensiona le immagini un click

Il metodo più veloce per ridimensionare e modificare le immagini con Ubuntu e sistemi Linux Quanti di voi si trovano a dover ridimensionare le immagini, fare rapide modifiche (esempio: Bianco/Nero, Scala di grigi, riflessi o qualche effetto vintage)? Io sono tra queste persone, spesso per la gestione dei profili social lavoro sulle immagini diverse ore al giorno, per […]

Read More
Ciao,  sono un consulente di web marketing, mi occupo della realizzazione di siti web e di e-commerce, lo faccio con l'occhio da "utente" da circa 10 anni
condividi

Hai bisogno di aiuto?

Se necessiti di un aiuto non esitare a chiedere. Contattami, sarà un piacere esaminare la tua richiesta e fornirti una risposta quanto prima.
Cosa faccio
Seguo le aziende nei loro progetti, studio gli obiettivi fissati e strutturo la strategia web per raggiungere la meta. Scelgo gli strumenti adeguati, formo il personale, coordino le attività web per rappresentare meglio i tuoi servizi, i tuoi prodotti, la tua filosofia.
Contatti
Alessandro Nicoli Web Agency
Tel: +39-(349)-10-65-911
Email: info[at]alessandronicoli.com

© 2018 · Alessandro Nicoli | Web Designer | Consulente Web Marketing ·
P.IVA 03930030246
© Alessandro Nicoli 2022
whatsapp-chat-alessandronicoli
crossmenuarrow-right