Dear Fellow Campers,
I have just completed my Survey form, having wrestled with responsiveness for some time.
If you had a moment, do take a look and write any comments and/or suggestions for improvement. It is most appreciated.
look good! I am no pro… I am self learner like you! check out my site I just finished: ainneo.github.io
Your project is adaptive and looks nice. I like your
img and text around it.
I have 3 suggestions.
- Really hard to read with your
body tag background. Maybe will be better to use another image as a background or gradient or monophonic color.
- Your form items (
inputs, textarea, options) are not connect with labels due
for=“email” for label and
id=“email” for example (the rest are the same). Then you can click on label with text Name: and
<input name=“name”> get autofocus and you can fill it. It’s comfortable.
placeholders are good but the required word inside is barely noticeable. Imagine you fill a form and you travell from one to another input field by the
TAB key on your keyboard. When you tap the
TAB you automatically go to the nex
input. And you fill in a form and press
SUBMIT button. There is an alert. You missed email field.
Will be more understandable if you show to user somewhere outside an input placeholder that this
input is required.
For more information check the W3C documentation.
And you can add some styles to your textarea, button etc. but without extra styles that looks good already.
Hope this helped.
Thanks very much for the feedback.
Yes, the background is quite dominant. I initially tried to soften it a bit, but then it didn’t quite have the same feel. It’s the seat cover from the Berlin underground, so I thought it would be fitting. I’ve exchanged it for another (seat cover
Thanks for the link as well. I’ve opted for a “required” note next to the label as asterisks don’t really make sense in such a small form.
Background image is not a pattern texture, so it not suitable for repeating. But looks cool.
Layout is responsive, but for mobile I see elements uses only half of the space they could get, check:
Just check the wasted space at the right side of the text field. why?! let textfield grab more space.
Just name and email text fields have associated
label tag to them. other have no any
label associated. please fix.
There is no a disabled and default option in your combobox, please fix.
No placeholder for textarea, please fix.
submit button is not at the center of form! add
text-align:center for your
.submit-button class, and it’s fixed.
Also it’s better to not override the font-size with absolute pixel unit. use em instead.
I suggest you read this survey form challenge walkthrough article which comes with all these notes I noted as common mistakes with more explanations, solutions, samples and suggestions. I hope it could help you out if you need more info about issues.
Keep goin on great work, happy programming.
Thanks so much for the very thorough feedback. I have adjusted all of those comments (apart from the background; might have to wait for a better quality pic there) and it already feels a lot better.
Great tip about the em; my CSS page is now a lot smaller.
Excellent article btw. I shall keep my eye out for your posts in future.
Many thanks once again.
I really like your Portfolio Site. Especially the contact-site where it says its boring How did you do the typing sequenz on the home-page? That looks really nice and adds some spice!
Happy Coding and Happy Learning!
HI, I used Java Script for the typing letters! Thanks for your feedback.