Minimal Form Interface

A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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.


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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 115

Comments are closed.
  1. First i must say a big thank you for this. really minimal at best. but is there a way i can go back after filling out a step of the form. That way i can alter previous parameters before final submission?

  2. Great work. But to me it is all decoration because I have no idea how to submit the form to email. Can anyone help? Is there a finished example of where to place my receiving email address….

    • Nice Work. How do i connect this form to sendmail.php file to receive form details on email.
      If you have ready code then please share with me

  3. hello !
    Is There someone who could help me to release the php code to use the form ? I tried but it doesn’t work in reason of the hidden submit maybe…
    Thx for your help

    • It’s just a concept. You’d have to modify the code, so it stores the answers and submits them after the final answer (i.e store the answers in hidden inputs and use load() to pass the $_POST info to the PHP script).

  4. Just awesome .. how can it be plugged in WordPress I tried a lot but couldn’t figure it out.. please suggest some hints

  5. On Android, the form stops on the END, and do not show the “thank you” menssage.

    Does anyone have a solution to this problem?

  6. the validation

    stepsForm.prototype._validate = function() {
    // current question´s input
    var input = this.questions[ this.current ].querySelector( 'input, textarea, select' ).value;
    var char_length = input.length;
    if( input === '' ) {
    this._showError( 'EMPTYSTR' );
    return false;
    }else if ( char_length <4 ) {
    this._showError( 'CHARACTER' );
    return false;

    return true;

    // TODO (next version..)
    stepsForm.prototype._showError = function( err ) {
    var message = '';
    switch( err ) {
    case 'EMPTYSTR' :
    message = 'Please fill the field before continuing';
    case 'INVALIDEMAIL' :
    message = 'Please fill a valid email address';
    case 'CHARACTER' :
    message = 'A minimum of four characters allowed';
    // ...
    default :
    message = err;
    this.error.innerHTML = message;
    classie.addClass( this.error, 'show' );

    • lovely form – thanks for this! Has anyone modified this for Select input type? I’ve tired, but somehow the question shows up as a black rectangular box(block) and there is no ‘next’ button visible.
      I’m not entirely familiar with CSS, but I’ve tried modifying the list property to inline and inline-flex in the css file to no avail..

  7. Thanks for this. We’re using it on our website and it is fully responsive and submits the form after all the fields have been filled. Great work!

    Only thing is how does a user go back and change the previous field?

  8. I am assuming you can use a pre-define pick list for users to choose from?

  9. Hi, great work. I would like to insert a select combobox but i see the script only works whit a input field. Do you have an extended version for others fields? Thanks