Ieahleen asks feedback for Survey Form

[ilenia]

I have procrastinated a lot on claiming the first certificate because I really don’t like what I create, can I have son feedback on how to make this survey form look better?
I need brutal honesty and constructive criticism, I don’t like it but I can’t pinpoint what needs to be changed

FreeCodeCamp Project: Survey Form

[Marmiz]

My only “real” feedback is about UX and the textarea: don’t set fixed content.

Maybe your user will start typing from there, or maybe not. In any case I find it hard to justify that “Your thoughts” is a good helpers.

Perhaps that’s more suited as placeholder than value.

---

Then according to how much time you want to spend, it’s a really good habit to spend some time with form accessibility.
In many work scenario forms are critical to business, so make it more inclusive and accessible to every user is a lot of time a must.

For example:

<label id="number-label">How old are you?</label>
    <input type="number" id="number" placeholder="your age" min="13" max="130">

You forgot the for attribute in the label.

Or

<input type="submit" id="submit" value="Submit">

A lot of time you want to specify role="submit" as well.

---

Again according to how much time you want to invest, you can add some validation feedback with CSS as well, using the :invalid css selector.

---

Finally as for the look, I am not a big fan of default html inputs. They always seems too small an “constrained”.
Which is a very adopted feeling as the vast majority of forms have wider inputs with bigger fonts.

I think a great starting point would be reading a bit of Material Design principles on text fields.

Hope it helps

[ilenia]

It helps, thank you, I will keep working on it - Like this I have some points to focus on

[Roma]

Your form looks good @ilenia. Some things to revisit;

• Run your HTML code through the W3C validator.
  • There is an HTML syntax/coding error you should be aware of and address.
• I agree with the above that the textarea should have placeholder text rather than text the user may have to delete.

[lasjorg]

It looks pretty nice.

1. I would center the description text.

2. I would give the first 4 input elements some padding, and increase the font-size and line-height.

3. Semantically, it would make sense to use a fieldset element instead of the div containers you have for each input group. You can style them the same.

4. Add resize: vertical to the textarea so the user can only make it taller and not wider.

5. Style the submit button. A submit button is a call-to-action, the user should want to click it. It’s like the big red button on the control panel, you know you shouldn’t click it but it looks so interesting that you want to click it (P.S. don’t click random red buttons on control panels).

6. The align: right on #submit isn’t a valid property. You can set the button to be display: block and use margin-left: auto to push it to the right side. You will have to account for the margin on the form div by giving the button margin-right: 10px as well.

7. I would add some media queries and control the form width at smaller screen sizes. Make the form take up more of the screen width at lower screen widths. I’d make it full width at the smallest screen size (like below 420 or whatever).

Good job, keep it up!

[ilenia]

Thank you everyone for your precious input, I think I did a lot of progress on the project, going in a slightly different directiong that I was going originally.

It’s not perfect, but it’s almost there on feeling I can submit it. I still need to style the submit button and see for a better handling at smaller screen sizes, but I think it has improved