I’ve been hard at work on the form, designed it in figma and then got down to business. I tried to make it as responsive as possible, it has given me quite a few headaches to leave it as I have designed it.
I should optimize it a lot more, but it is the most I can achieve at the moment with the knowledge I have.
From knowing nothing to being able to do this in just 3 weeks, I feel like this is the best place in the world to learn.
Your form looks good @raulsanctes. Some things to revisit;
- Keep the test script when forking the pen (
- The test script, with all tests passing, should be included when you submit your projects.
- Do not use the
<br> element to force line breaks or spacing. That’s what CSS is for. If you want two paragraphs then user two paragraph elements.
- In other places, instead of using
<br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
- User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
- maybe revisit the lesson on creating checkboxes
- It’s a bad UX when the user has to delete text in the comment area in order to enter theirs
Side note, I notice you use a
font-weight of 900. Also noticed it doesn’t render as such. Couple of things;
- you only link one font weight and
- the font you link to doesn’t have a font-weight of 900
the browser can only do so much so the font weight is the same throughout
you designed it mobile first I believe, and it looks great on mobile, but on a big screen it doesn’t look good,
On I big screen I would make the survey into a side bar
other wise I would say 7/10
Thank you very much for so much feedback!
Finally I chose not to customize the checkboxes, it was generating unnecessary problems for me at this stage.
I have solved all the problems you have observed me, thanks again for always helping me.
It’s true, I removed the background image and contrasted the gradient more.
Perhaps it would have been better if it was only in 1 rectangular container in 2 columns.
Thanks for the observation.
I just realized that a user can expand the comment section beyond the form, and might not be able to see what they are typing, might want to add a max-width: property on your text box
Oh, it’s a great observation. You’re right, I’ll add that detail. Thank you very much for your feedback
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.