Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

Forms Redesigned - Natural Language Form Using Only CSS 3 and HTML 5

Difficulty: 25 / 50 Tweet
natural language form layout

At some point in time, every web developer is going to get bored with creating the same old contact form over and over for every website he works on. That's why in today's tutorial I'm going to show you how to create a natural language form using only HTML 5 and CSS 3. It only has a few fields, meant to demonstrate concept, but you can extend it if you want.

Natural Language Forms in web design are replacements for the classical forms we all know. With this approach sentences are constructed by user input forming a block of text that actually has meaning when read by a human being - close enough to "fill in the blanks" quizzes that you used to solve in school.

Going back to the code, I will not go through each CSS rule I've written because most of them are self-explanatory. Below are the ones that are a little tricky:

  1. Our text inputs need to have custom placeholder colors so we need to use browser specific rules to alter their aspect:
            
                  ::-webkit-input-placeholder { /* WebKit browsers */
                    color:    #B5E655;
                  }
                  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    color:    #B5E655;
                    opacity:  1;
                  }
                  ::-moz-placeholder { /* Mozilla Firefox 19+ */
                    color:    #B5E655;
                    opacity:  1;
                  }
                  :-ms-input-placeholder { /* Internet Explorer 10+ */
                    color:    #B5E655;
                  }
            
          
  2. Also, we're going to need to change the default drop-down appearance so that they blend nicely with our design:
            
              select.dropdown {
                font-size: 1em;
                color: #B5E655;
                border: none;
                border-bottom: 1px dashed #EFEFEF;
                -webkit-appearance: none;
                -moz-appearance: none;
                background: none;
                width: auto;
                text-indent: 0.01px;
                text-overflow: "";
                box-shadow: none;
                font: inherit;
              }
              select.dropdown:focus {
                outline: none;
                border-bottom: 1px dashed #DD0000;
              }
            
          

Here's a demo of how the final result should look like. Hope you like it. »

comments powered by Disqus