Hey! How to make a rating scale with emoji? If I need to use custom code or an external widget, where can I find it?
Example rating scale with emoji:
Thank you very much!
I don’t have project to share, but I only have a screenshot layout (attached above)
I’m guessing this is built using some sort of external library. If you can post the source url where it came from it’s probably not hard to find out. The emoji’s aren’t really the tricky part of this, they are just the visual representation of a 1 - 5 rating system, the tricky part is capturing / maintaining the rankings each time they are collected.
@sam-g This is just a screenshot of my Figma layout. Now I’m a reseaching how I can do this in webflow. I assume that for this i need to embed custom code, but I do not fully understand:
I found 2 platforms that seem to do this. elfsight.com and popkit.club. I am still continuing to study this.
@sam-g I saw a similar feature here - https://university.webflow.com/article/embed#w-node-a9573ff5ea80-7c71d1af
@Vlad_Belov - okay so that example is just a webflow form.
They are using a trick where you replace the label attribute of a radio button with an image (in this case an svg emoji). When the label of a corresponding radio button is clicked it selects the radio button so you have a value to submit with the form
The radio input itself is set to opacity: 0, so that you can’t actually see it.
But when you click the emoji it selects the radio button. When the form is submitted using the submit button below it sends the value of the radio button that was selected:
The value is something like this:
They have some interactions to make the emoji’s color on hover/selected and to show the text area and submit button once any emoji has been clicked.
They are also passing along the page the form was submitted from so that if you have this form on a bunch of pages you can tell which ratings apply to which page:
I’m not sure if this is collected by default - it may be, or they may be running some js to grab the url and submit it with the form.
It’s not super complicated, but will definitely take some tinkering. I would try to get this working with just numbers first (1 - 5) and get the data flowing first. Then you can style with emoji’s and add the effects later.
Breaking it up into pieces will help, but if you have 0 coding experience this may be a difficult task. Try to get something started and if you get stuck let me know.
Basic steps:
Hello!
If we understood your case correctly, you need an emoji feedback form, according to the example -https://university.webflow.com/article/embed#w-node-a9573ff5ea80-7c71d1af
You can easily create the emoji scale with our Form Builder widget - https://elfsight.com/online-form-builder/
There’s no need to code, it’s customizable: you can change the style, color, add fields you need and it’s 100% compatible with Webflow./
Also, if you have any questions or need some help with your use-case, don’t hesitate to contact our Support Team - we’ll be glad to find a solution for you or just give you an advice.
Best regards,
Elfsight Team.
