First Survey Form Attempt (Feedback is welcomed)

Hello everyone!

How are you? Hope you are doing well today.
This is my first finished attempt on making a survey form using a simplistic design with a restaurant-themed webpage. Feedback and further improvements are appreciated.

(some fonts are cursive)

Editor view:

Debug view:

Full view:

Thank you.

Hi @plethoire,

  • Your form looks okay but only passes 13/17 user stories. Keep the tests when you fork the pen and make sure you pass all the user stories.
  • For the radio buttons (and when you do add the checkboxes) make it so the user can click on the button or the label.
  • You header points to a different pen. If the code is the same, good. If not, you may get feedback on a form you weren’t expecting to get feedback on. Plus you have to remember to make changes in both of them.
  • make your form responsive. On smaller screens things overlap each other.
  • don’t use the <br> element. Use margin and/or padding in CSS for styling.
  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • no need also to use the <html> or doctype tags
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in CSS you have a selector twice. Move the content from the bottom on to the top.
    • In HTML you have duplicate id's. They can be used only once. If you need to style something multiple times use class.

Hi @Roma,

Do you mind if i asked you a screenshot of what you saw in smaller device your (like the overlaps shown)? I tested this site in debug mode using an iphone 5 and the site was responsive and none of the screens were overlapping. Thanks, it would be a pleasure.

Hmmm… I can only check one checkbox out of all of them.
I think you gave them all the same name.


You gave all of your input radios the name “Quality”.

For the first set of checkboxes, give it a name like “FoodQ”
And the second set a name like “DrinkQ”
and so on.
The names have to be different for each set, or I will only be able to select one checkbox out of all of them.

Alright, thanks for the clarification of the input radios of this project.

Your welcome. Always glad to help

HI @plethoire, here’s the screenshot…

Hi @Roma,

I have fixed the overlaps and padding towards the project using a media query. I hope the layout is more responsive now.