Introduction
A responsive feedback form adjusts to different screen sizes, ensuring an optimal user experience on both desktop and mobile devices. In this tutorial, you'll learn how to create a clean and responsive feedback form using HTML and CSS for styling, with JavaScript to handle form submission.
Development Steps
- Create Basic HTML Structure: Set up a feedback form with fields like name, email, and feedback message.
- Style the Form with CSS: Use CSS to style the form and make it responsive for various screen sizes.
- Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console for testing.
Step 1: Create a Basic HTML Structure
We will create the basic structure of the feedback form with fields for name, email, and a message. The form also includes a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Feedback Form</title>
</head>
<body>
<!-- Step 1: Feedback form structure -->
<div class="form-container">
<form class="feedback-form" id="feedbackForm">
<h2>Give Us Your Feedback</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="message">Feedback</label>
<textarea id="message" placeholder="Enter your feedback" required></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>
Explanation:
- Form Fields: The form includes fields for name, email, and feedback, with a submit button.
- Form Structure: The form is enclosed in a
div
with the classform-container
for easy styling.
Step 2: Style the Form with CSS
We will now style the feedback form using CSS, ensuring it is responsive and visually appealing across all screen sizes.
<head>
<style>
/* General styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin: 0 20px;
}
.feedback-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.form-container {
padding: 15px;
}
.feedback-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
Explanation:
- Form Layout: The form fields are styled with padding, border-radius, and font size. The submit button is styled with a blue background and hover effect.
- Responsive Design: Media queries are used to adjust the layout for tablets and mobile devices, making the form easy to use on smaller screens.
Step 3: Handle Form Submission with JavaScript
We’ll now add JavaScript to handle the form submission and print the entered values to the console for testing.
<body>
<script>
// Step 3: Handle form submission
document.getElementById('feedbackForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Feedback:', message);
});
</script>
</body>
Explanation:
event.preventDefault()
: Prevents the default form submission behavior, stopping the page from refreshing.console.log()
: Logs the captured name, email, and feedback to the console.
Complete Example
Here’s the complete code for the responsive feedback form, combining HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Feedback Form</title>
<style>
/* General styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin: 0 20px;
}
.feedback-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.form-container {
padding: 15px;
}
.feedback-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
<body>
<!-- Step 1: Feedback form structure -->
<div class="form-container">
<form class="feedback-form" id="feedbackForm">
<h2>Give Us Your Feedback</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="message">Feedback</label>
<textarea id="message" placeholder="Enter your feedback" required></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<script>
// Step 3: Handle form submission
document.getElementById('feedbackForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Feedback:', message);
});
</script>
</body>
</html>
Output
Conclusion
In this tutorial, you learned how to create a responsive feedback form using HTML, CSS, and JavaScript. The form adapts to different screen sizes using media queries, ensuring an optimal experience for users on both desktop and mobile devices. You can extend this form by adding validation or connecting it to a backend service for further processing.
Comments
Post a Comment
Leave Comment