Feedback required on a survey Form inspired by another survey form project

Hello Everyone,
I came across a very creative feedback form on the forum here and tried to use it as inspiration for creating a feedback form. I particularly loved how the checkboxes were numbered and had hover effects.
I have tried to use similar effects for checkboxes and radio buttons and would appreciate any feedback on the form.

Here is the codepen link to the same:
https://codepen.io/koraavo/pen/ZEXPbpG

Thanks in advance :slight_smile:

I like it. Design is pretty basic, but can work, although I’d probably put some other design, but overall it’s good. Try adding rounded borders, gradients, different fonts and I’d change design of the last form: Gender part could have different layout, Submit button could be bigger, letters bold and bigger. Overall, pretty good. :smiley:

@Koraavo, some things to revisit first;

  • 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.
    For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Your local box is not a server.
    You can search and find sites that will host your image for free

I’m not sure what I’m looking at with your form. While you technically pass the tests for checkboxes there is nothing that makes any sense to the end user as to what those checkboxes are for. It makes for a bad UX.
Research and find out when/why you would use the keyboard element.

Hello,
Thanks so much for the feedback Roma.
I decided to finally not use the style and created a new survey page.
Here’s the link to the page.

Hi, Koraavo!

I like the design. It’s neat :+1:

Here are some things that can be improved on:

  • The text is kinda hard to read, so you might want to change the text color.
  • Also, the placeholder for the Year was cut, you might want to adjust it as it can’t be fully seen in a small device.
  • Lastly, the radio are not well placed when viewed in a smaller screen.

I suggest trying out the survey form tutorial in the responsive web design beta course :slightly_smiling_face: some of the solutions to your current project’s issues are there.

Hope my answer helps! :blush:

Thanks @jkal_eunkyung I was supposed to give a bold effect to the text, totally missed it. Thanks for letting me know. Maybe I will even change the color to something lighter. :slight_smile:
Let me look at the placeholder for year, I might have to put it out as a question altogether I think :expressionless:
Thanks so much for the feedback :slight_smile:

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.
    Your page passes 16/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper right of each section and then click on the respective ‘Analyze’ link.
    The one for CSS is good. Use it and address the issue(s). (be wary of duplicating selectors, it can make maintenance a nightmare)
  • Change the cursor to a pointer when hovering over the submit button

I don’t often comment on styling because I’m not the best at it but;

  • the text on your form often blends in with the background making for a bad UX as it’s almost impossible to read
  • You have things on your form that as a user I don’t know what they are for. For instance;
    there are nine things under songs that are checkboxes. Is the user supposed to guess which are real songs? Does the user check a box just to check a box?
    the same with the albums section. There’s no clear indication of why the user would select one over the other.

Thanks for the feedback. I am just about to recheck them all. I guess since I made some changes there have been some errors which initially the form had passed.

Both the checkboxes and the albums sections are favorites. It is basically meant for the user to select their favorite songs and albums among the list of songs that billie has sung(Songs) and also select their favorite album. I just included 9 of her songs and some of her albums. It was why the fieldset was named favorites.
Since that was not very clear, maybe I would just add a label to guide them to it.
I will update the rest and change them in the new version. Thanks for the inputs :slight_smile:

What I meant was the simple registration form tutorial under the beta course, sorry :slightly_smiling_face: In my case, the tutorial on making the mini project registration form helped me a lot on the radio placement, the visibility of placeholder text in a small device, and the input boxes’ sizes to be uniform and responsive all throughout the different screen sizes.

Glad to help :blush: & good luck!