@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.
- Create form with 5 radio buttons
- Add values to the radio buttons (1 - 5, or whatever scale you want to use)
- Get make sure the form is submitting to the webflow back-end.
- Determine if the source / url is being submitted with the form
- Styling the form - you’ll need to use the label trick described above