I just completed my survey form and would like some feedback as to how to improve it.
I settled on a Covid-19 survey form, a simple reminder of the times we are in and the need to keep safe.
While working on the project, I noticed a little issue with my CSS styling. I can’t seem to resolve it and welcome all the assistance I can get.
The issue
I have applied a font-weight of 500 to my form labels. However, some labels (e.g. Gender, and all labels under the “General covid-19 questions” section) do not display as such. Surprisingly, everything works perfectly when i set the font-weight to 600.
I am not sure if this information is relevant, but all the affected labels are wrapped in div elements.
Your form looks good @dewslyse. Passes all user stories and is responsive.
The Open Sans font doesn’t have a weight of 500 so the browser doesn’t know what to do with it so it stays at 400. When you set it to 600 it’s actually using the weight of 700.
You could try Ubuntu instead of Open Sans.
The placeholder text should show the format the user is to enter. It shouldn’t repeat the label and since Latin is a dead language there’s no need to include a Latin abbreviation.
It may be a better UX to have the required fields at the top (name, email, country) rather than scattered.
