To read or not to read: here's my survey form project. Feedback is welcome!

Hello everyone. I just completed my survey form project. I would love to hear some feedback from you :slight_smile:

Here it is:

Looking good :slight_smile:

I just noticed it passes only 2 out of 10 tests, did you notice?

1 Like

Looks very basic and neat, I like it somehow. It’s kind of retro.

Some stuffs I could not get! first why there are submit button next to each textfield!? This kind of form may need only one submit unless you like to save progress for each step which could be done automatically(not manually)

Personally I don’t like the margin, padding and font-size and advances of textfield and button, they are so narrow and small!

For gender combobox I prefer you set no value by default.

Label of radio buttons and check boxes are broken! this is not good. instead of you put some text next to each radio/checkbox, use label tag to associate a text to a radio/checkbox. This will allow user to click on text and select a radio/checkbox.

Keep going on great work, happy programming.

1 Like

your design idea is good i like it. happy coding :nerd_face:

1 Like

Hello @SpaniardDev, thanks for your feedback.
Did you try selecting the “Survey Form” test suite? You must have run the tests with the tribute page option as the tests to complete were 17 in total :slight_smile:

You’re totally right! Hehe I just clicked on test without reading.

Good work!

1 Like

Thank you @a2-zubair

Thank you for you feedback @NULL_dev

I must have misread the instructions and put too many submit buttons, my fault. They have been cleared and the page looks now much better.

I applied some changes in the textfield, trying to improve readability as well as setting “no value” by default in the gender combobox.

The label are now all fixed and I can select the box just by clicking on text :slight_smile:

YES, now looks much better, the label for radio and checkbox indeed helps too much.

this is not critical, but seems you place the label in wrong place. Usually radio and checkbox elements are at the left of label.

For next move, I suggest you work some over textfield. I think they are so small. Also having some padding make them much better, with maybe larger font. But the submit button now looks much better.

About the combobox, now it looks better since there is no default value. You may also try to add one option as --select one-- for example and set it as selected, but do not assume it valid. Also have some read about option groups, they might help too.

ANother suggestion is using the relative units over absolute units whenever possible. For instance you used 1 pixel for bordering, in some devices 1 pixel is very small and almost hard to see. Using a relative unit helps have same real size for all devices.

Good progress, keep going on great work!
Happy programming

1 Like

Thanks for the feeback. I applied your changes, I believe it is much more readable now :slight_smile:

Just my personal opinion, when view on a wider screen the element is all the way to the left. I find it more comfortable to have a max width and center it like how the text of this forum posts work.

Edit: oops not why i post it as a direct reply to null

1 Like

VERY GOOD, it’s almost great! YES.

For being more professional, I suggest you try to set the same width and height of the combobox and the textfields. Currently combobox is smaller than text field. If it’s the same size the text fields will be great.

Also try to use the same height of text fields and combobox for submit button too.

Later I suggest you go for following:

  • (My suggestion) add some border radius for the form, also a very smooth shadow, and a different background color (maybe lighter yellow)
  • Add horizontal lines (<hr/>) between each section in elements group (e.g. after and before radio buttons)
  • For desktop, add more margin and limit the form width(you see there so much whitespace in your form).
  • Try to center the form, fill the elements can be fit like textboxes

Keep going on great work, happy programming

1 Like

you welcome :slightly_smiling_face:

@NULL_dev @PeterWebDev Applied some of the suggestions, I actually really like the shadow :slight_smile: . I don’t understand exactly what you mean by adjusting the from width. Shouldn’t it be the same size as the page? And as for mobile (I worked from the browser till’ now), how do I make the project more responsive overall? Thanks again :slight_smile:

O YES! Now very great progressive I see! very good. well done.

Please note one thing about textarea. You set cols(columns/chars) and rows for the textarea element. It breaks the mobile view since it asks the browser always place characters/cols as width.

You may not use the cols attribute, and control the width using css. Now you may set something like 93%, and it will never extends the panel parent when needs more space.

Another very tiny change you may apply is about the submit button. If the height of the submit button could be the same as height of the combobox and text fields will be awesome. Also some more padding could be great.

The horizontal lines you added helped so much for more pro like form. In css rule you set border-color to black. if you zoom, it’s more line a empty box. simply set a background color as black to make it filled.

My suggestion also is try to align the radio and checkboxes to left. You may keep elements at center, but align them(start all radio/checkboxes from one x position)

About the form width limiting I noted, you may just try max-width:5.5in for example for the form(.bborder class maybe) and see how does it look in desktop, better? (use margin: auto auto; to align it center)

Keep going on great progress, very good. happy programming.

1 Like

Applied these changes, it looks much better now :slight_smile:

Only problem: I couldn’t align the buttons to the left, is there a CSS command that I can use?

Awesome, dude you could fix the left align radios very easy.

Look I tried some minute with some grid, and came up with this

So since i could do it, some simply everyone else could do it.

For some help check this link that a tribute work from another great FCC user(@zurda ) here I grab!

Another suggestions I have for you, I think you may remove out the box(form) shadow, and the vorder when screen is on mobile. (not critical!)

Also what about you set a background color to the form? to bring it no-very-solid color scheme!?
I tried it, you may try it too. something like

Not saying go for these colours, just a suggestion.

Also found you applied opacity for text fields!? why? please don’t

Keep going on great work, happy programming.

1 Like

Thank you! I found my own (a bit rudimental) solution to align the buttons and I agree with the white background, it is more readable now :slight_smile:

Thanks for the mention, @NULL_dev.

I love this project, @Alessio95 :slight_smile: I like how aligned the top fields are. I’m currently working on this as well, and alignment is my biggest challenge, especially in the radio buttons.

One minor thing that has to do with content (and not design/ structure) is to mention you’re referring to reading *books (in the first question "How often do you read per week? " ) . I’d also add “check all that applies” in the check box question.

Keep up the awesome work! :slight_smile: Enjoy your programming!

1 Like

Thanks for the feedback :slight_smile: