Nov

30 Creative Web Forms Inspiration and Tutorials

by 2E Editorial in Tutorials, inspiration

15-swiths-creative-contact-form

Today, we are listing showcases modern web forms inspiration found around the Internet plus tutorials that teaches you how to create good looking forms by using the beauty of css and images.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

Creative Web Forms Examples

Web Forms Tutorials

Style Web Forms Using CSS

In this article we’ll look at how you can use CSS to create attractive and usable forms.

Fancy Form Design Using CSS

This chapter, which is fresh from The Art and Science of CSS, will explore the ways in which you can design a great-looking form, and provide you with the necessary code, which we’ll work through together.

Prettier Accessible Forms

Create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.

CSS Tableless Form

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form.

Tips For Creating Great Web Forms

Some really great tips or construction professinal wuality web forms.

Styling Form Fieldsets, Legends and Labels

Quick and simple form tutorial.

Showing Good Form

Building this was a challenge not just in CSS, but in choosing the proper markup how should such a widget be constructed?

Styling form controls

A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.

Push my button

The lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup.

CSS Form Design Template for Any Layout

The reForms technique is a CSS and Javascript solution I’m working on for form design issues. Although it isn’t complete, I’m providing a few code snips from the CSS and HTML that may be useful to other developers.

Enjoy this Post? Subscribe to the 2Experts Design Blog or follow us on twitter

Our blog is updated regularly with content related to web design, inspiration, tutorials, wordpress, freebies and much more. If you don’t want to miss out on future posts, you can subscribe by RSS or Email