Build a Survey Form - Berlin districts survey

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.

Happy coding.

Gerald

2 Likes

look good! I am no pro… I am self learner like you! check out my site I just finished: ainneo.github.io

Hi.
Your project is adaptive and looks nice. I like your #title with img and text around it.
I have 3 suggestions.

  1. 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.
  2. 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.
  3. Input 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.

Hi Frank

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 :slight_smile:

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.

1 Like

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.

Hi null_dev,

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.

Hi Ainneo,
I really like your Portfolio Site. Especially the contact-site where it says its boring :smiley: How did you do the typing sequenz on the home-page? That looks really nice and adds some spice!

Happy Coding and Happy Learning!
Ashanti

1 Like

HI, I used Java Script for the typing letters! Thanks for your feedback.

1 Like