Survey Form (Kindergarden) Feedback

This is my survey form https://codepen.io/MariaIo/pen/bQOdMq
Please, give me feedback.

2 Likes

Just scanning it quickly - nice and clean, but I noticed the following:

I only realised you’d changed the CSS cursor property on the ‘Rainbow’ img after I’d ended up clicking it by accident a few times - I thought my mouse was doing something weird to start with. IMO cursors should be left as-is unless there is a definite need to change them.

You’ve used a dropbox location for your rainbow class img. You can probably see it because you’re signed in, but no one else will be able to and as such, I’m just seeing a broken img symbol. You’ll need to host that publicly.

You’ve used actual emoji for your ratings system and whilst that’s cute, I would be surprised if everyone was using browsers that supported emoji. I would either recreate them as images or find a different way of doing them.

It’s important to remember accessible web design and disabled users, There is also an argument that, dependent on culture and country, Emoji don’t always correspond to the emotion/feeling you might think they do. Here’s a nice article on accessible Emoji use:

https://tink.uk/accessible-emoji/

They also sit in a weird position in their div on my browser.

Hope that helps.

This is really well made ! i love the inputs they look a lot better than the defaults, but the emojis arent aligned too well and i cant tell if it is selected. Other than that this page is amazing

1 Like

Good comments! Thank you so mush, Ascii and SLATx!

I will fix all those problems and come back.

Hi @maria_coding I love the styles you use for your survey form! You really made this project your own. It’s responsive when I reduced the width and it doesn’t allow the survey to be sent when I don’t fill out the name / email fields correctly, so all that seems workable.

I personally think the emojis are very cute, I think it adds to the Kindergarten / rainbow type feel that you’re going for with the survey. However, the radios simply don’t work for me. I click and I click and I click, but nothing gets selected.

Additionally, I would take a look at some of your HTML. Just a quick glance and I can see a problem with your attributes in the <textarea> for additional comments. The <input> fields are also self-closing tags, meaning you do not need the </input> at the end.

Just some quick bugs to patch up and this project will be phenomenal! I look forward to seeing your next project

1 Like

Thank you drregg6 for your comment! It is important to feel support for me.
I am stuck a little bit with radios for emojis, but I have one more idea how to do that.

It looks good and responsive.

Great work done… Looks nice

Thank you, silverKnight and bmutebi! And thank you Ascii, SALTx and drregg6!

AND I return with victory! I did it!