'Build a Survey' Form - Feedback please!

Code Feedback
1

Hello everyone,

Finally finished my Survey Form form, time for you to critique it wherever you think I could have done things differently.

I’ve spent as much free time as possible over the last week adding and removing things and it was getting really messy but I deleted everything this morning and started again keeping it as simple as possible which has been a really valuable learning experience. It’s still very early days for me but I can already see an improvement over my first project both in the markup and appearance.

https://codepen.io/bpw84/pen/rNVdERP

Thanks. :motorcycle: :dash:

2

Looks pretty good.

  1. Run the HTML through a validator.

  2. I would add some more padding to the form, the first 4 inputs, and the submit button.

  3. There is a mismatch between the for and id on the last checkbox.

Good, job keep it up!

1 Like
3

Really appreciate your feedback, thanks.

  1. Done. All validation issues resolved
  2. I’ll fix this now. Out of curiosity, why would you add more padding? I’m not suggesting you’re wrong at all but it’ll help me improve my workflow in future
  3. I’ve resolved this issue too
4

For the form, moving the elements away from the edge just looks better. For the inputs, it again looks better and having the inputs smaller than the labels looks off. It’s also just better UX to make them bigger so people on mobile devices can easily click into the inputs. The same goes for the button, it looks better and makes it easier to click it.

I would also consider limiting the width of the inputs, or the form. Again, it would look better and having input lengths that better fit the expected content can help guide the user and is better UX.

5

Having just gone over my code and made a few tweaks I see what you mean. I’ve adjusted a few bits and tinkered with the media queries a little. Would you mind having a quick look when you get a moment?

It’s not perfect by any means but I plan on coming back to these projects in 6 months time and using them as reference points (And inspiration when I hit another brick wall!) Perhaps do the whole project series again, v.2.0-style.

6

These are just design choices.

Personally I feel like the input proportions are still a little off. I would make the inputs a bit taller. If you look at the example project and compare it to yours maybe you can better see what I mean.

I’d still lower the form width. If you use pixels instead of percentages for the max-width it doesn’t matter how wide the screen is it will still just be that fixed max-width. Which I think works better.

1 Like
7

Thanks @lasjorg! I’ve made a few more adjustments and the form/input dimensions do seem to work better now.

I 100% agree with you though, it did feel a little ‘stretched’ horizontally before.

1 Like