Forme di contatto in toni scuri e chiari

Il modulo di feedback, o  diversamente il modulo di contatto, è uno degli elementi più usati in  siti web. E, naturalmente, come tutti gli altri elementi dell'interfaccia utente i moduli di contatto devono essere in qualche modo stilizzati e decorati  per attirare l'attenzione degli utenti ed invitare  alla comunicare.

In questo articolo ti propongo un paio di forme di contatto proni al uso realizzati elusivamente in  CSS3, senza utilizzare immagini aggiuntive nel design. Niente di eccessivo, solo brevi frammenti di codice (snippet) CSS per le forme di contatto, realizzati in toni chiari e scuri.

1. Modulo di contatto in toni scuri

A seconda del colore dello sfondo della pagina principale, il colore di base dello sfondo del modulo stesso si cambierà . Le dimensioni della forma dipendono dalla dimensione del contenitore in cui verrà posizionata la forma.

Esempio

 

Markup HTMl della forma

 

Markup Html del modolo e semplice e solito, campi di input necessari e il pulsante "Invia",  e per il collegare con stili  CSS, ad ogni elemento del modulo è assegnata una certa classe, nulla di complicato, non sarà difficile da capire.

<form>
    <input name="name" placeholder="Inserire nome!" class="name" required />
    <input name="emailaddress" placeholder="Inserire email!" class="email" type="email" required />
    <textarea rows="4" cols="50" name="subject" placeholder="Inserire messaggio:" class="message" required></textarea>
    <input name="submit" class="btn" type="submit" value="Inviare" />
</form>

 

Stili CSS

Non entro nel profondo, noterò solo una cosa, ho usato solo proprietà CSS3 come gradiente lineare, effetto ombra, angoli leggermente arrotondati, ecc., Ho cercato di ottenere una certa compatibilità cross-browser per queste proprietà.

/* Stili di base della forma  */
form {
    margin: 0 auto;
    max-width: 95%;
    padding: 30px 30px 6px 30px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 5px;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden; 
}
/* Campo del messaggio */
textarea{
    background: rgba(255, 255, 255, 0.4); 
    width: 90%;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 4px;
    background-clip: padding-box; 
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    font-weight: 300;
    color:#fff;
    padding-left:25px;
    padding-right:20px;
    padding-top:12px;
    margin-bottom:20px;
    overflow:hidden;
}
/* Campo d'input */
input {
    width: 90%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 4px;
    background-clip: padding-box; 
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    font-weight: 300;    
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
}
input[type=submit] {
    cursor:pointer;
}
input.name {
    background: rgba(255, 255, 255, 0.4); 
    padding-left:25px;
}
input.email {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
input.message {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
::-webkit-input-placeholder {
    color: #fff;
}
:-moz-placeholder{ 
    color: #fff; 
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {  
    color: #fff; 
}
input:focus, textarea:focus { 
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden; 
}
/* Stili del bottone di invio  */
.btn {
    width: 138px;
    height: 44px;
    border-radius: 4px;
    float:right;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    padding: 10.5px 21px;
    border-radius: 6px;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}
.btn:hover {
    border: 1px solid #253737;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }
.btn:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    outline: none;
}

 

2. Modulo di contatto in colori chiari

 

La seconda versione del modulo di feedback è fatt in base di colori chiari, le dimensioni della forma (larghezza, altezza), come nella prima variante, non sono fisse e si adattano facilmente alle dimensioni del contenitore in cui verrà posizionata questa forma.

 

Markup HTML

 

Come nella prima variante, la struttura Html del modulo di contatto è standard, elementi standart di una di forma con determinate classi  CSS.

<form >
   <input name="name" placeholder="Inserire nome !" class="textbox" required />
   <input name="emailaddress" placeholder="Inserire e-mail!" class="textbox" type="email" required />
   <textarea rows="4" cols="50" name="subject" placeholder="Inserire massaggio:" class="message" required></textarea>
   <input name="submit" class="button" type="submit" value="Inviare" />
</form>

 

Stili CSS

 

Per impostare le dimensioni di base delle forme e degli elementi interni, ho usato i valori percentuali per la larghezza rispetto contenitore, in modo che la forma si adatti facilmente alle dimensioni del contenitore in cui verrà posizionata. Colori del pulsante "Invia", le sue dimensioni e i layout, sono  facilmente modificabili, è sufficiente sperimentare determinati valori.

/* Stili di base */
form{
  margin:0 auto;
  max-width:95%;
  box-sizing:border-box;
  padding:40px;
  border-radius:5px; 
  background:RGBA(255,255,255,1);
  -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
  box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);  
}
/* Stili delle arie di input */
.textbox{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 2px solid;
  box-sizing:border-box;
  font-family: 'Open Sans', sans-serif;
  font-size:18px; 
  padding:10px;
  margin-bottom:30px;  
}
.message:focus,
.textbox:focus{
  outline:none;
   border:rgba(24,149,215,1) 2px solid;
   color:rgba(24,149,215,1);
}
/* Stili del'aria del messaggio */
.message{
    background: rgba(255, 255, 255, 0.4); 
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 2px solid;
    box-sizing:border-box;
    -moz-border-radius: 3px;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    display:block;
    padding:10px;
    margin-bottom:30px;
    overflow:hidden;
}
/* Stili di base del bottone  */
.button{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 0px solid;
  box-sizing:border-box;
  padding:10px;
  background:#90c843;
  color:#FFF;
  font-family: 'Open Sans', sans-serif;  
  font-weight:400;
  font-size: 16pt;
  transition:background .4s;
  cursor:pointer;
}
/* Cambio dello sfondo del bottone al passaggio del mouse */
.button:hover{
  background:#80b438;
}

 

Ci sono tantissimi varianti di moduli di contatto, la cosa principale è di avere un po 'di immaginazione e conoscenze le  basi dei CSS.
Sulle pagine del mio blog, puoi trovare altre soluzioni già pronte di moduli di feedback .

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 389 volte