Hi guys, what do you think of my form?
https://codepen.io/JLouisS/pen/BVmmPK
I like the style of the page and colors, but I would change a couple of things.
1- the usability of the buttons to increase the numbers for years of experience is not good as the buttons are tiny on a full browser screen and require some dexterity to get the mouse on top of them.
2- The font in general is small and the spacing seems tight.
3- The submit button is not aligned where I would expect it to be as it is too far to the right of the text. I would push it to where the text seems to end and no further than that. (I’m on a full browser screen on a laptop but I see that the submit button would be better aligned if I was maybe using a mobile phone browser)
Great work!
1 Like
For the question “Would you recommend our product to your friends?”, you have it as a label and gave it the for attribute pointing to the answer yes. This is not correct.
Tapping that question selects yes as the answer, but also this poses an accessibility issue. Right now, there is nothing linking the question to both answers. Instead of using a label for the question, you want to wrap the inputs in a fieldset and use the legend to pose the question. Those can be hard to style, so if you want to keep your current styles and tags (except for the label), you could do something like:
<div class="form-group" role="radiogroup" aria-labelledby="recommend">
<p id="recommend">Would you recommend our product to your friends?</p>
<!-- your radio buttons here -->
</div>
Also, each of your checkboxes should have a label. The text next to them should be wrapped in a label and associated with the checkbox by id. I just noticed you’re using a label for the checkbox question as well, and the same goes as above in terms of how to properly handle groups of inputs.
It looks wonderful, though!
1 Like
Design looks rich, yes it’s really good.
Layout is responsive, but I have some suggestion about it to make it better I’ll tell.
Placeholder for text fields, very good, but not for textarea, please fix.
labels for text fields, and combobox, very good. but checkbox buttons have no any associated label to them, please fix.
Radio buttons have label, but the first radio (yes) has two label, the title for textbox buttons works as yes, not good, please fix.
Now about the layout, I think the padding value for mobile is a little too much, less padding could be better. In small devices having more space for page content is kind of key of success and great design.
The form fits with screen with, this is really good.
Combobox comes without any disabled and selected(by default) value (e.g. like “select you lang”), I suggest you add.
Giving a little more spacing between elements(especially input objects) for mobile view is appreciated.
I really liked this work, if you could fix the issues I stated, it will be superb.
Keep goin on great work, happy programming.
1 Like
Thanks for the feedback.
I went through all the issues and tried to fix them. How is it looking now?
https://codepen.io/JLouisS/pen/BVmmPK
Hello, just took another look and from my perspective I still see the same issues I noted before.
here are some screen shots to help:
-
submit button not aligned well (it seems to sit in a spot that has no specific reason to it. I would align it to match the form. Either in the middle or to the side but no further than the right-most edge of the comment box)
-
arrow selectors and font are too small, spacing is too tight, hard to click and the drop down looks like it has been cut-off:
For me the 2nd issue is really annoying because it affects the usability of the page. The first issue is just distracting to the eye.