Modificare il Design del Form Commenti

In un recente post abbiamo parlato di ispirazioni per realizzare un form commenti, una lista di 36 form di altri siti, di cui alcuni bellissimi, altri poco belli ma molto originali.

Di fronte allo stupore mentre si ammira questi form però viene sempre da dire “caspita, magari anche il mio fosse così”. In realtà modificarlo non è nulla di difficile, basta solamente qualche riga di Css e due operazioni con Photoshop.

Come si modifica ?

Per realizzare questo post, ho dovuto modificare il form commenti di questo Blog per avere un’esempio pratico. Prima di tutto è necessario avere l’ID di ogni singolo input e della textarea. Se lo si sta realizzando da zero si può dare un ID a proprio piacere, se siete su WordPress basterà analizzare il codice o con Web Developer Toolbar o Firebug, o accedendo alla bacheca > design > editor temi > comments.php o single.php a seconda del tema. In genere su wordpress gli ID sono questi: #author, #email, #url, #comment ma non sempre, dipende sempre dal tema.

Dopo di che accedi al foglio di stile css e ricerca tra il testo gli ID, e modifica il codice di ogni elemento. Come esempio ecco il codice utilizzato dal form di questo Blog, che può essere liberamente riutilizzato semplicemente cambiando l’immagine di sfondo.

#commentform {width:388px; text-align:left; padding:35px 5px; background:url(images/backcommenti.jpg) no-repeat; color:#cc0000; font-size:14px; font-family:Arial, Helvetica, sans-serif }
#author, #email, #url {width:200px; height:20px; line-height:20px; border:1px solid #0066cc; background-image:url(images/input.jpg); font-size:14px; padding:2px}
#comment  {width:350px; height:200px; border:1px solid #0066cc; background:url(images/textarea.jpg);}

Mentre per quanto riguarda al codice Html non c’è nessuna modifica.

Due Design da utilizzare per tutti Gratis

Per i più pigri ecco due Design da scaricare e utilizzare liberamente.

Design Form #1

#commentform {width:400px; text-align:left; padding:35px 5px; background: url(http://noizexperience.com/design/backcommenti002.jpg) no-repeat; color:#FFFFFF; font-size:14px; font-family:Arial, Helvetica, sans-serif }
#author, #email, #url {width:200px; height:20px; line-height:20px; border:1px solid #ccc; background-image:url(http://noizexperience.com/design/input.jpg); font-size:14px; padding:2px}
#comment  {width:350px; height:200px; border:1px solid #ccc;}

Design Form #2

#commentform {width:400px; text-align:left; padding:35px 5px; background: url(http://noizexperience.com/design/backcommenti001.jpg) no-repeat; color:#FFFFFF; font-size:14px; font-family:Arial, Helvetica, sans-serif }
#author, #email, #url {width:200px; height:20px; line-height:20px; border:1px solid #fff; background-image:url(http://noizexperience.com/design/input.jpg); font-size:14px; padding:2px}
#comment  {width:350px; height:200px; border:1px solid #fff;}