Come creare una forma di contatto in html e css

In questo articolo vediamo come creare un modulo di contato per un sito web. Useremo elementi principali di un form e vediamo di posizionarli per rendere la nostra forma bella e compatta. Cosi potrai approfondire di come è fatta una web forma e come potresti sempre adattarla allo stile generale del tuo sito.

Semplice ma bella forma di contatto in CSS e HTMl

Quindi prima di tutto dovremo creare la carcassa della nostra forma in html

Markup html

Non ho inventato nulla di nuovo, tutto come in una forma standard, tranne che per raggruppare elementi ho usato tag <fieldset> e <label> per creare collegamento  con gli elementi del modulo.

<form id="form" action="/" method="post">
   <h2>Scriveteci!</h2>
<fieldset>
   <p>
    <label for="name">* Nome</label>
    <input type="text" name="name" id="name" size="30" />
   </p>
   <p>
   <label for="email">* Email</label>
   <input type="text" name="email" id="email" size="30" />
   </p>
   <p>
   <label for="web">Sito web (non é obligatorio)</label>
   <input type="text" name="web" id="web" size="30" />
   </p>
</fieldset>
<fieldset>                                                                                                                                                      
   <p>
   <label for="message">* Messsaggio:</label>
   <textarea name="message" id="message" cols="30" rows="10"></textarea>
  </p>                                                          
</fieldset>     
  <p class="submit"><button type="submit">Inviare</button></p>                        
</form>

 

Come titolo della forma di contatto, come esempio, è stata inserita una frase casuale. Puoi in seguito modificare  l'intestazione, inserire un'immagine o cancelare completamente l'intestazione, rimuovendo i tag <h2> </ h2> dal layout.
Markup  HTML del modulo di contatto è pronto, resta da posizionare, secondo le nostre idee, tutti gli elementi principali di esso come <form>, <fieldset>, <input>, <textarea> e <button> e decorarli correttamente coi CSS.

 

Stili  CSS del modulo di contatto

 

Con l'aiuto di eccellenti strumenti di CSS3, creeremo una illusione di un'immagine  tridimensionale. Aggiungendo le ombre interne ed esterne con box-shadow , usando la proprietà border-radius , arrotondimo  uniformemente gli angoli degli elementi del modulo, e con aiuto di linear-gradient creeremo un pulsante piacevole.

Tutti gli stili necessari con commenti:

#form{
    border: 1px solid #D3D3D3;
    background: none repeat scroll 0 0 #FFFFFF;
/* arrotondiamo angoli */
   
    border-radius:8px;
/* ombre del bloco*/
    
    box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 10px;
    text-align: left;
/* impostiamo la larghezza della forma a seconda della nostra idea 
 ** la nostra forma sara adattiva  */
    width: 100%;
    max-width: 600px;
}
#form h2{
/* stilizare titolo della forma 
 ** colore grandezza e famiglia del font  */         
    border-bottom: 1px dashed #CCCCCC;
    color: #3F647F;
    font: 24px Monotype Corsiva,Arial;
    margin: 10px 26px;
    padding: 0 5px 10px 0;
/* aggiungo ombra al testo */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
#form fieldset{
/* formattiamo blocchi al interno della forma  */
    margin:0;
    padding:0;
    border:none;        
    float:left;
    display:inline;
    margin-left:26px;
}
/* formattiamo intestazioni  delle input */   
#form label{display:block;color:#5B5B5B;margin-bottom:1px;}     
#form input, #form textarea{
    font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
    color:#6B6B6B;
/* eliminiamo bordi nel input */
    border: none;
/* arrotondiamo angoli degli input  */
    
    border-radius:.3em;         
    background-color: #F7F7F7;
    padding:3px;
/* aggiungere ombre interne a input e aria di testo grande*/
    
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
    color: #5B5B5B;
}
#form input {
/* impostiamo larghezza del aria d'input */
    width:224px;
}
/* Modifichiamo stilizzazione dei campi d'input al passaggio del mouse */
#form input:focus, #form textarea:focus {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
    background: #F2F2F2;
    color: #333;
}
#form textarea{
/* larghezza del campo per il messaggio */
    width:286px;
    height:120px;
    overflow:auto;
}
/* formattiamo parte bassa della forma  */                                     
#form .submit{
    clear:both;
    padding: 0px 25px 20px;
    margin:0;
    float:right;
}
/* stilizzazione del bottone invia */ 
#form button{
/* grandezza del bottone */
    width:120px;
    line-height:28px;
/* ombre esterne */
    
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: solid 1px #2f96b4;
/* arrotondare angoli del bottone */
    border-radius: 5px;
    background-color: #49AFCD;
/* sfondo a gradiente */     
    background-image:linear-gradient(center top , #5BC0DE, #2F96B4);
    color:#fff;
    cursor:pointer;
    text-align:center;
}
/* cambio dello stile del bottone al passaggio del mouse */
#form button:hover {
    border-color: #2C8BA5;
    box-shadow: none;
}
/* Cambiare stile del bottone quando sara premuto  */
#form button:active {
    background-image:linear-gradient(#2F96B4, #5BC0DE); 
    border-bottom: 1px solid #5BC0DE;
/* ombre interne*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
}

Scriveteci!

Questo è tutto. Come puoi vedere, non c'é niente di complicato.
Sperimentando con i parametri delle proprietà, puoi facilmente ridisegnare il layout del modulo di feedback. Rendilo attraente e memorabile, rafforzando ulteriormente la comunicazione con tutti i tuoi utenti.
     

Vorrei anche notare, per l'ennesima volta, che  la forma presentata è semplicemente  la parte visiva di una forma e per far funzionare realmente una forma di iscrizione (che invia  dati in essa inseriti ) ci vuole un interprete, basato in PHP.

Su internet ne trovi tantissimi esempi di questi interpreti. E solo dopo aver collegato uno di questi elementi alla tua forma essa diventa funzionante. Abbimo anche noi spiegato come funziona questo interprete nella nostra lezione dedicata al linguaggio HTML per scoprire  di piu cliccare questo link

Letto 618 volte