Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create nicer looking forms with CSS

Monday, May 28th, 2018 by Servage

Forms are one of the commonly used elements in HTML. It’s a basic functionality for most websites to capture specific information via user input through HTML forms. So why do so many forms look really boring? Why are businesses still missing out on new customers because of unappealing order forms? It’s amazing what you can accomplish with form design. It looks good, gives a serious impression, and attracts users.

Examples

The images illustrating this article are two examples of beautiful order forms I’ve found online. They are integrated with the rest of the website design, they have a simple layout, there isn’t too much data to be added. Users are unlikely to be scared away by these forms.

How you can create nice forms

Instead of fighting your way through advanced element positioning with CSS, then have a look at Blueprint. It’s a CSS framework that comes with a lot of predefined, nice-looking CSS styles, that work in all major browsers. You can also check out their default form example.

With a CSS style like that, you already get pretty nice forms right out of the box. Now you just need to apply some custom styling (mainly coloring) to make it fit your individual design. It’s pretty simple to do, and you can have professional looking forms in no time.

One effect I would like to present in detail to you, is field-highlighting. The effect highlights a field in colors that match your website, when the user hovers over the field. With JavaScript you can make the effect stick as long as the field is active, no matter where the mouse pointer is.

<input type="text" />
input {
  border: 1px solid #999999;
  margin: 1px;
}

input:hover {
  border: 2px solid #006699;
  background-color: #f9f9f9;
  margin: 0;
}

Explanation

  • The example here has a default input textfield with a thin 1px grey border. When the mouse hovers over the field, the border gets thicker to 2px and a darker color. At the same time the background gets slightly darker, switching from white to light grey in this example.
  • The margin of 1px in the default state is necessary to accommodate the switch between 1px and 2px border size. Without margin the field would appear to be jumping one pixel between hover and non-hover state (flickering).
  • Overall this gives a really good impression of having selected the field. It looks nice, it’s simple, and it can be used with any colors to fit any website.

There are many ways of customizing forms to give a beautiful and professional impression. It’s simpler than you think, and it can really help you get new users for your web project.

Create nicer looking forms with CSS, 4.8 out of 5 based on 6 ratings
Categories: Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.