Survey form project - feedback

Hi guys,
I have recently started to learn HTML/CSS here and I would appreciate your feedback on my survey form. I have tried to sort of copy the example survey without looking at the source code.

Thank you in advance :slight_smile:

2 Likes

Hi! First of all, welcome to the forums :blush: Your form looks pretty neat and it’s responsive, so good job on that! Not sure if you’ve noticed, but you’re failing one of the tests, so make sure you check that out and fix the issue. Other that that, I have a couple of suggestions:

  • Make the text next to your checkboxes and radio buttons clickable. Like, for example, if I click on the text saying ‘Definitely’, I’d expect the radio button next to it to respond. Remember, you can do this with a label element for each input.
  • Set the cursor property of your submit button to pointer. Again, it’s just something that users are likely to expect.
  • This is just a personal preference, but I would make the spacing between different questions a little bit bigger, just for slightly better readability.

Other than that, good job and good luck on your next projects! :slight_smile:

Hi, thank you for your feedback. I appreciate it.
I have not realized that I have an issue with one of the tests. I have tested it yesterday and it passed, but then I decided to change id=“submit” for class… well it is fixed now :slight_smile:

I agree with your other points. I have already added labels and cursor property. I will look into the spacing between the question in the evening.

1 Like

Hi @karlji welcome to the forum! Your design looks great! :+1:
The submit button is hidden, that’s because your body height is set to 100% and the content of the page is larger that the viewport height.
You can do two things.

  1. change your body height: 100% to min-height: 100% Or…
  2. Delete the height attribute. But this only works if the content is always bigger that the viewport height.

I hope I have been helpful. :smiley:

1 Like

Hi @ricardoantonio thank you for the feedback.

I am not sure what do you mean with the hidden submit button. Could you please explain it? I have tried to stretch the window multiple times, but I can still see the submit button.

I will try to learn more about body height as I am a bit confused about your first solution right now :smiley:

I see your project in a small device (my mobile), maybe that’s why i see your project in a different way. But I could be wrong. I hope someone explains this better to us.

My english is not good, but i will try to explain the diferences betwen height and min-height :sweat_smile:

Height

This blocks the height of an element to the given value:

body {
   height: 100%;
}

The body will have 100% of the viewport height no matter what. Even if the content spans more than the whole viewport height;

Min-height

body {
  min-height: 100%;
}

This means the body height will start at 100%, if the content pushes the div beyond 100% it will continue growing.

1 Like

The Submit button part is a mystery for me. I just checked it on my phone and I can see it normally, it scales down with the form. I hope that someone will explain it :slight_smile:

Thank you for your explanation I believe that I understand now. And don’t worry about your English. It is perfectly fine :+1:

Maybe my mobile its not working well :laughing:
I see again your project and it works, i see the submit buttom :sweat_smile: sorry.

1 Like

Hey @karlji welcome and good job!
The texts are concise and deliver the message, nothing feels over-populated.

Keep it up!

Hi,

Clean and simple, nice work :+1:

Happy coding and look forward to seeing the next project!