Feedback on my Survey

I really struggled with formatting the “Submit” button.

This is some awesome work that you’ve made here! I just have a couple of suggestions.

  • When I shrink the page, the Name: Email: and Age: will let their input box go onto a new line. It’s hard to follow when the input box goes to the next line and the label is located on the line above.

  • When I shrink the page, the Email: input goes outside of the container.

  • When I shrink the page, the radio labels aren’t lining up with the inputs so it makes it confusing to figure out what exactly I’m selecting.

I really like what you did with the submit button! It looks really nice. Great job with the form validation as well! :slight_smile:

Thank you so much. I’ll go back and work on making it responsive.

1 Like

I haven’t finished making it responsive, but I did go back and design it for a mobile. Now I need to make it work at larger screens.

1 Like

Just a few things:

  • Technically, your textarea needs a label. If you don’t want to use a <label> tag then you can add an aria-label attribute
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
  • I like that you are using fieldset, but you are actually using it in a few places where it shouldn’t be. You should only use it with multiple input fields. So you don’t need it around the select lists or textarea. It’s questionable around the three input boxes at the top, it is definitely not required for those three.
  • Personally, I think you should change all the light blue headings to actual <h2> tags.
  • Speaking of those light blue headings, they are not color accessible. The contrast with the background is not enough.
  • Only 1 <h1> at the top of the page.
1 Like

May have been easier to just make the button a button. Like so…

<div id="submit-button">
  <button type="submit" id="submit">Submit</button> 
<div>

Note that if you decide to do the above you’ll need to restyle it in CSS.

1 Like