Bootstrap Feedback/Contact Sliding Form by using jQuery

The sliding form using Bootstrap

In this tutorial, I am going to use a jQuery plug-in with Bootstrap framework for creating the sliding form that you may use for feedback or any other purpose like subscriptions, etc.

The plug-in name is bootstrap-feedback-form. You need to include the JS and CSS files of this plug-in in your web pages.

The sliding form can be really useful for increasing customer/visitor’s feedback or getting subscriptions etc. as such the caption goes across the website as user scrolls down or up. Have a look at the demos for using this Bootstrap form sliding from the left towards the right along with code and setting up guide.

A demo of creating sliding Bootstrap feedback form

Click the demo link or image below for the sliding form demo. For setting up this form, you need to include the jQuery library along with Bootstrap and plug-in JS files. In the <head> section, include the CSS files of Bootstrap and bootstrap-feedback-form plug-in CSS file.

jQuery form sliding

See online demo and code

First of all, include the CSS of plug-in and Bootstrap:

                <link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” />

<link rel=”stylesheet” href=”css/jquery-feedback/feedback.css” />

The feedback.css specifies the position of caption like “Feedback” and form properties.

Above the </body> tag, place the JS files:

                <script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>

<script src=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js”></script>

<script src=”js/jquery-feedback/feedback.js”></script>

The markup section contains the form tag and required controls like email and message in the demo. See the complete code in the demo page.

An example of creating the Contact Us form

You may modify the markup and CSS for creating some other form as per the requirements of the website. In this demo, a Contact Us form is created with more fields like Name, Email, Subject and Message while CSS properties in the feedback.css file are changed accordingly to accommodate more fields. Have a look:

Bootstrap form contact

The following markup is used in the example for the “Contact Us” sliding form:

<div id="feedback">
   <div id="feedback-form" style='display:none;' class="col-xs-4 col-md-4 panel panel-default">
    <form method="POST" action="/feedback" class="form panel-body" role="form">
        <div class="form-group">
         <input class="form-control" name="yname" autofocus placeholder="Your Name" type="email" />
             </div>
               <div class="form-group">
                   <input class="form-control" name="email" placeholder="Your e-mail" type="email" />
              </div>
              <div class="form-group">
                  <input class="form-control" name="subject" placeholder="Subject" type="email" />
              </div>                               
              <div class="form-group">
                  <textarea class="form-control" name="body" required placeholder="Please write your feedback here..." rows="5"></textarea>
              </div>
                   <button class="btn btn-primary pull-right" type="submit">Send</button>
        </form>
              </div>
       <div id="feedback-tab">Contact Us</div>
</div>

 

For that, I also copied the plug-in CSS file and renamed it to contactus.css, and modified a few properties in #feedback-form.

 

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️