Movie survey form

Hello everyone!

I just finished my survey-form project.
This is the link to the project :
https://codepen.io/bemvy/pen/LYbxByG

I hope I could get some feedback especially when it comes to its responsiveness and its optimization.
Thanks in advance!!
Loves.

Your form looks good @bemvy. 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.
    • Mentioning because you don’t need the html tags but mainly mentioning because some of what you have in the ‘Stuff for <head>’ box is incorrect. Nothing in there would get styled and there would be no div or p elements in the head element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • It’s a bad UX for the user to have to delete text in order to enter their comments
  • You force the user to select certain radio buttons / checkboxes to continue even if it’s a selection they don’t want to choose.
  • You’ll have a much easier time with responsiveness if you start using relative units rather than hardcoding pixel values for everything.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • There seems to be some alignment issues. Screenshot attached

Thanks for feedback. I tried to fix them :slight_smile:

I really like your design, the dotted border makes it look like a movie reel!

Roma’s suggestions will help a lot. For your boxes choosing your favorite director and movie, if you added a “None of these” option you wouldn’t be locking someone into a choice they may not want to make while still having it a required field.

Keep up the good work! =)

Thank you for suggestions. I will consider them. :))