Survey form: Reading attitudes

[scottdoakley]

Hello again

I’ve just finished building my ‘Reading attitudes’ survey form. This one took a little bit longer than the last project! I’d be grateful for any feedback on how I can improve the form and my code.

Here’s the link to the survey: https://codepen.io/scottdoakley/pen/PoGdPmd

I appreciate your help.

Thanks,
Scott

[Roma]

Your form looks good @scottdoakley.

I only mention this occasionally and since I don’t have anything further to say about your form;

• The placeholder text shouldn’t mirror the label. Rather, you’d want it to show the format the user is expected to enter.

You don’t have to change anything if you don’t want.
Good job.

[bbsmooth]

The only major issue I see is that the keyboard focus indicator is not adequate. You are relying on the browser default for this and on my Firefox that default is a 1px dotted blue outline that I can’t see at all on the background color you are using. I always customize the focus indicator because the browser defaults are almost never enough.

One minor suggestion I would make is to get rid of the CSS width on div#form-background and use max-width instead (in em units). Doing this you don’t even need a break point for responsiveness. And using ems will allow the width to grow as the font size increases.

But yes, I agree with @Roma, this is very good. Nice job!

[scottdoakley]

Thanks @Roma, appreciate that That makes sense about the placeholder text. I’ll make that change and keep it in mind in future.

Thank you @bbsmooth as well! That’s great to know about the keyboard focus, I’ll customise the focus indicator. I’ll also try using max-width instead as I didn’t realise that was an option.

Thanks again both.