Building a Survey Form - Feedback Welcomed

Hello freeCodeCamp community, here is my attempt at the survey form project. Please if anyone has any constructive comments I’d really appreciate them.

Additionally, I tried to add a “<nav” bar for fun, but cant seem to get it to be fixed on the top of the screen, but not having the links scroll over the rest of the content. Any suggestions?

1 Like

hey @matthewshane.rogers

looks good mate, i see what your mean about the nav, the best thing would be to shift it to the right, you can do this by having justify-content: flex-end; instead of center;, and remove the wrap

1 Like

Mr. Rogers is awesome. I have no choice but to give you feedback now.

  • The blue links at the top are not accessible on that background (not enough color contrast). As for your problem with seeing content under them, the hint is that you are not setting position: fixed on the correct element.
  • As I make the text size bigger the form box actually narrows and thus the input boxes narrow as well, cutting of the text I have typed in there. And as I narrow my browser window, at certain points the input boxes are so narrow that I can only see a few characters (or for really big font sizes, I can’t see any).
  • Even with the default text size your form div narrows too much at certain points, cutting off text in the inputs and making the content only a few words wide. And then suddenly it will jump from very narrow to very wide again (this is not an ideal transition).
  • Your checkbox/radio button labels aren’t quite correct. The for attribute should point to an id, not a class. Also, since you are wrapping these with the label you don’t need the for attribute.
  • Any required fields should be graphically designated (such as using an asterisk).
  • The textarea needs a label (just turn the p element right before it into a label).
  • Most people think of buttons as just wide enough to fit the content. I would do this on your Submit button and center it under the textarea.
  • Your minimum value on IQ is too high. Seriously though, Since you only want a 2-3 digit number you should probably make it just a few characters wide.
  • The parental advisory for explicit content is a nice touch.
1 Like

Hello Rodgers, you have already received some constructive advice in the prior post so I will concentrate on - bar issue.

As for fixing the bar to the top, I suggest using

position : top;
position : fixed;

As for linking in the same document - go over https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements

This should help.

1 Like

Hello @matthewshane.rogers, 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 first two errors but everything else is valid. You’ll get explanations of what’s wrong with your code.
1 Like

Thank you so much for the detailed feedback!

I think I’ve addressed each of your points, except the second and third bullet. Could you let me know if you’re still experiencing the same problem? Also, can you help me understand how you are changing font sizes while inputting information into the text inputs? (Or are you playing with the HTML in the editor?)

To increase the text size, using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll the middle mouse button to make the text bigger. When you do this now you’ll see that the inputs get wider to accommodate the bigger text sizes but at some point they break out of the dark blue box container. So you need to make that container grow as well.

Your labels are better but they are still not correct. Click on the word ‘Safety’ a few times and you will see what I mean. You have two issues here:

  • The ‘for’ attribute on all of these checkbox labels point to the same id.
  • All of the checkbox inputs have the same id.

Same issue for the radio buttons.

The ‘for’ attribute on the label for the textarea is not pointing to the id of the textarea.

1 Like

Thank you for the advice, now I think I’ve solved the zoom issue and the radio button and checkbox issues. However, I don’t know how to solve the situation with my last radio button “never”, it stubbornly refuses to align horizontally to my radio button. Would you mind giving some input as to why this might be?

Double check the spelling on that lavel tag.

Also, since you are wrapping the inputs in label tags, you don’t need the for attribute on them. In fact, in this case, it is actually making them inaccessible because your input tags don’t have id’s so you have the for attribute pointing to a non-existent id and thus they aren’t working properly. You will know when they are working properly when you can click on the text on the page and it automatically checks the input for you.

It does handle increased text sizes much better now, but you’ve got a new problem. Just using the default text size, narrow your browser window as far as it will go. On mine, the content starts to get cutoff on the left side and there is no way I can scroll to fix it. And if you make the text size bigger then things really start to disappear.

My suggestion, start with the browser window as narrow as possible and style the page so it looks good (there should be no horizontal scroll bar). This will be your default CSS. Then slowly widen the window and decide where a good breakpoint will be to enhance the styling on the page. This is the trend nowadays, start small and work your way bigger (or wider in this case).