An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Engadget
- Mashable
- Simplebits
- The Logo Smith
- Abduzeedo
- Web Design Ledger
- Reencoded
- Freelance Switch
- Design Modo
- Android Headlines
Help Webnuz
Referal links:
Simple Feedback Form using Html, CSS and Javascript
Hey guys, Today in this post, well 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 InternalCSS.
@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.
Original Link: https://dev.to/codewithayan10/simple-feedback-form-using-html-css-and-javascript-3bj3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To