How we can create a customer feedback rating design using HTML and CSS? Solution: See this CSS Feedback Star Rating With Emoji Expression, Customer Satisfaction Feedback Input.
Previously I have shared an HTML CSS Star Rating design, it is also like that but it has emoji face according to rating. When we shop at any supermarket and shopping mall after billing you to have to give a rating according to their service. There you give between 0 to 5 stars as worst to excellent. This type of rating called customer satisfaction rating.
Today you will learn to create Customer Satisfaction Rating design with pure CSS. Basically, there are five stars and an emoji face when you will give any rating or select a star then the face will change expression and color. And on the bottom, there is a reset button to start over from begin. And on the top, you will see how many stars you have given with help of color fill.
So, Today I am sharing CSS Feedback Star Rating With Emoji Expression. This program is created using pure HTML and CSS, there is no JavaScript or any other library or framework. And the emoji face is powered by a third-party icon library which I have used to design this. You can use this design or program on your website to aks your users to feedback your services.
If you are thinking now how this Customer Satisfaction rating actually is, then see the preview given below.
Preview Of Customer Satisfaction Rating
See this video preview to getting an idea of how this design input looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Credit Card Details Form
- Input and Placeholder Effects
- Responsive Contact Us Form
- CSS Content Filter Switch
CSS Feedback Star Rating With Emoji Expression Source Code
Before sharing source code, let’s talk about it. First, I have created a form and fieldset inside it using HTML. Inside the fieldset, I have placed 5 input and labels for the star rating layout. And also placed a figure for the emoji face/ icon in the design. All the input and label connected using ID & For method. Example: <input id="star1"> <label for="star1"> <input id="star1"> <label for="star1">
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have used font-awesome for put emoji face, I have linked the CDN of it in the HTML file (get). Now I have created all the effects like star’s color fill and face color fill using CSS :checked method. In the HTML file, I have placed input and there I am putting conditions if the input is checked.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create only 2 files for that, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Feedback Rating | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <form id="form"> <fieldset class="stars"> <input type="radio" name="stars" id="star1" ontouchstart="ontouchstart"/> <label class="fa fa-star" for="star1"></label> <input type="radio" name="stars" id="star2" ontouchstart="ontouchstart"/> <label class="fa fa-star" for="star2"></label> <input type="radio" name="stars" id="star3" ontouchstart="ontouchstart"/> <label class="fa fa-star" for="star3"></label> <input type="radio" name="stars" id="star4" ontouchstart="ontouchstart"/> <label class="fa fa-star" for="star4"></label> <input type="radio" name="stars" id="star5" ontouchstart="ontouchstart"/> <label class="fa fa-star" for="star5"></label> <input type="radio" name="stars" id="star-reset"/> <label class="reset" for="star-reset">reset</label> <figure class="face"><i></i><i></i> <u> <div class="cover"></div> </u> </figure> </fieldset> </form> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ html, body { height: 100%; padding: 0; margin: 0; } body { overflow: hidden; } #form { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; max-width: 800px; height: 100%; margin: auto; } [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; } .reset { display: none; position: absolute; top: 100%; left: 50%; margin: auto; padding: 12px 24px; color: #4d4d4d; background: #f0f0f0; border-radius: 60px; font-family: "Helvetica", sans-serif; font-size: 18px; font-weight: bold; text-transform: uppercase; cursor: pointer; outline: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .reset:hover { background: #fbc416; } input, label { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .stars { position: relative; } .stars input { display: none; } .stars input:checked ~ label:not(.reset) { -webkit-animation: wobble 0.8s ease-out; animation: wobble 0.8s ease-out; color: #fbc416; } .stars input:checked:not(#star-reset) ~ label.reset { display: block; } .stars label:not(.reset) { display: inline-block; float: right; position: relative; width: 40px; height: 40px; font-size: 40px; padding: 2px; cursor: pointer; color: #3d3d3d; transition: color 0.1s ease-out; z-index: 10; } .face { position: relative; width: 200px; background: white; border: 6px solid #f0f0f0; border-radius: 100%; margin: 80px 0 50px; transition: box-shadow 0.4s ease-out; } .face:after { content: ""; display: block; padding-bottom: 100%; } i { position: absolute; top: 50%; display: block; width: 14px; height: 14px; border-radius: 100%; background: #f0f0f0; } i:nth-child(1) { left: 30%; } i:nth-child(2) { right: 30%; } u { position: absolute; right: 0; bottom: 25%; left: 0; margin: auto; width: 24px; height: 24px; text-decoration: none; border: 6px solid #f0f0f0; border-radius: 100%; } u:before, u:after { content: ""; position: absolute; top: 15px; width: 6px; height: 6px; background: #f0f0f0; border-radius: 60px 60px 0 0; z-index: 2; } u:before { left: -5px; -webkit-transform: rotate(-32deg); transform: rotate(-32deg); } u:after { right: -5px; -webkit-transform: rotate(32deg); transform: rotate(32deg); } u .cover { position: absolute; top: -6px; left: -6px; width: 100%; height: 100%; border: 6px solid white; background: white; -webkit-transform: translate(0, -12px); transform: translate(0, -12px); } input#star4:checked ~ .face u, input#star2:checked ~ .face u { width: 36px; } input#star4:checked ~ .face u:before, input#star4:checked ~ .face u:after, input#star2:checked ~ .face u:before, input#star2:checked ~ .face u:after { top: 18px; height: 10px; } input#star4:checked ~ .face u:before, input#star2:checked ~ .face u:before { left: 0px; -webkit-transform: rotate(-66deg); transform: rotate(-66deg); } input#star4:checked ~ .face u:after, input#star2:checked ~ .face u:after { right: 0px; -webkit-transform: rotate(66deg); transform: rotate(66deg); } input#star4:checked ~ .face u .cover, input#star2:checked ~ .face u .cover { -webkit-transform: translate(0, -8px); transform: translate(0, -8px); } input#star5:checked ~ .face u, input#star4:checked ~ .face u { -webkit-transform: rotate(180deg) translateY(-20px); transform: rotate(180deg) translateY(-20px); } input#star3:checked ~ .face u { width: 42px; height: 6px; background: #3d3d3d; border: none; border-radius: 60px; -webkit-transform: translateY(-4px); transform: translateY(-4px); } input#star3:checked ~ .face u:before, input#star3:checked ~ .face u:after, input#star3:checked ~ .face u .cover { display: none; } input:not(#star-reset):checked ~ .face { -webkit-animation: wobble 0.8s ease-out; animation: wobble 0.8s ease-out; } input:not(#star-reset):checked ~ .face, input:not(#star-reset):checked ~ .face u { border-color: #3d3d3d; } input:not(#star-reset):checked ~ .face i, input:not(#star-reset):checked ~ .face u:before, input:not(#star-reset):checked ~ .face u:after { background: #3d3d3d; } input#star5:checked ~ .face { background-color: #fa5563; } input#star5:checked ~ .face u .cover { background: #fa5563; border-color: #fa5563; } input#star4:checked ~ .face { background-color: #fa824e; } input#star4:checked ~ .face u .cover { background: #fa824e; border-color: #fa824e; } input#star3:checked ~ .face { background-color: #fccd3f; } input#star2:checked ~ .face { background-color: #a0d77a; } input#star2:checked ~ .face u .cover { background: #a0d77a; border-color: #a0d77a; } input#star1:checked ~ .face { background-color: #6bca6c; } input#star1:checked ~ .face u .cover { background: #6bca6c; border-color: #6bca6c; } @-webkit-keyframes wobble { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 20% { -webkit-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 60% { -webkit-transform: scale(1.05); transform: scale(1.05); } 80% { -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes wobble { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 20% { -webkit-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 60% { -webkit-transform: scale(1.05); transform: scale(1.05); } 80% { -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { -webkit-transform: scale(1); transform: scale(1); } } |
That’s It. Now you have successfully created CSS Feedback Star Rating With Emoji Expression, Customer Satisfaction Rating Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Nice…Feedback rating.
https://www.youtube.com/watch?v=ZN6HmsezG6w&t=10s
Greetings,
I’m not the best speller but I see the word “Copt” is spelled incorrectly on your website. In the past I’ve used a service like SpellAlerts.com or SiteChecker.com to help keep mistakes off of my websites.
-Sarah
Hi , thanks for this awesome job, is there any possibility to create a different web link for each star . thanks