Goodbye to boring forms
So many times you see the same old boring and repetitive forms from site to site. For the most part everything is a big vertical list of input fields that you repeatably tab through until your finally at the submit button. I am guilty just as much as the next developer for doing this, as it is a very standard way of setting up forms for sites. One day i set out on the web to see what other ideas that developers had came up with to “spruce up” or at least give it a better look. Well I had came just across that very idea that I was looking for when i came across a few web galleries.
Now I have taken what code I have found, modified it a little and even cleaned it up a little bit, but what you will find below will blow your sites users away when the visit the site. With this form set up it allows your form to engage your user more as you “tell a story” and guide your use through the form instead of just having them tab to the next line.
Well enough taking, why not take a look at the code below and lets try this out!
The CSS
.mad-lips label {
white-space: nowrap;
padding: 0 0 .5em;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
.mad-lips input {
font: inherit;
background: transparent;
border: none;
border-bottom: 1px solid #111;
outline: 0;
display: block;
}
.mad-lips label span {
font-size: .8em;
line-height: 1em;
opacity: .7;
filter: alpha(opacity = 70);
}
Content goes here
The HTML
</code> <code> </code> <code><form accept-charset="utf-8" method="get"> <p class="mad-lips">Hello, my name is <label></label></p> <input name="firstname" type="text" /> <span>firstname</span> <label></label> <input name="lastname" type="text" /> <span>lastname</span> and I'm writing you today to learn more about the <strong>2003 HONDA ACCORD LX</strong> listed for <strong>$8,455</strong>. I live in the <label></label> <input name="zip" type="text" /> <span>ZIP</span> area and I would like to hear back from you soon and learn more about this vehicle. Please call me at <label></label> <input name="zip" type="text" /> <span>my phone number</span> at your earliest convenience. <input type="submit" value="submit" /> </form> </code> <code> </code> <code>
So with all of that said, you now should have a beautiful inline form. Trust me, your site visitors will love the fresh look and honestly it really does help keep your visitors more interactive with your site and forms as opposed to just laying out another boring vertical form.
If you have any questions about this quick tutorial or would like further information on customization … OR just liked this article, please feel free to leave a comment and I’ll get back with you as soon as I can!
Comment (1)
Hola, Super post, tienen que marcarlo en Digg!