Nella lezione precedente abbiamo visto come inserire il modulo di default all’interno di una pagina di prova.

Prima di passare alla personalizzazione è importante dare un’occhiata più approfondita a come è fatto questo modulo di contatto.

Se visualizziamo contemporaneamente il modulo online e quello che si vede nell’area di amministrazione ti sarà più facile renderti conto di come è costruito.

Come vedi si tratta di compilare del semplice codice html associandolo a degli shortcode pre impostati.

Tutto combacia perfettamente, online abbiamo i 4 campi nel form e il tasto invia.

Nell’html puoi vedere come il sistema genera il modulo.

Ritroviamo i 4 campi separati dal tag label.

Al suo interno troviamo la dicitura che appare all’utente e lo shortcode che definisce il tipo di campo.

Il primo e il terzo sono campi di testo, il secondo è quello reiservato alle mail, poi abbiamo un’area di testo e infine uno shortcode submit che genera il tasto per l’invio con relatica etichetta.

Per costruire un modulo da zero o integrare questo esistente, abbiamo a disposizione una serie di elementi elencati qui in alto.

Ognuno di essi genera uno shortcode differente ed ha una serie di opzioni che andranno impostate manualmente a seconda dei tuoi obiettivi.

Facciamo subito un piccolo esempio: supponiamo di voler inserire il classico checkbox per il consenso al trattamento dei dati personali.

Lo voglio inserire prima che l’utente veda il tasto e quindi mi posiziono sotto l’ultimo label.

Tra tutti i tag disponibili, quello che serve per questa funzione è accettazione.

Lo clicco e si apre così la finestra delle opzioni, nel quale puoi dare un nome al tag e puoi gestire le sue opzioni.

Ad esempio voglio che il checkbox sia già spuntato in automatico.

Come vedi, modificando i parametri varia anche lo shortcode generato.

Una volta finito clicca su inserisci tag, verrà aggiunto il nuovo shortcode nel codice esattamente dove avevi posizionato il cursore.

Poi, posso aggiungere la dicitura che voglio che appaia di fianco, in questo caso mettiamo per esempio: Accetto i termini e condizioni ecc.

Una volta cliccato su salva e aggiornata la pagina, apparirà il nostro checbox.

Ora che hai capito come è fatto un modulo di contatto, ti aspetto nella prossima lezione nella quale andremo avanti con la personalizzazione e analisi di tutti i tag a disposizione.

Ci vediamo nel prossimo video.

Ciao, hai una domanda su questa lezione?

Iscriviti al sito o effettua il login


  1. Bernardino
    Bernardino dice:

    buongiorno,
    Ottime le indicazioni fornite nel corso. Ho provveduto a modificare adeguatamente il modulo e lo inserirò con le dovute modifiche anche in altre parti del sito.
    PERO’
    Nel mio modulo di contatto -contact form 7 – le aree destinate alla raccolta delle informazioni: (nome, mail,oggetto etc.) sono su un fondo grigio al 30-40% mentre tutta la pagina ha sfondo bianco.
    E’ possibile e dove poter cambiare lo sfondo e renderlo meno pesante….appena appena un grigino al 10,15%?
    Grazie mille
    Dino Brandi

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Bernardino,
      il tema che hai installato (se un tema professionale come quelli che consigliamo) dovrebbe darti la possibilità di gestire gli sfondi sia per la pagina, che per la riga, che per la colonna che per il singolo modulo. Di conseguenza le modalità con cui puoi camabiare gli sfondi sono tantissime.

      Infine l’ultima risorsa che hai per modificare elementi visivi come questi, sono scrivere direttamente i css (corso html e CSS).
      In CF7 i campi sono HTML. Puoi fare la tua struttura HTML al form e modificare l’aspetto visivo con i css.

      Buona giornata

    • Bernardino
      Bernardino dice:

      Grazie Lorenzo,
      Adotterò i suggerimenti da te consigliati per migliorare l’aspetto attuale del modulo di contatto.
      Bernardino

  2. Velia
    Velia dice:

    Ciao esiste un modo per personalizzare graficamente il modulo contatto? Con Formidable Form ad esempio si può fare ma con Contact Form 7 non sono riuscita a trovare nulla in tal senso.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Velia,
      Contact form 7 ha delle opzioni di personalizzazione abbastanza limitate.
      Si può intervenire solo inserendo tag html.

      Se vuoi avere più libertà creativa, ti consiglio di provare Ninja Forms, trovi la spiegazione su suo utilizzo nelle successive lezioni.

      Spero di esserti stato utile,
      buona giornata.

  3. alberto
    alberto dice:

    salve, ho un problema, il mio modulo di contatto sembra graficamente inserito correttamente nella pagina, ma quando inserisco i dati nei campi e premo invio la pagina non si aggiorna e i dati restano visibili. Inoltre noto che il modulo in visione html e’ diverso da quello che si vede nella lezione, non ho i tag e ma in apertura e chiusura.

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Alberto,
      se hai il sito in locale allora presumibilmente non hai un server di posta installato.
      Se usi pacchetti com MAMP o XAMPP allora devi guardare nella relativa documentazione.
      Vito che si tratta di un semplice modulo di contatti, allora ti sconsiglio di perdere troppo tempo in setting del server locale. Quando andrai online ricordati di fare un test veloce, e al 99% dei casi non avrai problemi.

      Buona giornata

    • alberto
      alberto dice:

      Grazie, effettivamente stavo già perdendoci tanto tempo… grazie ancora

Non vuoi fare da solo?

Non vuoi fare da solo?

Per realizzare il tuo progetto o per risolvere qualsiasi problematica, rivolgiti al nostro Team di professionisti.

oppure chiamaci allo 02.9843140

You have Successfully Subscribed!

Pin It on Pinterest