In this tutorial we are going to learn how to create fancy looking feedback form which slides from the right/left side of your web page. I am sure there are many plugins available for CMS like Joomla, WordPress but it’s always a good idea to code something of your own. Certainly, you require this code when you are developing everything at your own and not using any kind of CMS. So let’s see how it actually works!
Watch Live Demo | Download Source Code
Theoretically here is what we are going to do. We will have a form and button side by side placed inside a div. This div is going to have a fixed position and we will have to position it in such a way that only the button is visible to the user. Once user clicks on that button the who form can be shown using jQuery’s animation function using which we will change the position of the absolute div. Now let’s see how it is done.
<div id="feedback"> <form> <h2>We Love Emails, Do you?</h2> <p><label>Name: </label><input type="text" /></p> <p><label>Email: </label><input type="text" /></p> <p><label>Subject: </label><input type="text" /></p> <p><label>Message: </label><textarea></textarea></p> <p><input type="button" value="Send»" class="btn"/></p> </form> <a href="#" class="pull_feedback" title="Click to leave feedback">Feedback</a> </div>
In the HTML code, we simply define the form inside the div containing id feedback. This is the only HTML we require and there is nothing special that needs to be done in the HTML, it’s simple HTML form and other input element tags. Yes of course, there is the Anchor tag, which is style as the Feedback Button using the CSS (defined inside style.css)