Feedback please on my Survey Form :)

Any feedback on my survery form - project 2, would be much appreciated :slight_smile:

nicely done. add small margin bottom under the submit button so it doesn’t touch the edge, and use another color that isn’t blue as background. :saluting_face:

Thanks Sboony, I have enacted that feedback!

Looks good.

In the Future, to make your projects easier, this website can be used to help pick out color palettes:

https://coolors.co/

You can upload an Image:

And pick out a Color Scheme

And use it for your design:

Other useful pages
https://forum.freecodecamp.org/t/get-some-feedback-about-personal-portfolio/500160/2
https://forum.freecodecamp.org/t/critique-tribute-page/500610

There is a Video Tutorial here:

THIS 'Any additional questions' SUBMIT FORM is breaking out to the right hand side, on my browser.

Screenshot 2022-03-20 9.44.23 AM

Your page looks good @tyui78. 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.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Change the cursor to a pointer when hovering over the submit button

Thanks Alless! I’ve updated the color of the form. I’m not sure why it’s showing up incorrectly in your browser however.

Thanks Roma!!

  1. I’ve deleted the html tags and utilized body tags in CSS instead.

  2. I added a reset button under the radio buttons for users to reset their radio button selection. Is there a way to actually untoggle the radio button by double clicking on it?

  3. I’ve removed the br to put spaces between elements, only within elements like the form. I’ve utilized line-height within CSS instead.

  4. I’ve changed the cursor to a pointer when hovering over the submit button.

Good job on points 1 and 4 @tyui78. Some additional things;

You don’t need a reset button. What I meant by “User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox” is just that. The way your form is set up the user can only make a choice by clicking on the radio button or by checking one of the checkboxes.
The user should be able to make their selection by clicking on the label.
Both your radio button section and checkbox sections are incorrectly set up.
In the radio button section clicking on any of the numbers will always cause the number one radio button to be selected.
In the checkboxes section, clicking on any of the labels causes the “Food” checkbox to toggle on/off.

Review the radio button lesson and the checkbox lesson to see what I mean.

There should be no <br> elements in your code. Review the link that was provided.
Rather than 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.

It’ s looking good Lawrence:




The Comment box is still jutting out to the right side:
Screenshot 2022-03-23 11.22.33 PM

This can be corrected by creating a #comments in the CSS with:

#comments{
  width:90%
}

CORRECTED CSS:

Screenshot 2022-03-23 11.25.11 PM

Hi Roma,

I have removed all <br> elements in the HTML.

I have also fixed the radio and checkboxes so that if the user clicks the label, it will not automatically select the label on the far left.

Thanks for your feedback!