This Tech Tip includes several design customizations to help catapult your app directly to web 2.0.  If you are already a web designer you may be familiar with some of these techniques but have not yet tried to apply them to your Caspio web forms.  Take a look at these methods and see if one might add extra visual appeal to your app.

Web 2.0 Form Design

Change Your Buttons to Images

If you would like to change the default buttons you can replace them with any image.  This is a standard feature in the Caspio Bridge Styles section.

Buttons Before and After

Replace Standard Buttons with Images

Add Rounded Borders for Input Fields

A quick and easy way to add rounded corners to your web forms is to use CSS3.  This recent adaptation of style sheets is supported on nearly every modern browser.  Unfortunately this standard has not yet been adopted by Internet Explorer, but don’t worry, your web form remains fully functional.  Soon, CSS3 will be the standard.  This article will show you the already popular and widely supported CSS3 technique for rounded corners.

Sample Rounded Corners

Add Rounded Borders to Input Fields

Adding a Gradient Background to Input Fields

After rounded corners, gradient backgrounds are another subtle change that can have a big impact.  Adding a gradient adds a nice three dimensional quality to your forms.

Adding Gradient Backgrounds to Fields

Add a Gradient Background to Input Fields

Glossy Heading Text

Finally, another way to give your forms more of a three dimensional feel is to add glossy headers.  The technique outlined here is especially interesting because the headings remain text with only a gradient overlay.  This allows you to still use Caspio Bridge parameters to customize the contents of each header.

Glossy Heading Text Before and After

Glossy Heading Text

Change the View Details, Edit Record and Delete Record Links to Images

In Caspio Bridge drill down reports, the link to the individual record details will display as a hypertext link.  Although this is suitable for most applications you can also replace this text with an image.

Replace the Record Links with Images

Replace Record Links with Images