Survey Form Feedback - @jdegaris

Hello There! I would like some feedback on my survey form. I kept it pretty plain on purpose. I figure I can get more creative and such with my portfolio page. It passes all the tests, but I would really appreciate feedback on accessibility, readability, HTML and CSS structure, and any other improvements that can be made. Thanks for taking the time to look and help me get better.

Survey Form

Hi! I’m no expert and am relatively new here, but I think that I still might be able to provide at least slightly useful feedback. I think that the title, particularly on the left side, doesn’t have enough contrast with the background and becomes somewhat difficult to read. I’d play around with different shades there.

As for the structure, I think that the form area could be wider on the page because when I shrink it down to 400px wide, it shows up as a narrow strip down the middle. So on .wrapper the width could be maybe 50% or higher? I played with it and liked it around 70%, but I still get a scroll bar at the bottom when I size the width of the viewport down and I don’t know enough yet to properly suggest how to change that.

I hope this helps!!

The scroll is horrible to be honest, it can be a real annoyance to the users, it’s better to set overflow property’s value to visible again.

Also, the design is not responsive. However, everything else seems very nice to me.

Generally is good, but needs some serious layouting fix, and also consider the background colour is so close to foreground black colour, this is not recommended.

I suggest you have a quick read of my survey form challenge walkthrough, hope it help to fix issues easier.

I believe fixes only needs some minutes, be patient and do the job awesome and right.

Once you fix the issues about colour scheme and layout, we would go more in detail to review your page.

Keep going on great work, happy programming.

Thank you guys for the feedback. I did not realize that the responsiveness was as bad as it was. I made some tweaks and added some media styles to fix the width. I checked it out in Chrome Dev console, and it seems much better now. I also added some text shadow to the title to help it stand out more.

Would love another round of feedback, so please check it out again and let me know. Thanks

1 Like

Looks better, but still needs some work. layout is still a little mess.

For mobile, there is a horizontal scroll for form, it’s bad.

Also please change that black background colour, use white. or change the foreground text. both background and text colour are black, this is not good.
That shadow for text hopefully make it a little visible, but it’s better to have contrasted colours for foreground and background .

radio buttons still have no any label associated.

Review the page content spacing again. Some spacing between elements are appreciated for mobile view especially. Beside I think padding/margin(the space) between body and form in mobile view is a little too much. Try to utilize maximum space for page content in mobile.

good progress. keep goin on great work, happy programming.