jQuery & CSS: how to create a feedback slider

Tweet

Today we are going to create a simple feedback slider using jQuery and CSS. I suppose you've seen many sliders on recently created web sites. They are used to make short forms or generic information slide over a page when a button is pressed. The slider (or tab if you prefer) can be placed where we need it and it can be styled the way we prefer.

We will create an example just to understand the basics behind it. Something like:

A form will slide down when the "feedback" button is pressed.

The jQuery part

Let's start with the jQuery part. We need to link to the library and add a short snippet used to animate the slider when the button is pressed:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".button-slide").click(function(){
    $(".feedback").slideToggle("slow");
    return false;
  });
});
</script>

Nothing's special here. Remember to add the above in the head of your document.

The CSS

We will give a proper style to every single piece of the slider. We have a container (everything's inside it), the feedback div (where the form is), the button (needed to start the sliding) and the <a> tag (we style it so that all unnecessary decorations will not get in the way). Again, add the following in the head of your document:

<style type="text/css">
.container {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 250px;
  z-index: 1;
  text-align: center;
}
.feedback {
  display: none;
  border: solid 4px #006699;
  background-color: #DEDEDE;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
a.button-slide {
  display: block;
  width: 120px;
  padding: 2px;
  margin: 0 auto;
  background-color: #006699;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
</style>

The HTML

Finally we create the container and all the rest. Put the following code where you prefer (in the body section of your document):

<div class="container">
  <div class="feedback" align="center">
  <form id="form" name="form" method="post" action="">
  <p>
    <label>E-mail:<br />
    <input type="text" name="email" size="25" /></label>
  </p>
  <p>
    <label>Message:<br />
    <textarea name="msg" rows="5" cols="23"></textarea></label>
  </p>
  <p>
    <input type="submit" name="feedbackSubmit" value="Send" />
  </p>
  </form>
  </div>
  <a href="#" class="button-slide">Feedback</a>
</div>

And that's all. If we want to change the position of the slider, we have to change the container style

Load your page and click on the "Feedback" button.