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: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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.

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

  2. Very nice work and sharing.
    Let me have question. Could you extend this tutorial with another filed like dropdown, radio and checked?

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

  4. Bad UX. On my phone I had to constantly touch the form elements to bring the keyboard back to type.

  5. I love it!!!!! great and simple idea. A back button would be nice and needed. Amazing work.

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

  7. Any chance we could get the back button fix? Also fixing the mobile UX problem would be great too.

    Anyways awesome tutorial!

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