Hello everyone! When I took the Survey Form challenge I asked myself: “What kind of form design options do I have to make a great UI/UX?” After reading a bunch of articles, I built this design.
Just a quick summary of my design choices:
- Related information grouped into steps
What do you guys think?
Also, I would like some feedback about the code. Here is the link to the project
Do you want to know more about this topic? Here is an article with an amazing explanation.
pretty good. looks nice, easy to understand, little no no clutter. you dont have to scroll at all. I give it an A+
Nicely done form. Take care of the increase in size of 3rd and 4th page of your form as it differs from first 2 pages. Illustrations are good looking. Put validations in text boxes for Name and Email id as well. After the Submit page you can tell the user that the form has been successfully submitted.
I really like the style of your form. It is a very creative one, too. There seems to be an error though:
When you click on the “+” and “-” buttons for the 1-5 rating, the form gets submitted. Don’t put those as your submit buttons.
Thanks a lot! That a great tip. I’m looking forward to implementing these changes.
I appreciate it!
Wow, a button is set to submit by default. That’s something to keep in mind in my next projects.
Thanks for reporting this problem.
I think it’s great. You’ve really made something that is pleasing to use, and different from most of the other survey forms I’ve seen.
I wish mine was as cool.
Love the design and concept !! However:
as @JayeshTiwari03 pointed out, the size of the last two pages is different than the first two which, I think, is a bit jarring and disrupting to the flow. I would add a transition effect so that the form could gradually increase in size if I didn’t want to the make the first two “boxes/pages” bigger.
I think that there should be a back button too (in addition to the dots) because I feel it’s not readily apparent that the dots can be used to navigate back and forth. Also the fact that the dots are small makes them hard to click, which is a bit annoying.
the submit button on the last page is not the same size and shape as the previous ones. I feel it would be better if the buttons on all the pages were the same size and shape.
Other than that, I love everything else.
Confirmation page added
Thinking back about it, I agree. Added.
Visual consistency is important. Fixed.
I tried to increase the height of the different pages but it was a lot of space. So I decided to create an animation for it. The problem is that I don’t know how to.
1. Add a transition to the wrapper: Didn’t work. I think it’s because of a class isn’t being assigned to it or something.
If anyone has an idea of how to implement this. No time to exemplify in code? No problem. Just the core concepts and I’ll do my best to figure things out.
Again, thanks a lot, guys! This is an awesome project and community. I’m learning a ton making these projects.
Great job! It’s good to have you as a member working so hard on feedback.
Keep up the spirit
Love it! Sounds like the most important issues have already been addressed, but I would add that “features” is spelled wrong on the Product Usage page. Maybe proofread everywhere else, then celebrate your hard work!