My first survey form... Feedback please :)

Code Feedback
1

Just finished my first coding project and would appreciate some feedback for improvements or how I can make the code look cleaner.

Any feedback good or bad would be greatly appreciated. :slight_smile:

2

Nice work on your first coding project! Definitely have good bones to the project. I have a few comments.

First, your form doesn’t actually require you to enter an age. I think this is because you’ve set the required tag to required="" for the email input when all that is needed is simply required.

Second, you could add a hover effect to the submit button to help improve accessibility and ux.

Third, you should code the form in such a way that clicking on the text next to a radio or check box will trigger choosing that radio option or that checkbox. I say this because otherwise it can be a little bit annoying to have to click precisely on the box. You can do this by using label for="" method and then linking it to the specific input by placing that input’s id value in between the "" in the label tag.

Fourth, the textarea tag can also have a placeholder attribute, which is probably the better solution than how you currently have placeholder text implemented by coding into the text area element after the textarea opening tag because the user has to delete the “Enter comments here…” when its being hard coded as text instead of placeholder text via the attribute method. That is, I would try <textarea id="funandgames" rows="4" cols="50" name="comment" form="usrform" placeholder="Enter comments here"> </textarea> instead of what you currently have.

3

Thanks for the detailed feedback.

  1. When I went to check the numbers not being required, I realised that I had not connected the button to the main survey form. (form = “survey-form”. I updated this and resolved all the issues with the input fields

  2. Brillint idea. Done!

  3. I just can’t figure out how to do this…

  • I love it so much
    1. Has been changed now.
    4

    Nice job on the fixes! I don’t see them in the codepen link yet, but when you get a chance you should update it so that way your friendly neighborhood reviewers can check in again to see the great changes!

    Regarding (3), happy to help, so what you do is you give your radio input a unique id, ie lets take your first radio and do the following: <li class="radio"><input type="radio" name="radio-button1" value="1" checked="" ><label>I love it so much</label></li> add lets say id="loveit" to the input tag. Then add for="loveit" in your label tag, so all together it would look like this: <li class="radio"><input type="radio" name="radio-button1" value="1" checked="" id="loveit"><label for="loveit">I love it so much</label></li> Rinse and repeat the same process, but using new unique id’s for each input/label, and you are all set!

    1 Like
    5

    Thanks. Here is the updated code if you want to have a look. Tried to make it look a lot more stylish. https://codepen.io/conicbe/full/oMdXYW/

    I spent 30m trying to build a blue background around the survey form section within the .top-container class. The only way I could get it aligned with the top was with padding-top: 1px. I thought that the top margin would need to be adjusted but this made no difference to the code. Could somebody explain why?

    Also I tried to make it so that when the user clicks the button, or hovers, the checkbox expands. I found this tutorial online https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox but couldn’t figure out how to implement this without completely rebuilding my codebase. Is there a better/easier way to do this?

    Thanks for the feedback

    6

    Great job for a first project, but there are a few errors that need to be corrected. The major one is the lack of responsiveness of the entry boxes, at smaller screen widths, the entry boxes leave the form container. Same is the case with the dropdown element.

    image

    image

    Also the content of the form description element leaves the container at smaller screen widths.

    image

    The textarea element leaves the form box at mobile screen size.

    image

    Hope this helps you.

    7

    Thanks so much for the feedback. This codebase has since been updated and the link to the updated version was in my 4th comment. I have updated the link on the main description if you wouldn’t mind having a quick look again. :slight_smile:

    8

    One of the major problems mentioned still persists in the new version, the input boxes still extend out of the form box at lower screen widths. The rest of the problems have been fixed in the new one, Great job.

    image