Survey-form Review & Feedback

Hello there, finished my survey form, need feedback to make it better.
I can’t seem to get the color right, added some wacky background to make it look less empty. And the media queries, i don’t know what I’m doing with that.

Here’s the page : https://codepen.io/foxane/full/GReGaya

Any feedback or suggestions is greatly appreciated. Like I said before, I don’t know what I’m doing.

Thanks! :smile:

For starters, you should definitely remove the scroll snapping. It’s a massive pain to scroll around with the snapping and there isn’t really a justifyable reason to use it. Great to experiment though! There should be some padding around your title text too.

There isn’t much to do with the media queries but, you could make it so that for smaller devices, the font sizes changes.

Overall, The survey looks pretty good. It’s really smooth and quite clean. I have no more input. 7.5/10 :tada:

1 Like

Hello!

This is an interesting color scheme for sure :wink:. There’s a little typo in the sub headline.

Like Joseph already said: The snapping is bad UX, it’s first thing that I noticed besides the colors.

Also remove that little comment from the HTML. As much as I love honest people and language, it’s an unprofessional look in the long run.

Replace the main colors with neutral shades, maybe add a simple gradient for the background (like this https://keras.io/), minus the F comment and you are good to go!

1 Like

Got it. Just tried it on my phone and the snapping completely break the page. Will fix it immediately.

Thank you :heart:

1 Like

I have no excuse for that comment. Purely my mistake.

Scroll snapping is removed. Do you have any suggestion to make each section at the middle of the screen after clicking next button? The first thing i found on google is using snapping. It makes the last section unreachable on my phone.

Thank you, kind stranger :heart:

1 Like

If you want each section to have an offset from the top when you press next, you could wrap each section element in a div with the class wrapper and give the wrapping some padding top. (example: codepen)

You could also reduce the size of the the header on top. Since it’s a survey, there isn’t really any need for it to be fixed on to the top anyway (like you’ve done for mobile screens). But, that’s your personal choice, @foxane