Movie survey page-Feedback and suggestions

Code Feedback
1

Movie survey

2

Looks nice!
I would customize the CSS of the controls, to make them bigger and improve the UX a bit.

I also suggest you get rid of the name and email field; anonymous surveys are nicer and cleaner, nowadays.

Apart from that, there’s not much to improve, I guess. Unless you are looking for some specific feedback.

1 Like
3

Thanks Jonn, i will keep those in mind.

4

Welcome to the forums @smashingudit4, your form looks okay but there are a few things you need to revisit;

  • On using codepen. 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • codepen provides the boilerplate template for you. The way you tried to implement it is incorrect. Just remove your <html> </html> and <body> </body> elements. Also remove the whole link to your stylesheet as that’s not needed in codepen.
  • After you’ve removed those element and the link, run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since you copy/paste from codepen you can ignore the first warning and the next two errors.
    • There are a lot of errors you need to correct.
  • Do not use the <br> element to force line breaks. There are ways to group your questions to keep similar ones together. Consider looking into the <fieldset> element for your radio buttons and checkboxes.
  • Review the lessons about creating radio buttons and checkboxes.
    • Users should be able to click on the labels to select, not just the radio button and/or checkbox.
  • Change the cursor to a pointer when hovering over the submit button
  • Work on responsiveness.
    • your form overflows on smaller screens
  • You have a duplicate height in your form declaration.
1 Like
5

Hi @smashingudit4:

Welcome to the forum!!

In your #id comment maybe you could use the 4 padding properties: This could help to fit with your form:

Some example:

#comments{
    
   margin: 10px;
    padding: 100px 0 0 400px;
    
}

Thi’s isn’t an exctly fit but it’s helps to undesrtad the concept

1 Like
6

Thanks @leonardootc that was helpful.

7

Thanks @Roma for those detailed suggestions.