Slide in contact form

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.

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:

Let’s slide folks!

And to make this work, we have to add a touch of jQuery.

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: