Personalizzare il Contact Form 7


Personalizzare-contact-form-7

Contact Form 7 è uno strumento strumento molto utile che consente ai visitatori del nostro sito di contattarci tramite email, utilizzando un modulo professionale.

Tuttavia la grafica e le funzioni standard al momento della creazione, non sono ben strutturate magari proprio per consentire una larga personalizzazione successivamente.

Vediamo come gestire al meglio questo Form.

Download e primo funzionamento

  • Dal pannello Plugin WordPress del nostro sito effettuiamo la ricerca della chiave “Contact Form 7”
  • Scarichiamo ed attiviamo il Plugin. Da quel momento troveremo una nuova sezione chiamata “Contact” nel menu di WordPress.
  • In questa sezione possiamo creare e personalizzare i moduli. Crea un modulo rinominandolo a tuo piacimento.Personalizzare-contact-form-7-1
  • Dal popup che si aprirà selezioniamo la lingua italiana, in modo da avere tute le “frasi di errore” e di “invio avvenuto con successo” in italiano.
    Personalizzare-contact-form-7-2

Personalizzazione form

Con il modulo appena creato ci ritroviamo qualcosa del genere:

Personalizzare-contact-form-7-3

Anzitutto se non vogliamo occupare molto spazio con il testo ed i campi da riempire, possiamo eliminare il testo ed inserirlo come Placeholder, scritta che compare all’interno del campo, per poi scomparire quando si vuole digitare qualcosa all’interno. Quindi da così:

<p>Il tuo nome (richiesto)<br />
[text* your-name] </p>

<p>La tua email (richiesto)<br />
[email* your-email] </p>

<p>Oggetto<br />
[text your-subject] </p>

<p>Il tuo messaggio<br />
[textarea your-message] </p>

<p>[submit “Invia”]</p>

Diventa così:

<p>[text* your-name class:campi-modulo placeholder “Il tuo nome”] </p>

<p>[email* your-email  class:campi-modulo placeholder “La tua email”] </p>

<p>[textarea your-message  class:campi-modulo placeholder “La tua richiesta”] </p>

<p>[submit “Invia”]</p>

Vediamo che oltre al placeholder “contenuto qui dentro” è stata aggiunta anche una classe .campi-modulo, che ci consentirà di modificare il modulo da CSS.

Allo stesso modo delle classi possiamo aggiungere gli ID, ad esempio id:campo-modulo-email.

Spero che questa prima personalizzazione sia stata utile per chiarirvi le idee su questo fantastico modulo.

Commenti: Vedi tutto

Lascia una risposta