From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website and thought that this is a really nice and user-friendly concept for a form.
So, the idea is to show the user just one input field at a time, without any clutter or distractions, but only with elements that are helpful in indicating how much needs to be filled. On the PageLanes form this is done by adding the step information to the button that will show the next question. But we tried a slightly different layout, with a tiny progress bar and a number indicator on the right side below the input field. We also added some subtle effects when showing the next input.
Please note that we are using some modern CSS properties like pointer-events and animations which are not supported in older browsers.
Initially, we don’t show the navigation arrow. When we focus on the input field, we’ll make it fade in.
The numbers in the bottom right tell the user how many questions there are in total and which question is the current one. Once they advance to the next question, we’ll show a progress bar that indicates the level of completion of the form.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The next question can be reached by clicking on the arrow icon or by hitting enter. In case there is an error, the error message is shown below the input:
A minimal form like this can be really useful for questionnaires or simple contact forms. The advantage is that the user is less distracted and the filling of this form seems like much less work. Clearly, an approach like this has its disadvantages, too. You can’t go back or have an overview of your answers. But that are features that could be implemented in some sort of way. What would be interesting to see is how a form like this performs and if it’s preferred by the user.
We hope you find this inspiring and we’d love to hear your thoughts on this topic!
Beautiful, looks better then TypeForm. -_-
LOL April Fools
Nice!
simply briiliant execution! Big ups to the whole codrops crew!! YOU ROCK!
I love it!
Nice and neat 🙂 Though, would have been great usability wise if a back option was also there.
I love it 🙂
We love u Mary Lou!
Brilliant ! I definitely will practise it
Nice one!
Brilliant, as always 😉
Very pretty, very well designed visually but some #UX fails for normal users out there like:
1. Pressing the return key means progressing to the next question – a normal user might press return to say more on the same question.
2. No back button to go back to a previous question.
It’s the little things like this that affect our normal users experiences and how they enjoy our website and proposition more than slick single field forms that look great and minimal to us designers.
Users don’t look for minimal, they look for easy to use.
This is nice, BUT when I hate one thing, then it this way of presenting a form !
I prefer to see the entire context , before I start entering any data.
If I am not forced to enter data this way, I immediately jump away from such a page.
Anyway, nice work.
What?! o.O
This was definitely my first thought as well. I think it will depend heavily on the context of the form, what the fields are, and how they relate.
For example, I would not be inclined to use this style in an account registration form, or any form where a cluster of fields are interrelated (as is the case with address fields or credit card fields).
However, I would gladly use a style like this for a survey form, where I want each question to be taken independently and all I want is for the person to consider the current question. It might even be advantageous in some situations. Consider personality style surveys – sometimes people might look at questions they’ve already answered and say “well, it looks like I’m trending a certain way, so I’ll just keep answering that way.” Obscuring answered questions could drive a more organic response.
So, there are definitely places where a style like this is a bad idea, but it’s also got a lot of good application, I’d say.
Great looking form – but the usability of it would unfortunately make it crash and burn in a real life situation.
Some points:
– No way to see later questions when at the beginning of the form
– No back or reset button/way to change answers
great stuff here. only a few points:
– i’d like to see a short progress bar from the beginning, when i’m going to answer the first question. it should be optional if this is consider a module
– a tooltip with a descriptive list of the remaining steps (viewable on click or on mouseover) should be attached to the steps indication below the field
– the ‘next’ arrow should be trasparent by default and change its state (clickable / not-clickable) based on the current field validity (better if it depends on HTML5 form validation).
keep it going.
Nice work, but too bad that we can’t step back…
A dreams comes true..;)
Being featured in a Codrops Article. Thanks for mentioning us!
Marcus
Really nice
There’s a jQuery plugin for that: Promin. There’s an implementation similar to this on flightpan-berlin.de.
Lov it 😮
One word, Awesome!
Mary Lou I came to this site after browsing many many websites , I am searching for something just like you tube videos slide effect. ( another video comes on clicking right navigation) . Will anybody here help me in doing my job in easy way. Thanks in advance .
Fancybox could be of help…
http://jsfiddle.net/M78zz/
This form is simple, but its not simplistic. Simplistic implies its oversimplified, in a bad way.
You’re annoying. And it’s not ITS but IT’S. Having said that, great job Mary!
It’s the concept, something you may get inspried from. great job Mary!
Really nice inspiration, thanks!
And as others a back button is sure needed.
Where’s the back button?
Very nice work and sharing.
Let me have question. Could you extend this tutorial with another filed like dropdown, radio and checked?
Really simple but strong beautiful , thank Mary Lou !
Awesome!
Very miminimalistic Mary, but how to get back to correct)
muy bueno, ya lo voy a usar en algun proyecto.
saludos desde argentina
This is really great. Thanks!
I forked the project for my lunchbreak randori to add the back button.
It’s a quick feature hack so it’s far from being pretty (the animation’s pretty bad too)
Code here: : https://github.com/zmarouf/MinimalForm
How do you go back a form field?
Thank you!
I like the idea, but it doesn’t seem very practical for the vast majority of forms. There’s a bit of initial guesswork involved, and I’d prefer to see more info on a page than have to constantly click to see the next question.
Bad UX. On my phone I had to constantly touch the form elements to bring the keyboard back to type.
I love it!!!!! great and simple idea. A back button would be nice and needed. Amazing work.
Nice concept but I think it has have some limitations. What if we need a select box or radio buttons? But yes, for forms that have just text fields, it is a good concept especially for a mobile / responsive site.
Very nice work. How to configure the recipient?
Any chance we could get the back button fix? Also fixing the mobile UX problem would be great too.
Anyways awesome tutorial!
Very nice
A back button would be awesome. Also, an implementation with dropdown boxes as a possibility instead of just text-fields might be useful. Regardless, awesome job!
Mary! Nice & fresh tips! Like it!
Has anyone figured out a way to implement mail validation on the form?
expecting the same..trying hard to do this.. if it is done by anyone plz let us knw..
I’ve found a JS code to validate the email and later I have integrated it into the javascript of the form in the file stepsForm.js, it’s dirty and needs more optimization but it works!
Inside the declaration of the _validade function I’ve put:
var inputmail = document.getElementById(‘q7’);
var validmail = inputmail.value;
var at = ‘@’;
var dot = ‘.’;
var lat = validmail.indexOf(at);
var lstr = validmail.length;
var ldot = validmail.indexOf(dot);
// current question´s input
var input = this.questions[ this.current ].querySelector( ‘input’ ).value;
if( input === ” ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if( this.current == 6 ) {
if ( validmail.indexOf(at) == -1 ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.indexOf(at) == -1 || validmail.indexOf(at) == 0 || validmail.indexOf(at) == lstr ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.indexOf(dot) == -1 || validmail.indexOf(dot) == 0 || validmail.indexOf(dot) == lstr ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.indexOf(at, ( lat + 1 ) ) != -1 ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.substring( lat – 1, lat ) == dot || validmail.substring( lat +1, lat + 2 ) == dot ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.indexOf( dot, ( lat + 2 ) ) == -1 ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
if ( validmail.indexOf(‘ ‘) != -1 ) {
this._showError( ‘INVALIDEMAIL’ );
return false;
}
}
Forgot to say it, this.current needs to be the number of the question you want to validate as email
The latest version of code on GitHub now features HTML5 validation. Using an input type of “email” will do some basic validation. What exactly are you looking for? I’d be willing to put something together.
yes! love it!
Looks great.
Hey I’ve already did something similar but came to an dead end.
I wish to simplify the interaction of the user, so I’ve keep the TAB for focus.
I don’t know why.. if someone can answer me for this… but the Focus offset the form.
But it wasn’t really my dead end. In fact, I’ve came to the textarea and didn’t know what I can do to keep the ENTER and TAB to go to the next field but keeping the functionality to make a real TAB or a return of line with ENTER in the TEXTAREA.
Well, after, I saw your use of an arrow and really love it, not sure I’m ready to leave the focus function and go with the arrow solution…
But still thinking of the eventuality.
Here is my test : beta.rdsign.net/exemple/formClean/
Feel free to leave me what you are thinking for a solution… or if you know why the form is offset when using focus and how to prevent this.
Thanks and thank you Mary for this great inspiration.
I need more then one question by page.
Did someone try to modify this to have more then one question per page.
How to add/validate dropbown box instead of text box in a field?
Reset the form back to start using JS
Please please @MARY LOU can you help me.
Thanks
That is just.. awesome and sexy
Nice work!
I saw this on a website and i’ve been looking for source code for months! Yay! Thank you 🙂