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.
By in Playground on
minimalform
View demo Download Source

From our sponsor: Market smarter with Mailchimp's automated messaging tools.

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.

MinimalForm01

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.

MinimalForm02

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:

MinimalForm03

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!

Find this project on Github

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.

http://www.codrops.com

CustoCursors_featured

Custom Cursor Effects

Phenomenon_featured

How to Create Smooth WebGL Transitions on Scroll using Phenomenon

Webglimagetransitions_featured

Creative WebGL Image Transitions

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 115

Comments are closed.

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

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

  6. I need more then one question by page.
    Did someone try to modify this to have more then one question per page.

  8. Reset the form back to start using JS

    Please please @MARY LOU can you help me.

    Thanks

  10. I saw this on a website and i’ve been looking for source code for months! Yay! Thank you 🙂

  11. I would like to use this from, but have to do it with Ajax, can you help me please

  12. hi
    I am lost, so how do you specify for this one where the form goes exactly? Sorry newbie.

  14. Awesome but needs a way to go back otherwise it’s less usable than a standard form.

  15. How is the contact form submitted? I downloaded the demo but I don’t seem to be able to find where the email goes once it’s been submitted.

  16. Awesome UI and UX! Just wanna to thank you guys for this amazing contents you provide about frontend, such a great font of ideas and inspiration. I used this layout in a personal project, it was perfect for my needs; The project itself it’s a free and open tool to import you loved tracks from last.fm to Spotify, if you guys wanna check: here is it: http://grit.ws/lastlovefy (appreciate any feedback!)

    • That’s a great tool! Thanks for sharing it here. BTW, it’s Codrops (not Codedrops) 😉 Thanks.

  18. Does this form work with PHP? I have added an action attribute and i am trying to store the input data in my DB but seems like the form doesn’t capture the data. Has anyone tried to do this? Thanks

  19. I would like to see a previous arrow which add possibility to edit the input. Great idea anyway , keep it on