Survey Form built with Bootstrap - Feedback is welcome and appreciated

This project was heavily inspired from the example provide, although it is built using bootstrap, and contains slightly different content. It is designed to be responsive on Desktop, Tablet, or Mobile. Please let me know your thoughts. mKeYxN

Looks really good! very good.

Responsible WELL!

The only is you used the right text-align for element at right column too!
Use no right align for elements at the right.

This is also a suggestion, but adding a horizontal line using <hr/> between each section could make the view more easy to read.

Keep going on good work, happy coding.

Few Minor Suggestions –

  • show cursor pointer on hover of submit button
  • change the icons alongside dropdown to single downward facing arrow (otherwise it looks like increment/decrement)

Everything else looks fine.
Good job!


Thank you for the great feedback and suggestions. I added a class for the checkboxes and assigned them text-align: left; Also, I added some some horizontal rules to separate the visual elements and hopefully make it easier to read. Let me know what you think of the update


Thank you for the great feedback and suggestions. I added the cursor: pointer; on button:hover {} and also changed the dropdown to single downward facing arrows. Changing the arrows was easier than I thought it would be all I had to do was change the class to form-control

O yes! looks much better now, very good.

I would add more hr lins after radio button group, before and after checkbox groups too.

Looks really good! World class.

Keep going on great work, happy programming

And I forgot! This is not critical, but about the combobox, if you cset them unselected could better. It’s more informative for user and takes more attention to select a correct value.
Later before you submit the form to any backend server, you would check if all values are set correctly.

So if you set some default values(like right now, student for role combobox), user may submit the form before it reviews the input values, and since the student is a valid value for you, but could be a invalid for user.

Happy coding!


That is another great point. Thank you. It seems whatever option is listed first defaults as selected. Do you recommend having a placeholder type value or a null option? I added a null for now, but it feels a little empty. Thoughts?


You could use –select an option– as default value to dropdown.

Hey @joedetmi The web page just looks great.
I just want to suggest you to select the colour of the text with respect to the background, I feel each and every part of web page is important and there should not be any difficulty to see it.

check i made some changes (just little padding on top and black color)

And this is previous one

Which one you feel needs specific attention to read the text?


Great suggestions! Thank you. You are absolutely correct. Given the scale of the font and relative proximity to the main content it definitely needed greater contrast and a little more padding. Changes made, let me know what you think.

It feels perfect now!
which bootstrap did you use 3 or 4?
even check this materialize out (similar to bootstrap) you may want to use this for future projects.


I used Bootstrap 4. Also, thank you for recommending Materialize. I will have to look into that more for sure. I’ve only scratched the surface of material design, but definitely want to incorporate it in more of my work. If this truly is a framework that handles this for you, well…that is just amazing.

@NULL_dev @pawansingh972 @Kedar-K

Thanks again for all the great suggestions, you’ve truly help this project become something great. I look forward to any future collaborations and hope you have a great day.

Hey, you’re welcome!
You too have a great day @joedetmi.