SOS WP
  • Blog
  • Risorse
  • Chi siamo
  • Corsi
  • Servizi
    • Creazione Siti Web & Supporto WP
    • Consulenze Professionali
    • Formazione via Skype
    • Richiedi Subito un Preventivo
  • Assistenza WordPress
  • Menu

Apri l'indice dei contenuti

  • Come modificare e personalizzare il layout di Contact Form 7
    • Inizia creando il tuo form
    • Configura le email e i messaggi
    • Impostazioni aggiuntive
    • Come creare una casella di accettazione
  • Personalizzare il look del tuo form di contatto
    • Personalizzare l’intero form
    • Personalizzare tipologie di campi
    • Personalizzare campi specifici
    • Conclusione

Categorie:

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Tutte

  • Creare siti multlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

CATEGORIE

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Creare siti mulitlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

Comincia qui per avere la soluzione al tuo problema

Background Icons
Come modificare e personalizzare il layout di Contact Form 7
Sei qui:
  • Home /
  • Blog /
  • Plugin per WordPress

Come modificare e personalizzare il layout di Contact Form 7

Andrea Di Rocco 10 Aprile 2018
196

Apri l'indice dei contenuti

  • Come modificare e personalizzare il layout di Contact Form 7
    • Inizia creando il tuo form
    • Configura le email e i messaggi
    • Impostazioni aggiuntive
    • Come creare una casella di accettazione
  • Personalizzare il look del tuo form di contatto
    • Personalizzare l’intero form
    • Personalizzare tipologie di campi
    • Personalizzare campi specifici
    • Conclusione

In questa guida approfondiamo un argomento di interesse per molti utenti: come modificare e personalizzare il layout di Contact Form 7.

Questo plugin è stato installato più di 5 milioni di volte dalla Community WordPress, un numero davvero considerevole, e gode di ottime valutazioni (4.5/5 stelle).

Se sei alle prime armi o non hai mai sentito parlare dei “contact form” o form di contatto, sappi che si tratta semplicemente di una pagina o una finestra che i tuoi visitatori o clienti possono usare per contattarti e condividere informazioni con te.

Con Contact Form 7 puoi gestire svariati tipi di form di contatto e puoi abilitare filtri spam e sistemi d’identificazione bot come CAPTCHA.

Non sottovalutare l’importanza di avere uno più moduli di contatto sul tuo sito. Grazie a questo strumento puoi ridurre la “distanza” tra te e i tuoi clienti, migliorare la conversione dei visitatori in clienti e fornire un servizio di qualità.

Puoi avere diversi obiettivi per avviare una comunicazione con i tuoi utenti e di conseguenza avrai bisogno di ricevere dati diversi e creare form diversi.

Alcuni siti usano come punti di contatto solo l’indirizzo e-mail, sinceramente non è il massimo anche perché lasciando piena libertà all’utente puoi finire nel dover leggere e-mail molto prolisse e dover filtrare informazioni. Utilizzando i form di contatto puoi guidare le informazioni e la conversazione con i tuoi utenti.

Ora vediamo come renderci la vita da webmaster facile con Contact Form 7.

Come modificare e personalizzare il layout di Contact Form 7

Inizia creando il tuo form

Per prima cosa, diamo un’occhiata alla schermata di creazione dei moduli di contatto.

Come vedi, il contenuto del form è configurato mediante codici HTML che racchiudono i tag per i vari campi.

Come modificare e personalizzare il layout di contact form 7

Per aggiungere un nuovo campo, ti basta cliccare sulla tipologia di informazione che vuoi richiedere all’utente e compilare il box che appare in sovrimpressione.

Ti faccio un esempio: per aggiungere un campo dove l’utente può inserire il suo indirizzo email, clicca su email. Quindi, spunta la voce Required Field per renderlo un campo obbligatorio e lavora sulle altre opzioni avanzate.

Come modificare e personalizzare il layout di contact form 7 2

Quando clicchi Insert Tag, il tag appare nei codici HTML. Ovviamente, devi ora formattarlo.

Come vedi nell’esempio, tutti i tag già presenti sono racchiusi tra i codici <p> e </p>, all’interno dei quali si trova anche un’etichetta di testo ed il codice <br />.

I codici <p></p> servono a creare un paragrafo. Nel concreto, servono a visualizzare le etichette ed i rispettivi campi in “blocchi”.

La cosiddetta etichetta è il testo che appare sopra il campo che l’utente andrà a compilare, mentre il tag <br /> serve a far sì che – dopo l’etichetta – il campo sia posizionato su una nuova riga.

Personalizzare il formato del tuo modulo di contatto su questa schermata richiede conoscenze base di HTML.

Ovviamente, più sei bravo con l’HTML, maggiori saranno le personalizzazioni che potrai fare al layout del tuo form.

Per riposizionare i campi all’interno del modulo, devi semplicemente spostare i tag. Sulla pagina, i campi avranno lo stesso ordine che hanno all’interno del codice HTML.

Se vuoi approfondire le tue conoscenze di HTML, ti consiglio di dare un’occhiata al modulo HTML del video corso WordPress (più avanti scoprirai anche perché il CSS è veramente molto utile).

Prima di andare avanti voglio ricordarti inoltre che se hai bisogno di assistenza di qualsiasi tipo sul tuo sito WordPress, puoi contattarci alla pagina Servizi.
Ti risponderemo tempestivamente, aiutandoti a risolvere ogni tuo problema.

Configura le email e i messaggi

Nella schermata chiamata Email, puoi configurare le email di notifica che riceverai quando un utente invia il form.

In questa sezione, è importante che tu inserisca i tag relativi alle informazioni che vuoi ricevere dagli utenti.

Mi spiego meglio: se ti interessa che nel corpo del messaggio sia incluso l’indirizzo email fornito dall’utente, dovrai inserire il tag [your-email].

Nella schermata Messaggi, puoi invece inserire i messaggi che appariranno nei vari casi di utilizzo del form. Per esempio, se un utente non inserisce tutte le informazioni, se ci sono problemi tecnici di invio del modulo, eccetera.

Impostazioni aggiuntive

Infine, in Impostazioni aggiuntive puoi aggiungere degli snippet di codici per personalizzare il tuo form. Ecco alcuni snippet che puoi usare:

demo_mode: on

Questo codice serve ad attivare la modalità “Demo” per il tuo form. Questo significa che il form sarà visibile e formattato come l’hai configurato, ma sarà solo una demo – cioè, non invierà i messaggi.

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

Tra le virgolette, aggiungi i tuoi codici Javascript per far sì che venga compiuta una specifica azione quando il form è inviato con successo (nel primo caso), o quando il form è semplicemente inviato, indipendentemente dall’esito (nel secondo caso).

Come creare una casella di accettazione

Una delle domande che mi viene fatta più spesso dagli utenti è “Come posso aggiungere la casella per l’accettazione del trattamento dei dati personali?”. Essere in regola con le normative sulla privacy è importante. Ecco quindi la soluzione offerta da Contact Form 7.

Semplicemente, quando ti trovi all’interno della schermata “Modulo” clicca il tag “Acceptance”. Contact Form 7 è già configurato in modo che l’utente non possa inviare il form senza spuntare la casella di accettazione.

Ci sono poi altre opzioni interessanti:

  • per far sì che la casella sia spuntata per default, clicca “Make this checkbox checked by default“
  • se invece vuoi che questa funzionalità lavori in modo inverso – cioè, che gli utenti possano inviare il form solo se la casella NON è spuntata – seleziona l’opzione “Make this work inversely”.

Personalizzare il look del tuo form di contatto

Veniamo ora al sodo e parliamo di come personalizzare il look del tuo form di contatto.

In questo senso, Contact form 7 è un plugin abbastanza “intelligente”, in quanto sfrutta il più possibile i codici CSS del tuo sito al fine di dare ai moduli un look che sia coerente con le tue pagine.

Se però vuoi personalizzare il form, dovrai creare delle tue regole CSS.

Dove inserire i codici CSS? Hai diverse possibilità:

  • puoi inserirli direttamente nel file style.css del tuo tema. In questo caso, ricorda però che se aggiorni il tema le modifiche fatte al file style.css andranno perse e dovrai andare a re-inserirle.
  • Puoi inserirli nel campo “Custom CSS”, se il tuo tema offre questa funzionalità. Sempre più temi premium hanno una sezione dove l’utente può inserire i propri codici CSS personalizzati. Non tanti temi gratuiti ce l’hanno, però sta diventando sempre più frequente.
  • Puoi inserirli nel file style.css del tuo tema child. Se vuoi personalizzare il tuo sito attraverso i codici CSS, è un’ottima idea creare un tema child, che permette di aggiungere CSS al file style.css, senza però perdere le modifiche con gli aggiornamenti. Se ti interessano i temi child, ti consiglio di leggere questa guida.
  • Se tutte le altre opzioni ti sembrano un po’ troppo complesse, prova il plugin Simple Custom CSS. Usando questo strumento puoi inserire i tuoi codici all’interno di un editore di testo, senza dover andare a lavorare direttamente sui file del template.

Come avrai capito, personalizzare il look dei moduli Contact Form 7 richiede alcune conoscenze di CSS. Se non hai mai utilizzato questo linguaggio di programmazione, per prima cosa ti consiglio di leggere questa guida introduttiva al CSS. Quindi, di dare un’occhiata al modulo CSS del video corso WordPress.

Contattaci subito e otterrai un preventivo personalizzato per risolvere qualsiasi esigenza tecnica.

Scopri di più

Personalizzare l’intero form

La classe dei moduli creati con Contact Form 7 è .wpcf7

Per personalizzare l’intero form (per esempio, cambiando lo sfondo o il font), ti basterà creare delle regole .css che includono questa classe. Ecco un esempio:

.wpcf7 {
  background-color: #fff;
  font: 15px arial, sans-serif;
}

In questo caso, tutto il modulo avrebbe uno sfondo grigio e scritte in font Arial di dimensione 15 pixel.

Personalizzare tipologie di campi

Poi puoi personalizzare specifiche tipologie di campi. In generale, i campi Contact Form 7 hanno un selettore chiamato input. Ogni tipologia di campo si distingue nel seguente modo:

  • il selettore input[type=”text”] si riferisce al campo di testo
  • il selettore input[type=”email”] si riferisce invece al campo email
  • e così via.

Ti faccio un altro esempio: se volessi rendere arrotondati i bordi del campo per l’inserimento dell’email, dovresti usare questi codici:

input[type=”email”] {
   border-radius: 7px;
}

Personalizzare campi specifici

Contact Form 7 ha introdotto una funzionalità molto interessante per la personalizzazione di singoli campi all’interno del form.

Quando aggiungi un tag al modulo, puoi specificare al suo interno un ID a tua scelta, in questo modo:

[email* your-email id:campo-email]

Specificato l’ID, puoi scrivere le tue regole CSS come sempre. In questo caso, se volessi rendere verde lo sfondo del campo email, dovresti usare questo codice:

#campo-email {
 background-color: #FF0000
 }

Come vedi, le regole CSS sono specifiche da caso a caso. Se vuoi apportare una modifica specifica al tuo modulo creato con Contact Form 7, ti consiglio di lasciare un commento qui sotto. Faremo il possibile per integrare il codice nella guida.

Accedi Gruppo SUPPORTO WORDPRESS

Conclusione

Siamo arrivati alla fine di questo post su come modificare e personalizzare il layout di Contact Form 7. Se usi questo plugin da qualche tempo, sicuramente avrai notato come sono cambiate le pagine per la costruzione dei form.

L’unico modo per personalizzare l’aspetto dei moduli creati con Contact Form 7 è attraverso il CSS. Questa caratteristica offre massima flessibilità, però potrebbe anche porre delle limitazioni a chi non ha conoscenze di programmazione. In ogni caso, ti consiglio di imparare almeno le basi di HTML e CSS, in quanto sicuramente ti saranno utili per personalizzare tutto il tuo sito WordPress – non solo i form di contatto!

Come al solito, se hai qualunque domanda o commento, non esitare a lasciare un messaggio qui sotto. Ti risponderemo il prima possibile.

Tags: Contact Form 7design-sitoGraficaGuide popolariMigliori PluginModulo di ContattoPlugin WordPressUsare WordPress
Lascia un Commento

Andrea Di Rocco

Fondatore di SOS WP, Autore

First Badge Item Second Badge Item Third Badge Item
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 650 guide su WordPress e sulla SEO che ho pubblicato su questo blog e se ne hai voglia ti invito a leggere la mia storia cliccando sul pulsante qui sotto.
Leggi la mia storia
Ti potrebbe interessare:
Come configurare WordPress
Come configurare WordPress24 July 2018
Come configurare SendGrid con WordPress
Come configurare SendGrid nel tuo sito WordPress20 May 2020
I Redirect HTML in WordPress
Redirect HTML in WordPress: cosa sono e come si creano04 January 2017
I migliori widget WordPress per la sidebar del tuo sito
I migliori widget WordPress per la sidebar del tuo sito22 March 2018
I vantaggi SEO di WordPress
5 mega vantaggi SEO di usare WordPress23 June 2020
Come usare Loco Translate per tradurre temi e plugin WordPress
Come usare Loco Translate per tradurre temi e plugin WordPress20 March 2017
196 commenti

Lascia un commento
  1. teo
    teo dice:
    14 Gennaio 2021 alle 1:32 pm

    .wpcf7 {
    background-color: #fff;
    font: 15px arial, sans-serif;
    }

    qual’è la sintassi corretta per attribuire a tutti i moduli del form, nello specifico: calendario (date) e dropdown menù una dimensione tipo 16opx x 55px?

    grazie della dritta fin d’ora

    teo

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      25 Gennaio 2021 alle 10:01 am

      Ciao Teo, per impostare altezza e larghezza di un elemento di un form, devi assegnare a quell’elemento un id. Quindi nel CSS potrai impostare i valori di width e height, ad esempio #mio-elemento {width:200px;height:100px}. Consulta la nostra guida CSS per approfondire. Puoi anche aggiungere il CSS a una singola pagina, come spiegato in questa guida. Restiamo a disposizione, un saluto.

      Rispondi
  2. Alberto
    Alberto dice:
    22 Maggio 2020 alle 2:02 pm

    Ciao, grazie per l’articolo.
    Se volessi modificare il form facendo apparire la tastiera corretta in base alla tipologia di inserimento, come dorei fare?
    Ad esempio, da mobile vorrei che la sezione di form da compilare con il numero di telefono mi aprisse direttamente la tastiera numerica e non la qwerty.
    Grazie

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      22 Maggio 2020 alle 2:27 pm

      Ciao Alberto, ti consigliamo di rivolgerti al supporto di Contact Form7. Non conosciamo alcun plugin che possa fare quanto richiedi, ci dispiace di non essere di maggiore aiuto!

      Rispondi
    • Federica macri
      Federica macri dice:
      12 Novembre 2020 alle 8:22 pm

      Ciao davvero molto interessante questo articolo, ti vorrei fare una domanda, ma per cambiare il colore del bottone invio come fare?

      Rispondi
      • SOS WP Team
        SOS WP Team dice:
        19 Novembre 2020 alle 3:18 pm

        Ciao Federica, il pulsante può essere personalizzato utilizzando il CSS. Nel paragrafo “Personalizzare il look del tuo form di contatto” di questo articolo viene spiegato come aggiungere del CSS personalizzato. Contattaci se hai bisogno di assistenza tecnica! Un saluto!

        Rispondi
  3. Luigina
    Luigina dice:
    13 Maggio 2020 alle 5:23 pm

    Ciao Andrea,
    vorrei cambiare il colore dello sfondo del bottone “Invia”. Come posso farlo tramite CSS?
    Grazie

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      14 Maggio 2020 alle 12:10 pm

      Certamente Luigina, puoi farlo con il CSS.

      Rispondi
  4. Domenico
    Domenico dice:
    8 Aprile 2020 alle 11:52 am

    Salve!
    Nel mio sito internet vorrei inserire un form di contatto con Contact Form 7, ma vorrei cambiare i colori delle diciture ” Il tuo nome (richiesto)”, ” La tua email (richiesto)”, ecc. ecc.

    Dove e come posso agire? Grazie mille in anticipo!

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      9 Aprile 2020 alle 11:46 am

      Ciao Domenico, puoi modificarle via CSS. Leggi in merito la nostra guida: https://sos-wp.it/guida-css-wordpress/

      Rispondi
  5. marcello
    marcello dice:
    1 Ottobre 2019 alle 7:36 am

    Ciao, è possibile effettuare un controllo sul campo di testo che confermi l’inserimento di un testo specifico?Ad esempio, se volesse inserire un codice sconto che si chiama CODICE e controllare che il testo sia esatto…

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      1 Ottobre 2019 alle 9:09 am

      Ciao Marcello, non conosciamo un plugin specifico, anche se fare ciò che dici è possibile intervenendo via codice. Un saluto, grazie del tuo commento.

      Rispondi

Domande? Lascia un commento!

Il team di SOS WP risponde tutti i giorni. Unisciti anche tu alla conversazione…

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Andrea Di Rocco - Autore di SOS WP

Benvenuto!

Sono Andrea Di Rocco, autore di SOS WP, il blog italiano su WordPress che contiene oltre 650 guide su come creare blog e come creare siti web che generano traffico, contatti e vendite! Oltre al blog, forniamo:

Assistenza WordPressAssistenza WordPress

Creazione siti webCreazione siti web

Corso WordPressCorso WordPress

Servizi

  • Creazione blog professionali
  • Realizzazione siti web
  • Messa a norma GDPR
  • Consulenza SEO
  • Formazione WordPress
  • Chiedi un preventivo

LINK RAPIDI

  • Scopri TUTTO SEO™
  • Entra in Area Corsi
  • Gruppi Facebook
  • Testimonianze
  • Contattaci
  • Lavora con noi

Vuoi creare un blog? Non sai come muoverti nel mondo di WordPress? Desideri essere primo su Google con il tuo sito web?

Richiedi Preventivo

  • Safe Payment IconPagamenti sicuri con:
    Maestro IconVisa IconMastercard IconPaypal Icon e altri…
  • Support IconSupporto continuo dal Lunedì al Venerdì 08:30 – 18:30
SOS WP
  • Chi Siamo
  • Chi è Andrea Di Rocco
  • TUTTO SEO™
  • TrustPilot
  • Privacy e Cookie Policy
  • Facebook
  • Youtube
  • Linkedin
 

© Copyright 2012-2021 | SOS WP™ Metro Effort Limited. Tutti i diritti sono riservati.

 
Scorrere verso l’alto
SOS WP utilizza i cookie per migliorare la tua esperienza: ACCETTOImpostazioni
Privacy & Cookies Policy

Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni
Cookie di terze parti
Salva e accetta