How To Create Bootstrap Feedback Form - Freewebmentor

Tutorials

Interview Q&A

Library

Live Demos

More

 Start WordPress

Search on freewebmentor...

How To Create Bootstrap Feedback Form By: Prem Tiwari | Last Updated: August 24, 2017 | In: Bootstrap, HTML & CSS, Web Technologies

Every website has one feedback form to get the feedback from websites user or get customer’s feedback for your businesses. It will improve your service quali es or your website func onali es. Today, I am going to share the very useful tutorial with you which will help and let you know how to create bootstrap feedback form with an example.

At the end of this tutorial, I have shared a link to download the complete feedback form which builds with twi er bootstrap framework.

How to Create Bootstrap Feedback Form Please read this tutorial very carefully in order to create feedback from your website using the bootstrap framework. Please make sure you have included the bootstrap CSS and jQuery file in your HTML file before head tag closed. If you have not included, then this will not work like as described. Add the below code before head tag closed.

1 2 3

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

CSS Code Create a style.css file and copy paste below CSS code into it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

.form-control{ background: transparent; } form { width: 320px; margin: 20px; } form > div { position: relative; overflow: hidden; } form input, form textarea { width: 100%; border: 2px solid gray; background: none; position: relative; top: 0; left: 0; z-index: 1; padding: 8px 12px; outline: 0; } form input:valid, form textarea:valid { background: white; } form input:focus, form textarea:focus { border-color: #357EBD; } We use cookies to ensure thatform we give you the best experience form input:focus + label, textarea:focus + label and { deliver relevant ads based on your interest, by using our website, you acknowledge that you have read our privacy policy.

Ok

Privacy policy

33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

background: #357EBD; color: white; font-size: 70%; padding: 1px 6px; z-index: 2; text-transform: uppercase; } form label { -webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; position: absolute; color: #999; padding: 7px 6px; font-weight: normal; } form textarea { display: block; resize: vertical; } form.go-bottom input, form.go-bottom textarea { padding: 12px 12px 12px 12px; } form.go-bottom label { top: 0; bottom: 0; left: 0; width: 100%; } form.go-bottom input:focus, form.go-bottom textarea:focus { padding: 4px 6px 20px 6px; } form.go-bottom input:focus + label, form.go-bottom textarea:focus + label { top: 100%; margin-top: -16px; } form.go-right label { border-radius: 0 5px 5px 0; height: 100%; top: 0; right: 100%; width: 100%; margin-right: -100%; } form.go-right input:focus + label, form.go-right textarea:focus + label { right: 0; margin-right: 0; width: 40%; padding-top: 5px; }

HTML Code Create feedback.html and add below HTML code into it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="container"> <div class="row"> <form role="form" class="col-md-9 go-right"> <h2>Feedback Form</h2> <p>We welcome for your feedback and we will try to implement it into our website.</p> <div class="form-group"> <input id="name" name="name" type="text" class="form-control" required> <label for="name">Your Name</label> </div> <div class="form-group"> <input id="email" name="email" type="email" class="form-control" required> <label for="email">Email Address</label> </div> <div class="form-group"> <input id="phone" name="phone" type="tel" class="form-control" required> <label for="phone">Primary Phone</label> </div> <div class="form-group"> <textarea id="message" name="phone" class="form-control" style="height: 150px" required></textarea> <label for="message">Message</label> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div> </div>

The above form will look like the below screenshot. download the complete tutorial by using the below link.

We use cookies to ensure that we give you the best experience and deliver relevant ads based on your interest, by using our website, you acknowledge that you have read our privacy policy.

Ok

Privacy policy

Only 2 pages have been converted.

Please go to https://docs.zone and Sign Up to convert all pages.