I moduli di contatto sono una parte indispensabile di ogni sito web. Sono per lo più implementati su una pagina separata e raramente mostrano creatività, anche se ci sono molti modi per migliorare il loro stile visivo. In questo tutorial vedrai come creare un modulo di contatto slide-in dinamico usando jQuery.

Vediamo cosa stiamo cercando di ottenere con questo tutorial. L'immagine sotto mostra il layout del nostro obiettivo. Nell'angolo in alto a destra del contenuto è? Contattaci? collegamento. Quando l'utente fa clic su di esso, il modulo di contatto scorrerà verso il basso. Quando l'utente invia il modulo, riceverà un messaggio che informa che il suo messaggio è stato inviato con successo e in due secondi l'intero modulo scorrerà verso l'alto.

Nota: puoi rendere questo modulo perfettamente funzionante aggiungendo la convalida e un codice reale che invia l'email.

Guarda la demo e scarica qui il codice sorgente completo.

La struttura

Spieghiamo prima la struttura.

Nome * Indirizzo email * Messaggio * <textarea id="?Message?" rows="?3"" cols="?20""> Il tuo messaggio è stato inviato con successo!

Logo della compagnia

?

Il codice CSS

Abbiamo? ContactForm? e? contactLink? div all'interno del? contactFormContainer? che è posizionato assolutamente. ContactForm contiene elementi del modulo e contactLink attiverà il nostro modulo di contatto al clic. Abbastanza semplice, giusto? Il codice CSS renderà questo più chiaro:

#contactFormContainer {position: absolute; a sinistra: 600px; float: right; } #contactForm {height: 277px; larghezza: 351px; background-image: url ( 'bkg.jpg'); display: none; } #contactForm fieldset {padding: 30px; border: none; } #contactForm label {display: block; color: # ffc400; } #contactForm input [type = text] {display: block; border: solid 1px # 4d3a24; width: 100%; margin-bottom: 10px; altezza: 24px; } #contactForm textarea {display: block; border: solid 1px # 4d3a24; width: 100%; margin-bottom: 10px; } #contactForm input [type = submit] {background-color: # 4d3a24; border: solid 1px # 23150c; color: # fecd28; padding: 5px; } #contactLink {height: 40px; larghezza: 351px; background-image: url ( 'slidein_button.png'); blocco di visualizzazione; cursor: pointer; } #messageSent {color: # ff9933; display: none; }

Facciamo scorrere la gente!

E per farlo funzionare, dobbiamo aggiungere un tocco di jQuery.

$ (document) .ready (function () {$ (? # contactLink?). click (function () {if ($ (? # contactForm?). è (?: hidden?)) {$ (? # contactForm? ) .slideDown (? slow?);} else {$ (? # contactForm?). slideUp (? slow?);}});}); function closeForm () {$ (? # messageSent?). show (? slow?); setTimeout ('$ (? # messageSent?). hide (); $ (? # contactForm?). slideUp (? slow?)', 2000); }

Lasciatemi spiegare brevemente il codice sopra. Cliccando su #contactLink div si alternerà la visibilità del modulo di contatto. Una volta che l'utente invia il modulo, un messaggio? Il tuo messaggio è stato inviato con successo !? apparirà e l'intero modulo scorrerà fino al suo stato originale.

Guarda la demo e scarica qui il codice sorgente completo.

Perché tutto questo?

Questo è solo un esempio di come puoi migliorare l'esperienza utente aggiungendo contenuti dinamici alle tue pagine. Oltre a un modulo di contatto, puoi creare un modulo di accesso scorrevole, un modulo di ricerca o qualsiasi altra cosa che ritieni possa migliorare l'esperienza dell'utente.

C'è qualcosa che potrebbe essere fatto meglio? Conosci qualche altro modo per farlo? Condividi alcuni esempi!