Colorful web forms

Written by Paulo Vale on Monday, December 17, 2007

Web forms can be beautified using style sheets. Colors, borders, cursors, text style and other style properties can be changed.

Here is an example. How to do it?

First you will need to add to your template CSS file the following script, or just past it under Page Properties > Header and Footer > Header Text:

You need to create a style for each item type. This example refers only to Text Items, however if you follow the link to test example, you also have examples to Select Lists and Text Areas items.

Now you can reference your style in the "HTML Form Element Attributes" section under the item properties (in this case for Text Fields) like this:


Note: This is 100% compatible with firefox. Internet Explorer unfortunately doesn't handle the hover and focus effect in form fields, all other functionalities work how expected.

Related Posts by Categories

Widget by Hoctro | Jack Book
  1. 2 comments: Responses to “ Colorful web forms ”

  2. By Anonymous on January 31, 2008 at 2:29 PM

    This is so cool, I'm going to include it in an app that I'm working on.



  3. By Fyxx on July 2, 2010 at 5:42 AM

    Typo in the first line:
    script type="text/css"
    should be
    style type="text/css"
    I got very weird symptoms when I tried it with 'script': fields moved around on screen & borders missing.