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.
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.
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.
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.
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!