Contact Form 7 è un ottimo plugin per WordPress che serve a costruire moduli di contatto o form.

Non voglio dilungarmi su come si usa e su come si fa a creare un nuovo form, ma voglio invece spiegare come si fa a nascondere il form dopo che l’utente ha spedito il suo messaggio.

Ho trovato un metodo spiegato sul forum di WordPress che presuppone un bel po’ di riscrittura di codice e qualche hack, ma io ho escogitato un sistema molto più sbrigativo che si basa semplicemente su una riga di codice css.

Nascondere il form con CSS

Questa riga di codice si basa sul fatto che il form inviato ha una classe css in più – sent – rispetto al post da compilare.
Quindi io ho semplicemente creato una regola css con la quale nascondevo gli elementi del form che volevo nascondere:

.sent p, .sent span, .sent input {
display: none;
}

Non ho usato una regola più generica – ad esempio selezionando tutto il form tramite laa sola classe – perchè all’interno di tutto il form sarebbe sparito anche il messaggio di avviso che viene mostrato quando il modulo è spedito correttamente.

Ovviamente se il vostro form è più elaborato, dovrete adattare il css di conseguenza.

Redirect dopo l’invio

Un altra cosa interessante è reindirizzare l’utente ad una pagina specifica dopo che il form è stato inviato.

Per fare questo ho scovato un apposito comando, come spiegato nel sito ufficiale.

Nei Settaggi Addizionali basta scrivere questa riga di codice:

on_sent_ok: "location = 'http://example.com/';"

Anche in questo caso il primo trucchetto è stato utile perchè il comando di redirect dopo l’invio non funzionava con il tema che avevo sottomano, quindi non volendo star là a ‘debuggare’ tutto il tema per capire cosa avrei dovuto sistemare, ho preferito usare i Css.

Testo simpatico

Altra cosa interessante è la possibilità, sempre usando Contact Form 7, di inserire del testo simpatico dentro i campi testo, cioè una etichetta descrittiva che sparisce quando l’utente inizia a scriverci dentro.

Per farlo basta inserire la voce watermark seguita dell’etichetta fra virgolette.

[text* your-name watermark "Your Name"]