Note: You can make this form fully functional by adding validation and some real code that sends the email.
Check out the demo and download full source code here.
The structure
Let’s explain the structure first.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class=”box”> <div id=”contactFormContainer”> <div id=”contactForm”> <fieldset> <label for=”Name”>Name *</label> <input id=”name” type=”text” /> <label for=”Email”>Email address *</label> <input id=”Email” type=”text” /> <label for=”Message”>Your message *</label> <textarea id=”Message” rows=”3″ cols=”20″></textarea> <input id=”sendMail” type=”submit” name=”submit” onclick=”closeForm()” /> <span id=”messageSent”>Your message has been sent successfully!</span> </fieldset> </div> <div id=”contactLink”></div> </div> <div class=”header”> <h1> Company logo</h1> </div> … </div> </div> |
The CSS Code
We have “contactForm” and “contactLink” divs inside the “contactFormContainer” which is positioned absolutely. ContactForm contains form elements, and contactLink will toggle our contact form on click. Simple enough, right? The CSS code will make this clearer:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | #contactFormContainer { position:absolute; left:600px; float:right; } #contactForm { height:277px; width: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; height: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; width:351px; background-image:url(’slidein_button.png’); display:block; cursor:pointer; } #messageSent { color:#ff9933; display:none; } |
Let’s slide folks!
And to make this work, we have to add a touch of jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(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); } |
Let me briefly explain the code above. Clicking on #contactLink div will toggle contact form visibility. Once user submits the form, a message “Your message has been sent successfully!” will appear and the entire form will slide up to its original state.
Check out the demo and download full source code here.
Why all of this?
This is just a sample of how you can improve user experience by adding dynamic content to your pages. Besides a contact form, you can create a slide-in login form, search form or anything that you think will improve the user experience.
Is there anything that could be done better? Do you know any other way of doing this? Share some examples!
For more related resources:
- Get up to 35 free images from Bigstock.
- Complimentary video clips on Bigstock. Get up to 35 videos in a week.
