I form di contatto sono una parte fondamentale di un sito web! Di solito vengono realizzati in una pagina separata e raramente si tende a migliorarne la grafica anche se ci sono molti modi per farlo!

In questo piccolo tutorial viene spiegato come creare in modo dinamico un modulo di contatto slide-in con JQuery.

La struttura:

                        Name *

                        Email address *

                        Your message *
                        

                        Your message has been sent successfully!




                Company logo


…

Il codice CSS:

# contactFormContainer
              (
                 position: absolute;
                 left: 600px;
                 float: right;
              )
              # contatto
              (
                 height: 277px;
                 width: 351px;
                 background-image: url ( 'bkg.jpg');
                 display: none;
              ) 

  # contatto fieldset
              (
                 padding: 30px; 

  border: none;
              )
              # etichetta di contatto
              (
                 display: block;
                 color: # ffc400;
              )
              # contatto input [type = text]
              (
                 display: block;
                 border: 1px solid # 4d3a24;
                 larghezza: 100%;
                 margin-bottom: 10px;
                 height: 24px;
              )
              # contatto textarea
              (
                 display: block;
                 border: 1px solid # 4d3a24;
                 larghezza: 100%;
                 margin-bottom: 10px;
              )
              # contatto input [type = presentare]
              (
                 background-color: # 4d3a24;
                 border: 1px solid # 23150c;
                 color: # fecd28;
                 padding: 5px;
              )
              # contactLink
              (
                 height: 40px;
                 width: 351px;
                 background-image: url ( 'slidein_button.png');
                 display: block;
                 cursore: puntatore;
              )
              # messageSent
              (
                 color: # ff9933;
                 display: none;
              )

E per finire un tocco di JQuery

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

Via: | Design Shack |