My new survey form

Code Feedback
1

feedback needed please!
https://codepen.io/jesuscano80/pen/QWjzzza

to solve problems I have made v2

https://codepen.io/jesuscano80/pen/ExVMoWo

2

Hi,

Just a few quick suggestions regarding the aesthetics:

1 - The “Name” input field is too close to the top of the graphic
2 - Role input field is a different height and not justified left with the other input fields
3 - The “comments” field title is not aligned with the input field
4 - The “Submit” button is quite big

I hope this helps.

3

hi @jesuscano
youve made a good effort here with this, good work.

  1. I personally dislike the high transparency between the form and background, id like to see it more opaque.
  2. The font… something about it makes it hard to read for me - perhaps the drop shadow.
  3. Visually id like the form to be in a nice clean column format - each item below the one that came before it, like the excercise example.
  4. I also dislike the textarea box to be able to be resized by the user - apply resize: none; to the textarea tag in CSS if you want to prevent that?
  5. Im not a fan of the purple boxing around text.
  6. Nice hover effect on the submit button, but id like to see the button smaller, and the text styling larger to differentiate it?
  7. there are a lot of things could be fixed / made better for your HTML using the W3C validator - the W3C validator helps me when using HTML as im a learner myself.
    :sunglasses:
4

@jesuscano, some feedback on your form;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to a font, etc would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are coding errors you should address.
5
  1. Match the font on all of your placeholders - weight, size, distance from the edge.
  2. It’s tough to see the page because the background is so bold and the foreground is very light.
  3. Bring the text next to the checkboxes up so they’re more centered on each box.
  4. The submit button is huge compared to the comment box and it expands with the textarea.

Overall, it’s a good start!

6

Thanks to all for feedback, I decide to remake it again to solve the problems.

Here is v2 new survey form
https://codepen.io/jesuscano80/pen/ExVMoWo

7

Looks okay @jesuscano. Just a note about placeholder text. Placeholder text, located inside a form field, is an additional hint, description, or example of the information required for a particular field. No need to repeat the label.