I finished my Survey Form project - I hope to get some feedback :)

Hi, guys! I just finished my Survey Form project. I was and still am a bit confuse about the inline, block, inline-block displays as well as how to make a responsive design, but I finally got it working. I hope you can give some feedback on the design, sintax and anything that you find wrong. Thanks!

1 Like

I would change the color of the placeholder for better contrast in the dropwdown menu.

Overall great work, I quite liked the scheme.

1 Like

Didn’t notice that. Thanks!

Hi fericarnu

Great job, it’s clean, nice. I like the background. As @huascar.lopeze said i would also change the color of the placeholder and even the label (check it with google dev tool).
For lower resolution perhaps change the opacity of the form background because of the main background.

1 Like

This is one of the first survey forms I’ve seen in a while that has labels on every input, and you’re using fieldset on the groupings, nice job!

A few suggestions:

  • The keyboard focus indicators on the text inputs are very nice but I can barely see them on the radio/checkboxes. They should look the same as the text inputs. And then you need to change the default border on the submit button so it doesn’t look the same as the focus indicators (but be sure to leave the aqua focus indicator on it). Bottom line, I should be able to tell where my keyboard focus is on the form and all the focus indicators should look the same.
  • Concerning the fieldsets, you should use the legend tag for the question text:
    https://webaim.org/techniques/forms/controls#radio
  • Set the height on your inputs/buttons in ‘em’, that way they can grow taller as the text size increases. Also, give more height (again in ‘em’) to the textarea. At bigger text sizes I can only see one line of text at a time.
  • As I increase the text size the inputs eventually start to break out of the green form (on the right side). This only appears to happen a wider browser widths.
  • If the minimum age you can enter is 14 then that should probably be stated on the page.
  • The red asterisk on green background is very hard to see. (Others have already mentioned the placeholder text).
  • Technically, I think you are not quite using the place holder value correctly. It is intended to offer a hint as to what you expect the user to enter into the input. For example, we already know you want the user’s name in the first input (due to the label) so instead of just repeating that information in the placeholder you should offer an example of how you want someone to enter their name (e.g. John Q. Smith).
1 Like

Do you mean to make it more transparent or more opaque?

Thnak you! I improved pretty much everything you told me. Although I didnt’t seem to recreate the issue of the text breaking out.

More opaque when in lower resolution

1 Like

It looks really pretty and legit. :+1: