This week’s Tech Tip is an assortment of quick tips to give your forms a modern “web 2.0” facelift. If you are familiar with the latest web design trends, you probably already know that web 2.0 promotes a user-centric design methodology, often with slick glossy elements that invite user interaction, while keeping the overall effect clean and uncluttered.

Did you know that it’s easy to apply web 2.0 design to Caspio-powered forms?
Whether you are just getting started or have CSS web design experience, our step-by-step instructions make it easy to add web 2.0 features to your own Caspio web forms.

Top 5 Tips for Web 2.0 Form Design

Apply our top 5 tips to give your forms a slick web 2.0 appeal.

1. Change Standard Buttons to Images

Replacing the default HTML buttons with an image of your choice is a simple way to add a little extra punch to your web form design. This is standard feature in Caspio Bridge Styles, where you can use the point-and-click wizard to customize a wide range of built-in style options, or use your own custom images and CSS rules.

Change Standard Buttons to Images

Learn how to change standard buttons to images.

2. Create Rounded Borders for Input Fields

A quick and easy way to add rounded corners to your form fields is to use CSS3.  This recent adaptation of style sheets is supported on nearly all current browsers, with the exception of Internet Explorer.  But don’t worry; your web forms are still fully-functional, and IE support is coming soon.  This tip shows you how to apply the popular CSS3 technique for rounded corners.

Create Rounded Borders for Input Fields

Learn how to create rounded borders.

3. Add a Gradient Background to Input Fields

Gradient backgrounds in fields are another subtle web 2.0 design technique that can have a big impact.  Adding a gradient to input fields adds a nice three-dimensional effect to your forms.

Add a Gradient Background to Input Fields

Learn how to add a gradient background.

4. Add Glossy Headers

Another way to give your forms more personality is to add glossy headers.  The technique outlined here is especially helpful because the header is still text and only uses a gradient overlay.  This way, you can still use Caspio Bridge parameters to personalize the header content if needed.

Add Glossy Headers

Learn how to add glossy heading text.

5. Change Text Links to Images

In Caspio Bridge Reports, the various drilldown options (Details, Edit Record and Delete) appear as hypertext links.  Although this is perfectly suitable for most applications, you can replace the text links with images to save space and add visual impact.

use images as links but not only the text links

Learn how to change report text links to images.

Check out the Tech Tip articles for detailed instructions, or contact Caspio Support with any questions.

Call to Action Block Call to Action Block