My Survey Form --- Project

Hello everyone!

Here is my Survey Form https://codepen.io/satishl/full/wvegwXO

I have spent some really good time and designed the survey form and also tried to turn it into a basic responsive layout.

If any one has the time I would love some feed back on all aspects, from layout to markup.

Thank you.

1 Like

Hi @Satish1206, your page looks really good. I think I have no comments on both the layout and the markup since they’re all great now

Nice job on the design. I can tell you put a lot of work into this. Overall this is very good but I do have some accessibility issues to point out.

  • The <label>s are not working properly for the <select>s and <textarea>. You forgot to add a for attribute to them.
  • The input fields that are required should probably be denoted as such visually on the form.
  • Any time you are putting text over colorful images you run the risk of the text being hard to read because there is not enough contrast between the text and the image color. I don’t have time to do this but you should probably verify that the white text has enough contrast with each of those background colors. You can use the WebAIM contrast checker to verify.
  • When I Tab through the form with the keyboard it is hard to see the focus outline indicator on some of the inputs and the button. I would recommend you customize it using the CSS outline property to ensure that it is clearly visible in all browsers.
  • The following is a very picky issue but it jumped out at me while I was testing. If I start the browser as narrow as it will go and then slowly widen it, the form continues to get wider, and then suddenly at some point it gets very narrow again. It doesn’t make sense to me that the form should get narrower as the browser gets wider.

@phamminhphu161009 Thank you for your feedback.

@bbsmooth Sure. I will Check and Update the attributes. Thanks for your feedback.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.