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: Elevate all your marketing with Mailchimp Smarts.

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. looks great!
    has anyone figured out a way to implement mail validation on the form?

    • Added a quick and dirty e-mail validation. It works but need to improve it more since it checks each input each time rather than the specific e-mail field. Just replace with this the “//the validation function” *& ‘q7’ with the name of the field where e-mail is to be entered.

      stepsForm.prototype._validade = function() {
      // current question´s input
      var input = this.questions[ this.current ].querySelector( 'input' ).value;
      var email = document.forms["theForm"]["q7"].value;
      var atpos = email.indexOf("@");
      var dotpos = email.lastIndexOf(".");

      if( input === '' ) {
      this._showError( 'EMPTYSTR' );
      return false;

      if (email != ''){
      if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=email.length) {
      this._showError( 'INVALIDEMAIL' );
      return false;
      return true;

      return true;

  2. Hi. Love this idea. How can I also introduce some multiple choice questions instead of just the text box? Ie, radio buttons or checkboxes? Thanks for this awesome thing!

  3. This is awesome. Forms play such an important part in user experience it’s important we nail down two things – how we want the user to use the form and to make it as pleasant as possible. I’ve seen people put function before design on forms, and I’ve seen people go as far as to remove the borders from forms and have them the same color as the background – just to be different!

    It’s all about striking the perfect balance!

    – Brian

  4. Thank you. Very nice indeed. I’m eager to use it but don’t know where and how to specify the email it should get sent to. It doesn’t seem to work with regular action-php. I’m not a programmer so that might sound really dumb… sorry.
    Then again, this has been asked over and over already and there’s been no answer. Why wasn’t this made clear on the tutorial itself? That’s just mean.

  5. Thanks for the tutorial but how do i run a php script on action when i have form.submit() and set the form action to the script it just downloads the source php file. please help!

    • I dont understand how to see answer to the question people posted. My question is super stupid how can I send to an email address?
      thanks awesome work as always

  6. How can you see the answers afterwards? It is possible to get the answers send to a specific email-adress?

  7. Very nice. I implemented it with a bit of PHP so I could do something with the data. Basically, check $_GET, if it’s null display the form, if there’s something in it display the Thank you message.

    • Hi, I have also implemented php code to submit data. The question is: how are you submiting form?
      here is solution that worked for me but im not satisfied because “input type tag” creates new:

      I want to submit form with button not with –input type=”submit”:–
      Send answer -> original
      also not working…


  8. You know, what That is Way I keep connected with this site, God bless u people……….

  9. i’ve been searching this kind of form. anyone know how to add cancel, skip, go previous and reset button? it would be good if it show the summary after completed the form.

  10. does anyone know how to send email with this form?
    I used method POST and set the action field to my “sendemail.php”, that works with all my websites, but it does not work with this one.

  11. Anyone altered it to use other elements as well? like textarea or checkbox?
    This is a good way to implement minimal forms but limited to input boxes

    • If you would use an textarea you’d notice that the field will not stay open after you enter data in the textarea field.

      This can be quite easily be fixed:

      Change …

      [] document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {


      [] document.querySelectorAll( '.input__field' ) ).forEach( function( inputEl ) {

      Now the selector will work for all elements with the class “input__field”, instead of just input fields.

  12. Is there a way to reset the form and get back to the first question some moments after being submitted without refreshing the page?!

  13. This is super awesome love the idea, However can someone help me to have a drag and drop file upload area inside this form section as a process of the submitting the form data.