Hey peeps! If you have a moment, could you take a look at my form project and let me know if you have any suggestions? Thanks in advance!
1 Like
Since you’re asking for feedback I’m taking the liberty to move this to the more appropriate #project-feedback subforum
1 Like
First of all, nice job on the focus indicators. Most people do not customize them and rely on the browser defaults (which usually aren’t good enough). If I’m being very picky about this I would say that they could stand out a little more for the select and text area (they just aren’t quite as bright as the others on my browser).
Another thing I think will help with the focus indicators is to put a little more vertical spacing on the page. Right now it feels a little crowded and thus the focus indicators get a little lost in the content.
Excellent job on the <label>s. You have them on all of the inputs (even the select and textarea, which most people miss) and they all work properly.
The text on the submit button is being cutoff. You’ve set the width on that button in px. Whenever you have elements that contain text it is almost always a good idea to use em units for height/width instead as that will allow the element to grow as the text does.
Small nitpick. When I narrow my browser all the way in I get a horizontal scroll bar. Granted, it doesn’t scroll much, but it probably shouldn’t be there.
Bonus points for using fieldset/legend on the radio button/check box groupings!
Being picky again. The placeholder text is really used to give an example of what you want the user to enter. For example, the placeholder text for the Name input could be “John Doe” and the placeholder text for Email could be “bob@example.com”. Also, I would change the label text on the Name to “Full Name” since that is what you are asking for.
For the Number of dogs input, I would be tempted to change the label text to “How many dogs are in your family?” and drop the placeholder text completely. You want the label text to give the user all of the information they need to fill in the input. Putting information in just the placeholder is best avoided because not all screen readers will announce the placeholder text. Granted, “Number of dogs” and “How many dogs are in your family?” are pretty similar questions. But I think the latter conveys more information and thus should be the label text.
Similar issue as above with the select label. Make “How would you categorize your home?” the label text and get rid of it as the first element in the select.
You seem to have a good grasp on things so I’m going to throw a more advanced issue at you. One area of your form that needs attention is responsiveness to text only size increases. I’m not referring to the default page zoom that most browsers default to. I’m talking about only increasing the text size on the page. If you aren’t familiar with this concept just search for “text only zoom [your browser]”. (In my opinion, Firefox is the best browser to test this in.) In general, your page should be able to handle up to a 200% increase in text size.
If you go up to 200% on your page I think you’ll see some issues. The best way to avoid these types of problems is to use em units wherever possible (including your CSS break points), but especially for any elements you set any type of height/width on. And in general, you probably want to avoid setting heights on elements unless absolutely necessary (because as text size grows the height of the block of text usually gets taller). For example, right now you have a height of 800px set on the form-container div, so as I increase the text size the content gets taller and breaks out of that 800px tall container. All I need to do is remove the height setting and then the container naturally gets taller to account for the text size increase.
So crank your text size up to 200% and test your page from narrow to wide to make sure it can handle it.
1 Like
Hey Bruce, thank you so much for the quality feedback! You’ve given me plenty to tinker with and I really appreciate it.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.