Learn to design a Feedback UI using HTML, CSS, and JavaScript. Enhance user engagement and improve your web application with intuitive feedback forms.
Table of Contents
User feedback is a cornerstone of web development, providing invaluable insights into the user experience and helping to refine your digital products. To effectively collect and utilize this feedback, it's crucial to have a well-designed Feedback User Interface (UI). In this comprehensive guide, we will take you on a journey through the creation of an interactive Feedback UI using the power of HTML, CSS, and JavaScript.
Whether you're a seasoned developer looking to enhance your web applications or a designer seeking to create a more user-centric digital experience, this tutorial is designed to equip you with the knowledge and skills needed to craft a Feedback UI that not only captures valuable input but also elevates the overall user engagement. So, let's dive into the world of Feedback UI design and learn how to make user feedback an integral part of your web development strategy.
Credit: bradtraversy
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our feedback UI.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's a breakdown of the code:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This opening tag signifies the start of an HTML document and sets the document's primary language to English.
3. <head>: This section contains meta-information about the web page and links to external resources, but it is not visible to the user. It includes:
- <meta charset="UTF-8"/>: Specifies the character encoding for the document as UTF-8, which is a widely used character encoding for handling text in various languages.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>: Sets the viewport settings for responsive web design. It tells the browser to adjust the page's width to the device's screen width and set the initial zoom level to 1.0.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="..."/>: Links an external stylesheet from the Font Awesome library. This allows the use of icons and styling provided by Font Awesome.
- <link rel="stylesheet" href="styles.css"/>: Links an external stylesheet named "styles.css," which presumably contains custom styles for the web page.
- <title>Let Us Know Your Feedback</title>: Sets the title of the web page, which will be displayed in the browser's title bar or tab.
4. <body>: This is the main content of the web page that users can see and interact with. It includes:
- <div id="panel" class="panel-container">: Defines a <div> element with an id of "panel" and a class of "panel-container." This is a container for the feedback form.
- <strong>How satisfied are you with our <br /> customer support performance?</strong>: Displays a bold text asking for user feedback on customer support performance. The <br /> tag is used to create a line break.
- <div class="ratings-container">: Defines a container for rating options.
- Inside this container, there are three rating options represented as <div> elements with the class "rating." Each option includes an image (emoji), and a small description (Unhappy, Neutral, Satisfied). One of the options has the "active" class, indicating the default or selected rating.
- <button class="btn" id="send">Send Review</button>: Creates a button element with the class "btn" and an id of "send." This button is used to submit the user's review.
5. <script src="script.js"></script>: Links an external JavaScript file named "script.js." This JavaScript file contains functionality for handling user interactions and form submission.
This is the basic structure of our feedback UI using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the feedback UI is in place, the next step is to add styling to the UI using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our feedback UI.
Let me explain each part of the code:
1. @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');: This line imports the "Montserrat" font from Google Fonts and makes it available for use in the rest of the CSS styles.
2. * { box-sizing: border-box; }: This rule applies the "border-box" box-sizing model to all HTML elements on the page. This model includes an element's padding and border within its total width or height.
3. body: This block sets styles for the <body> element, which represents the main content area of the web page.
- background-color: Sets the background color of the body to a light peach color (#fef9f2).
- font-family: Specifies the font family for text within the body as "Montserrat" (a font imported from Google Fonts) with a fallback to a generic sans-serif font.
- display: Makes the body a flex container.
- align-items and justify-content: Center the content both vertically and horizontally within the body.
- height: Sets the height of the body to 100% of the viewport height, ensuring it takes up the entire visible area.
- overflow: Hides any overflowing content.
- margin: Removes any default margin from the body.
4. .panel-container: This block defines styles for elements with the class "panel-container." It seems to be used for a panel or container on the web page.
- background-color: Sets the background color to white (#fff).
- box-shadow: Adds a subtle shadow to the container.
- border-radius: Rounds the corners of the container.
- font-size: Sets the font size to 90% of the parent's font size.
- display: Makes the container a flex container.
- flex-direction: Sets the flex direction to "column," arranging child elements vertically.
- justify-content and align-items: Center content both horizontally and vertically.
- text-align: Centers text within the container.
- padding: Adds 30 pixels of padding to all sides of the container.
- max-width: Specifies a maximum width of 400 pixels for the container.
5. .panel-container strong: This rule targets the <strong> elements within the "panel-container" and adjusts their line-height.
6. .ratings-container: This block styles a container that appears to hold a set of ratings.
- display: Makes the container a flex container.
- margin: Adds 20 pixels of margin to the top and bottom.
7. .rating: This rule styles individual rating elements within the ratings container.
- flex: Allows the ratings to grow and shrink equally within the container.
- cursor: Sets the cursor to a pointer when hovering over the rating.
- padding and margin: Adds spacing and padding around each rating.
8. .rating:hover and .rating.active: These pseudo-classes apply styles to ratings when hovered or marked as active. It adds a border-radius and a shadow to provide a visual effect.
9. .rating img: Styles images within the rating elements by setting a specific width.
10. .rating small: Styles small text within the rating elements, adjusting the color and margin.
11. .btn: Styles buttons on the page.
- background-color and color: Sets the background color to a dark gray (#302d2b) and the text color to white.
- border, border-radius, and padding: Define button border properties, border-radius, and padding.
- cursor: Changes the cursor to a pointer when hovering over the button.
- focus and active: These pseudo-classes specify styles when the button is in focus or actively clicked.
12. .fa-heart: Styles elements with the class "fa-heart," which is font awesome heart icons. It sets the color, font size, and margin for these elements.
This will give our feedback UI an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #fef9f2;
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.panel-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;
}
.panel-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.3);
}
.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;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code is for creating a feedback rating system on a web page. Let me break it down for you:
1. The code starts by selecting several HTML elements using the document.querySelector and document.querySelectorAll methods and stores them in variables:
- ratings: This variable holds a collection of all elements with the class "rating." These elements are typically used for displaying different rating options, such as stars or smiley faces.
- ratingsContainer: It selects an element with the class "ratings-container." This element wraps around the rating options.
- sendBtn: This variable selects an element with the ID "send," which is probably a button used to submit the feedback.
- panel: It selects an element with the ID "panel," which is probably a container where feedback results will be displayed.
2. The code initializes a variable selectedRating with the default value "Satisfied." This variable will be used to track the user's selected rating.
3. An event listener is added to the ratingsContainer element, listening for clicks within it. When a click occurs, the code checks if the clicked element is a rating element and if it has a sibling element (an icon or text related to the rating). If these conditions are met, it does the following:
- Calls the removeActive function to remove the "active" class from all rating elements.
- Adds the "active" class to the parent element of the clicked element, highlighting the selected rating.
- Updates the selectedRating variable with the content of the next sibling element (the text or icon related to the rating).
4. Additionally, there's another condition within the same event listener that checks if the clicked element is a rating element and if it has a previous sibling that is an image (for a different representation of the rating). If these conditions are met, it does similar actions as mentioned above.
5. Another event listener is added to the sendBtn element, listening for clicks on the "Send" button. When the button is clicked, it updates the panel element's HTML content with a message thanking the user for their feedback and displaying the selected rating.
6. Lastly, there is a removeActive function defined. This function iterates through all the rating elements and removes the "active" class from each of them. It's used to clear the active selection when the user clicks a new rating.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const panel = document.querySelector('#panel')
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) => {
panel.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')
}
}Final Output:
Conclusion:
In the fast-paced world of web development, user feedback stands as a beacon of guidance, illuminating the path towards enhancing user experiences and refining digital products. Through this journey, we've explored the art of crafting a Feedback User Interface (UI) using HTML, CSS, and JavaScript, empowering you to build a robust feedback system that not only captures user insights but also elevates the overall interaction with your web applications.
By implementing these principles and techniques, you're not just creating a feedback form; you're sculpting a bridge of communication between your users and your digital presence. With each user's input, you have the opportunity to refine, adapt, and ultimately deliver a web application that aligns perfectly with their needs and desires.
So, take what you've learned here and apply it with creativity and empathy. Let user feedback be your guiding star, and may your web development journey be marked by continuous improvement and user satisfaction. As you move forward, remember that the Feedback UI you've designed has the potential to shape not only your web applications but also the experiences and relationships you build with your audience.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
