2020 Survery_Form Please review & leave feedback

Hello Everyone. I had previously completed these challenges in Jan of 2019 – However, I was much more focused on the actual tests passing rather than making the site pleasant to the eye.

My focus is now on creating a design and then making that design a responsive layout – typically focused on mobile first approach. Please resize.

I’ve decided to redo all of my projects in Jan of 2020 and become more active on the FCC forums/twitter dev community.

I’d very much appreciate any feedback on my Survey Form. Design, Code etc.

Thanks for your time

This for has the good basic components for a start but it needs a large amount of improvement.
Some of the things you can change for your page to look and possibly function better will be listed below:

  • Your text inputs are too long and thin. Try either increasing the height, decreasing the width, or both.
  • A lot of people put age limits on their forms that only allow 16-18 and older. If you want, you could change it to thirteen and older… I’m fourteen.
  • Try to place the checkbox and radio input buttons closer to their indicated choices. If you know what I mean, it’s really hard to use the eye to “trace” which button leads to which choice. See the images below:

For this one, I can kind of guess which buttons match to the indicated choices.

For this image, It is extremely hard to sort out each button to each choice.
Try to make you buttons packed together more and on the same line. I can see breaks between the buttons and the choice texts.

  • Just like the text inputs, the submit button is way too long and too thin.

Overall on everything else, you did a great job. I really like that little glow around your form window. It adds a nice touch of detail to your page.
The colors you added match really well.

Awesome job. Keep up the great work.

1 Like

Hi @thisisntcolton, welcome back.

  • 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 HTML you use an id more than once. This can be seen by clicking on any of the labels in the checkbox section. The user is brought to the ‘Name’ field instead of the checkbox being selected. The whole checkbox section needs to be reworked.
  • the radio buttons/checkboxes don’t align with their labels very well. It makes for a bad UX as the user isn’t quite sure what they’re clicking.
  • change the cursor to a pointer when hovering over the Submit button
  • you don’t have any JS, why have the ‘onkeyup’ attribute?
1 Like

Hi Roma, Thanks for taking the time to look over this. I had copied my first label and input which happened to be the name-label. I didn’t realize I forgot to remove those from my checkbox section. Whoops!!!

The onkeyup – I didn’t actually realize this was JS, I was reviewing the MDN document on text-area and assumed it was a applied through the markup. I guess some critical thinking would have helped there.

Love the idea of changing the cursor & I’ll work on aligning my radio/checkbox labels – I def see how that would be confusing.

Appreciate the feedback.

Hi Conner,

Thanks for taking the time to check out this project.

Great suggestion on making my input section bigger. Adding padding to this did the trick nicely.

The age limit being 16 was more along the mindset of – if this was a real company, that would be the cut off age of accepting someone as a client. In reality, that should probably be 18.

I’m having a difficult time duplicating that layout your screenshots show. — What Device / Browser are you using to view this? What screen size are you viewing it from? – It doesn’t appear to become too wonky until around the 560px break-point. – with that in mind, I should add another media query for smaller devices to fix that.

I’ve added more padding to the button, I do however prefer it to span full for this specific style.

the glow effect was achieved by adding box-shadow. Still something I’m experimenting with, but it turned out nicely – glad you liked it. Color theme is also a big element of UI that I’ve been practicing - happy to see it was noticed.

Again, I really appreciate you taking the time to review this. – I’ll continue trying to duplicate the layout issue with the radio/check boxes – please provide more insight onto why they appear different for the two of us if possible.

I’ve had a hard time duplicating the above screenshots provided by @ConnerOw1115

I’m viewing it from the dev tools and I’ve switched between multiple screen sizes. The biggest thing appears to be my extra text on the dropdown causes it to fall out of alignment.

Could you provide a screenshot / additoinal information no how this is displayed for you?

It would be better to align your checkboxes and radios something like mine, for example. You could do them differently if you want. Make sure the button input is on the same line as the choice text.

No need for me to supply a screen shot. I see what @ConnerOw1115 see using latest Chrome on a MacBook Pro. At no screen size do I see what you see.

That being said, I switched to Firefox on my MacBook Pro and I do see things aligned as you showed in your screenshots.

1 Like

That’s very interesting. I typically use Firefox for development due to their Dev tools having better flex/grid support than chrome. – That being said, Viewing on updating chrome on Windows 10 seems to show the correct layout – I then went and tested this on my MacBook pro and do see the same layout issues.

Do you know what is causing this issue between operating systems?

Coming from a UX perspective – There tends to be more agreement that vertical radio buttons are generally much safer than a horizontal layout.

I’ll spend some time working on the checkboxes – after further reading, the best data handling practice is to have the label after the input tag which I didn’t do. I’ll fix this and have them inline.

I’ll definitely be digging deeper into why the layout appears different between browsers / OS. Thanks for bringing that to my attention.

In the meantime - firefox displays this layout the best.

As you’re seeing, browsers interpret differently. One thing you can start with is zeroing out margin and padding in CSS. Another thing is not use absolute values like pixels though it seems you’re already adhering to that.
Now that you realize there’s an issue it seems like you’ve got a handle on it.

1 Like