This content originally appeared on DEV Community and was authored by Code with Ayan
Hey guys, Today in this post, we’ll learn How to Create a Simple Feedback Form using CSS and HTML. To create it we are going to use simple CSS, HTML & Javascript. Hope you enjoy this post.
Feedback Forms are usually used by websites and businesses to know how they can improve, it helps in making User Experience better. Customers reveal what they think about the company's services. This connects both Company and users to get a better understanding. Companies could easily get Feedback by Using different emojis to get ratings. Making users feel at ease. Writing something when the Send button is pressed, signs users of a response giving website. Be creative with it and make your Feedback Forms interactive to add a good experience for the users.
Demo
Simple Feedback Form Javascript (source code)
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="feedback" class="feedback-container">
<strong>How satisfied are you with our <br/> customer support service?</strong>
<div class="ratings-container">
<div class="rating">
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
<small>Happy</small>
</div>
<div class="rating"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
<small>Neutral</small>
</div>
<div class="rating active"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
<small>unsatisfied</small>
</div>
</div>
<button class="btn" id="send">Send Review</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
Then, add CSS to our Feedback Form. We have used External CSS to link with HTML so make sure you name your file (style).css. You could also use Internal CSS.
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #000;
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh; margin: 0;
overflow: hidden;
}
.feedback-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 4px;
font-size: 90%;
display: flex;
flex-direction: column;
justify-content: center; align-items: center;
text-align: center;
padding: 30px; max-width: 400px;
}
.feedback-container strong {
line-height: 20px;
}
.ratings-container {
display: flex;
margin: 20px 0;
}
.rating {
flex: 1;
cursor: pointer;
padding: 20px;
margin: 10px 5px;
}
.rating:hover, .rating.active {
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.rating img {
width: 40px;
}
.rating small {
color: #555;
display: inline-block;
margin: 10px 0 0;
}
.rating:hover small,.rating.active small {
color: #111;
}
.btn {
background-color: #302d2b;
color: #fff;
border: 0;
border-radius: 4px;
padding: 12px 30px;
cursor: pointer;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(0.98);
}
.fa-heart {
color: red;
font-size: 30px;
margin-bottom: 10px;
}
JavaScript Code
Javascript would be doing the main work, it will be handling all the functionality of our Feedback Form. We have used External JavaScript to link, so make sure you name your file (script).js . You could also paste the source code in the Script tag.
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const feedback = document.querySelector('#feedback')
let selectedRating = 'Satisfied'
ratingsContainer.addEventListener('click', (e) => {
if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
removeActive()
e.target.parentNode.classList.add('active')
selectedRating = e.target.nextElementSibling.innerHTML
} else if(
e.target.parentNode.classList.contains('rating') &&
e.target.previousSibling &&
e.target.previousElementSibling.nodeName === 'IMG'
) {
removeActive()
e.target.parentNode.classList.add('active')
selectedRating = e.target.innerHTML
}
})
sendBtn.addEventListener('click', (e) => {
feedback.innerHTML = `
<i class="fas fa-heart"></i>
<strong>Thank You!</strong>
<br>
<strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support</p
})
function removeActive() {
for(let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active')
}
}
Congratulations! You have now successfully created our Simple Feedback Form using Html and Javascript.
My Website: codewithayan, see this to checkout all of my amazing Tutorials.
This content originally appeared on DEV Community and was authored by Code with Ayan
Code with Ayan | Sciencx (2022-06-20T17:48:37+00:00) Simple Feedback Form using Html, CSS and Javascript. Retrieved from https://www.scien.cx/2022/06/20/simple-feedback-form-using-html-css-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.