How to Create Feedback Form in HTML, CSS and Jquery | Responsive Feedback Page

In this tutorial, you will learn how to create a responsive feedback page using HTML, CSS, Bootstrap, and jQuery.

How to Create Feedback Form in HTML, CSS and Jquery | Responsive Feedback Page in HTML, Bootstrap

In this tutorial, you’ll learn how to create a professional and responsive feedback form using HTML, CSS, Bootstrap 3, and jQuery. A feedback form is an essential feature for any website, allowing visitors to share their opinions, suggestions, or inquiries. With the help of Bootstrap and jQuery, we’ll design a modern feedback page with validations that works perfectly on all devices.

We’ll build a clean and user-friendly form that includes input fields for Name, Email, and Message, along with a submit button. jQuery will be used to add form validations, ensuring users enter the correct details before submitting.

Features of the Feedback Form

Built with HTML, CSS, Bootstrap 3, and jQuery
Fully responsive design for all screen sizes
Includes form validations for better user experience
Clean, modern, and professional layout
Beginner-friendly project, easy to customize

What You’ll Learn

How to structure a feedback form using HTML & Bootstrap 3 components
How to style the form with CSS for a professional look
How to add form validations using jQuery
How to build a responsive feedback page that adapts to mobile, tablet, and desktop
How to integrate the form into any website or project

Let's Start HTML:

                            
                                <!DOCTYPE html>
<html>

<head>
	<title>Responsive FeedBack Form in Bootstrap 3</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container">
		<form>
			<br>
			<div class="col-md-3"></div>


			<div class="col-md-6">

				<div class="head1">
					<h2>Send us Your feedback!</h2>
				</div>
				<br><br>
				<p>Did you achieve your goal?</p>
				<div class="row">
					<div class="col-md-4" id="select1">
						<h4>Yes</h4>
					</div>
					<div class="col-md-4" id="select2">
						<h4>Partially</h4>
					</div>
					<div class="col-md-4" id="select3">
						<h4>No</h4>
					</div>
				</div>
				<br>
				<p>What was the reason for your visit?</p>
				<div class="row">
					<div class="col-md-12">
						<select class="form-control">
							<option selected disabled="">Select</option>
							<option>Pricelist Request</option>
							<option>For Info</option>
							<option>Other reason</option>

						</select>
					</div>
				</div>
				<br>
				<p>What was the reason you could not achieve your goal?</p>
				<div class="row">
					<div class="col-md-12">
						<select class="form-control">
							<option selected disabled="">Select</option>
							<option>The form doesn't work well</option>
							<option>I dont have a answer</option>
							<option>Other reason</option>

						</select>
					</div>
				</div>

				<br>
				<p>Do you have any suggestion to make our website better?</p>
				<textarea class="form-control" required=""></textarea>
				<br><br>
				<center>
					<button class="btn btn-info">Submit</button>
				</center>
				<br><br>
		</form>
	</div>

	<div class="col-md-3"></div>
	</div>

</body>
</html>

Let's Design using CSS.

                            
                                <style>
	.col-md-6 {
		background-color: #ebe8e8;
	}

	p {
		font-size: 15px;
	}

	.head1 {
		background-color: #0485e0;
		height: 50px;
	}

	.head1 h2 {
		color: #fff;
		font-family: monospace;
		line-height: 45px;
		text-align: center;

	}

	#select1 h4,
	#select2 h4,
	#select3 h4 {
		background-color: #fff;
		color: #000;
		height: 40px;
		text-align: center;
		line-height: 38px;
		cursor: pointer;
		border: 1px solid #ccc;

	}

	.btn-info {
		background-color: #0485e0;
		color: #fff;
		font-family: monospace;
		font-size: 17px;
	}
</style>

Let's Write JQuery.

                            
                                <script>
	$(document).ready(function () {
		$("#select1").click(function () {
			$("#select1 h4").css("background-color", "#0485e0");
			$("#select1 h4").css("color", "#fff");
			$("#select2 h4").css("background-color", "#fff");
			$("#select2 h4").css("color", "#000");
			$("#select3 h4").css("background-color", "#fff");
			$("#select3 h4").css("color", "#000");


		});
	});

	$(document).ready(function () {
		$("#select2").click(function () {
			$("#select2 h4").css("background-color", "#0485e0");
			$("#select2 h4").css("color", "#fff");
			$("#select1 h4").css("background-color", "#fff");
			$("#select1 h4").css("color", "#000");
			$("#select3 h4").css("background-color", "#fff");
			$("#select3 h4").css("color", "#000");

		});
	});



	$(document).ready(function () {
		$("#select3").click(function () {
			$("#select3 h4").css("background-color", "#0485e0");
			$("#select3 h4").css("color", "#fff");
			$("#select1 h4").css("background-color", "#fff");
			$("#select1 h4").css("color", "#000");
			$("#select2 h4").css("background-color", "#fff");
			$("#select2 h4").css("color", "#000");

		});
	});


</script>

Download Code Files