Modulo di contatto con CSS3

Una delle sezioni più importanti di qualsiasi sito Web è il modulo di contatto, che può essere semplice come aggiungere alcuni semplici campi e un pulsante per inviare queste informazioni inserite, ma possiamo sempre andare un po' oltre e se siamo creativi, implementare un modulo di contatto che non solo soddisfa la sua funzionalità intrinseca, ma fornisce anche un effetto visivo e intuitivo.

Vediamo quindi i passaggi da seguire per l'implementazione di questo form che simulerà una busta che al passaggio del cursore del mouse permetterà all'utente di compilare i dati all'interno di quella che sarà una lettera, e tutto questo con l'utilizzo di HTML sì CSS3.

Beni o risorse

Per prima cosa dobbiamo avere la nostra busta dove andrà la nostra lettera, per questo useremo due immagini diverse, una dalla parte superiore della busta e un'altra dal basso, che combinate con le transizioni ci daranno l'effetto che vogliamo.

Come possiamo vedere, non sono affatto complicate, tuttavia, queste immagini sono nel repository creato per questo esempio che troverai alla fine del tutorial nel link corrispondente per il download.

Costruzione della forma

Creeremo prima un file HTML che verrà chiamato contact_form.html che conterrà il nostro modulo in quanto tale e l'inclusione del file .css che si occuperà di gestire i suoi stili e le transizioni, vediamo come si presenta:

 Modulo di Contatto
Ciao!
Messaggio:
Inserisci i tuoi dati
Nome: E-mail:

Ora dobbiamo solo creare il nostro .css chiamato stili.css e lì posizioniamo gli stili per la nostra forma e usiamo le transizioni per generare l'effetto desiderato, prima cambieremo un po' l'aspetto del nostro corpo per dargli l'aspetto di una lettera:

 body {background: #ccc url ('img / bg_carta_fuera.png.webp'); colore: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; margine: 20px automatico 0; altezza: 1000 px;} h1 {margine inferiore: 20 px; text-align: center, font-size: 48px; text-shadow: 0 1px 0 # ede8d9; }

Una volta fatto ciò, implementeremo le transizioni nel div che contiene il modulo che useremo per questo transizione nelle sue diverse varianti per ogni browser e con il valore facilità d'uscita Ti daremo l'effetto di un inizio e una fine lenti:

 #form_wrap {overflow: nascosto; altezza: 446px; posizione: relativa; in alto: 0px; -webkit-transition: tutti 1s easy-in-out .3s; -moz-transition: tutti 1s easy-in-out .3s; -o-transizione: tutti 1s easy-in-out .3s; transizione: tutti 1s easy-in-out .3s;}

Ora con gli pseudo elementi Prima sì dopo di completeremo l'effetto della lettera che esce dalla busta, vediamo:

 #form_wrap: prima di {content: ""; posizione: assoluta; in basso: 128 px, a sinistra: 0 px; sfondo: url ('img / prima.png.webp'); larghezza: 530 px; altezza: 316 px;} #form_wrap: after {content: ""; posizione: assoluta; in basso: 0px, a sinistra: 0; sfondo: url ('img / after.png.webp'); larghezza: 530 px, altezza: 260 px; }

Infine, aggiungiamo alcuni stili al pulsante di invio per controllare sia la visualizzazione che gli effetti su di esso:

 #form_wrap input [type = submit] {position: relative;font-family: 'helvetica'; dimensione del carattere: 24px; color: # 7c7873;text-shadow: 0 1px 0 #fff; larghezza: 100%; allineamento testo: centro, opacità: 0; sfondo: nessuno; cursore: puntatore; -moz-border-radius: 3px; -webkit-border-radius: 3px; raggio di confine: 3px; -webkit-transition: opacità .6s facilitato in 0s; -moz-transition: opacità .6s easy-in-out 0s; -o-transizione: opacità .6s facilità di ingresso-uscita 0; transizione: opacità .6s facilità di ingresso-uscita 0; } #form_wrap: hover input [type = submit] {z-index: 1;opacity: 1; -webkit-transition: opacità .5s easy-in-out 1.3s; -moz-transition: opacità 0,5 s facilità di uscita 1,3 s; -o-transizione: opacità 0,5 secondi facilità di ingresso e uscita 1,3 secondi; transizione: opacità 0,5 sec. facilità di uscita 1,3 sec;}

Quindi vediamo come appare il nostro modulo di contatto iniziale quando lo eseguiamo nel browser:

INGRANDIRE

Se passiamo il cursore del mouse su di esso, vedremo la funzionalità che il modulo viene visualizzato per poter inserire i dati e inviare:

INGRANDIRE

Come possiamo vedere, la costruzione di questo modulo è stata abbastanza semplice e la cosa migliore è che non siamo legati a nessuna libreria esterna quindi la sua implementazione è abbastanza semplice su qualsiasi sito Web, non resta che estendere l'esempio ed eseguire il funzionalità dell'invio utilizzando un linguaggio di programmazione, come PHP, Rubino, Pitone o anche Nodo.js.