Survey form - feedback and help

I Built This
1

H i everyone,

yesterday i finished the survey form in simple text, black and white, only to pass the test, today i try to improve the looks and polish a little bit, still i dont know if i did correctly the input width in case the browser resizes.

2

Hi @frogcoin82 your page looks good. Congratulations!
Maybe I’m wrong, but the only strange thing that I found was this:

image
image873×328 11.9 KB

When I click summit, but I think is something you are working with it.

1 Like
3

Your form looks good @frogcoin82. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • you have elements out of order. The style element belongs in the head element. Review this for an understanding of the HTML boilerplate tags.
  • Keep your styling external. Do not use internal styling.
    • For codepen, CSS belongs in the CSS editor
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • The form says age is optional yet the user is required to enter it. That would be a bad UX.
  • Placeholder text should not mirror the label. It should show the format the user is expected to enter.
  • It’s a nit but maybe use a more realistic age range.
1 Like
4

Hi AndyG, thanks for the feedback, at the moment the page doesnt go beyond submit. :slightly_smiling_face:

Hi Roma, i really appreciated the feedback, it make me work more on the survey and realized that i had a lot of issues to fix.

  • List item
    Fixed codepen proper placement of html, head and css.
    Run W3c Validator, very nice tool, fixed all warnings.
    Removed br to force spacing using css.
    Fixed click on the label to toggle a selection.
    Fixed change cursor to a pointer on submit.
    Fixed optional age number and age range.
    Fixed placeholder text.
    Fixed opacity in input.
  • List item

I removed all the inline style but if theres something that i can still move a hint would be appreciated.
I used <br> between inputs to break the line but i dont know if thats correct.
ill clean some code in my tribute page thanks to your feedback too. :slightly_smiling_face:

5

Good job cleaning things up @frogcoin82.

You don’t want to use <br> to force line breaks. Referenced in my post above.
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.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.