What do you guys think about my survey form with a wizard?

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
  • Paginator
  • Illustrations

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.

2 Likes

pretty good. looks nice, easy to understand, little no no clutter. you dont have to scroll at all. I give it an A+

1 Like

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.

Good work :slight_smile:

1 Like

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.

1 Like

Thank you very much!

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.
:white_check_mark: Fixed

Thanks for reporting this problem.

1 Like

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.

2 Likes

I appreciate it! :smiley:

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.

2 Likes

:white_check_mark: Validations added
:white_check_mark: Confirmation page added

:white_check_mark: Thinking back about it, I agree. Added.

:white_check_mark: Visual consistency is important. Fixed.


The problem

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.

To make the “pages” of the form I’m using a CSS trick. The element is hidden by default and I show them by adding a class using javascript. The wrapper is set to an auto height to make it responsive and everything works out.

Failed tries

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.
2. Add an animation between the class transition by javascript: since I didn’t know the upcoming size I was not able to create something based on this.


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.

2 Likes

Great job! It’s good to have you as a member working so hard on feedback.
Keep up the spirit :star_struck:

1 Like

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!

1 Like

I missed this one. :sweat_smile:

:smiley: Thanks for pointing out!