Need Survey Form Project Feedback

Code Feedback
1

Here’s the link to my project: Click here

I wanted to solve it using Grid, and it was a success for bigger screens, not so much for mobile devices. To make it responsive I tried many things, posted questions on various forums (including this one), and to my demise, none solved the issue. Some people asked me to get rid of the grid all together and try flexbox. Although, I could’ve done that, I just wanted to solve this using grids because it’s so intuitive, and I was stubborn enough that I solved it after a month, with the help of a friend a few days back. The solution is pretty amazing - it’s a grid within a grid.

I’m so relieved right now because I can take a short break and go to the next project.

Let me know what you think of the project. Any feedback will be helpful to me.

Thank you for reading.

1 Like
2

Your way of layout is a common and nice way.
Be careful with some of the text sticking into unwanted areas.
I don’t know why I should be under 10. How about 13 or greater?
The background color you picked is really nice.

Try to get a better font for your form. One that matches AI. Something like Share Tech Mono or Iceberg.

3

Thank you. I’ll fix that.

4

Hi @skanda1395, your form looks good. Some things you may want to revisit;

  • A good example of why you don’t duplicate id's. In your form click on any of the radio button labels in the second group of radio buttons and watch what happens in the first group of radio buttons.
  • This <label for="radiogroup_1">Which of the following industries would benefit the <em>most</em> from AI?</label> is incorrect. The value of the for attribute of the label element must be the ID of a non-hidden form control.
    • You have this two other times too.
  • Change the cursor to a pointer when hovering over the submit button
5

Pretty great form, the responsiveness feels very natural and I like that you kept it simple in style, so really good job on that :slight_smile: One thing I would maybe suggest is adding some style to the label/questions so that they look different from answer options because it gets just a bit clunky in mobile (maybe font-weight: bold). Other than that, really neat and I commend you for you dedication :smiley:

I did notice, though, that you have multiple same ids on the page for your radio buttons, which is a bit of a problem because it messes up your labels in this case, so when you click on ‘Yes’ in the last question (the word, not the radio button), it actually checks ‘Art’ in the first radio question.

Hope this helps! :slight_smile:

6

What do you mean by non-hidden form control?

7

The label for attribute must contain the input id value

<label for="foo">Foo:</label>
<input id="foo">

And input cannot be hidden <input type="hidden"> , however it can be styled as hidden <input style="display:none">

8

I’m sorry, I don’t get it. Could you point to the mistake in the code?

9

Run your code through this Validation Markup Service

10

Thanks. I removed those for and id attributes. It worked for the other elements like select and input. For example, when I click the labels Name or Email, it highlights the input element next to it. I applied the same method to the rest of the elements in the document and it doesn’t work and throws the errors you mentioned. Why is that?