Come personalizzare CF7 cambiare sfondo e bottone invia

Pubblicato / aggiornato il 22 Luglio 2013

Ecco qualche tip per personalizzare CF7 (Contact Form 7 – plugin per WP)

Il seguente codice per mettere uno sfondo al nostro form e un marige (in questo caso sempre dello stesso colore) in modo che poi, aggiungendo un padding, il testo rimmará centrato in base allo sfondo.
Quindi, aprite lo style.css del vostro CF7 e inserite in fondo alla pagina:

[css].wpcf7-form {
background:#FFF;
border: 10px solid #FFF;
}

.wpcf7 p {
padding-left: 12px;
}
[/css]

Per modificare invece il bottone di invio (custom send button) basterá caricare sul nostro server l’immagine desiderata da sostituire con il bottone classico. Una volta caricata andiamo sul nostro CF7 e modifichiamo DENTRO al form la voce send. Essenzialmente vedrete quanto segue:

Nome e Cognome*
[text 1=”your-name” language=”*”][/text]

Azienda*
[text 1=”Azienda” language=”*”][/text]

Città*
[text 1=”Citta” language=”*”][/text]

Telefono*
[tel* Telefono]

Email*
[email* your-email]

Il tuo messaggio
[textarea your-message]

(aggiungere < e > prima e dopo la frase seguente) input onclick=””submit” type=”image” src=”https://www.spaziopromozionale.it/wp-content/uploads/2013/07/send-blue.png” /

Il risultato sará il seguente (lo sfondo grigio é lo sfondo del layout di pagina, il CF7 é il riquadro bianco)

Schermata 2013-07-22 a 10.42.21

Hola!

Sono Nicole,web designer e grafica freelance.

Scopri chi sono

Sono una web designer freelance

Mi occupo di sviluppo di siti web responsive, e-commerce, blog e grafica da circa 15 anni. Dal 2018 aiuto piccoli imprenditori, artigiani e liberi professionisti a portare la propria attività online con successo.

Mi occupo inoltre di formazione e consulenza in UI design per aziende, web agency e freelance, ed offro supporto e percorsi di mentoring a web designer che desiderano decollare con la loro attività.

Creazione siti web
Siti e-commerce
Branding

Formazione per web designer

FREELANCE

Se sei un web designer freelance alla ricerca di orientamento, chiarezza e supporto per prosperare nel mondo digitale in continua evoluzione, sei nel posto giusto! Il mio servizio di consulenza, formazione e mentoring è qui per te.

Scopri la formazione

Dal blog