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

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