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 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.

A demo of creating Contact Us form

You may modify the markup and CSS for creating some other form as per requirement 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

See online demo and code

The following markup is used in above example for contact us sliding form:

 

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