EchoEcho.Com Tools

ONLINE TOOLS :

CUSTOM FORMS

This tool let's you add a customized formstyles to your pages.

The code will only work on Internet Explorer - since IE is the only browser that support custom formstyles.

The code will not cause any harm if viewed on older Netscape browsers - it just won't have any effect, so a normal formstyle will appear if viewed with Netscape.

Fill in the fields and let this page do the programming for you.

Then copy and paste the code into your own HTML document.

As easy as it gets!

Please note: This tool creates codes and examples on the fly. In order to do this the page makes use of complex dynamic HTML that is only supported by newer versions of Internet Explorer.

1: FILL IN THE FORM

OPTIONS

SETTINGS

Background Color =

Font =

Font Size =

Font Color =

Padding between border/content =

Border Color =

Border Thicknes =

Border Type =

2: LOOK AT THE SAMPLE BASED ON YOUR TEST

Sample text field:

radio 1 radio 2 radio 3

checkbox 1 checkbox 2

Sample text area

NOTE:
When you click the "Test New Scrollbar" button, the code for the scroll bar is generated below. If the test scrollbar is okay, you can copy the code from this page and insert it into your own.

You can enter color values using pre defined names (green, blue, etc) or HEX values (#FFCC00, #CC9900, etc).

3: COPY THE CODE THAT FITS YOUR NEED

3a: Change all formfields on your page

3b: Change all formfields within a single form

3c: Change single formfields only

3a: CODE TO CHANGE ALL FORMFIELDS ON THE PAGE

Copy This To The <HEAD> Section Of Your Page

No Code Available! - Click The Above Button To Generate The Code

3b: CODE TO CHANGE ALL FIELDS WITHIN A SINGLE FORM

Insert the following code right above your <form> tag
After that, add </div> right after your </form> tag.

No Code Available! - Click The Above Button To Generate The Code

3c: CODE TO CHANGE SINGLE FORMFIELDS

Copy This To The <HEAD> Section Of Your Page
After that, add class="customform1" to the desired fields.
For example: <input type="text" class="customform1">

No Code Available! - Click The Above Button To Generate The Code

Using multiple styles on same page
The code produced with this tool creates a CSS class called customform1.

If you want to use the tool for several different styles used on the same page you should simply change the name customform1 to customform2, customform3 etc.

Setting width and height of form elements
The code produced with this tool does not specify attributes for width and height. That is because it's rare that ALL form elements on a form should have the same width and height.

However, you can specify the width and height of single fields similar to this example: <input type="text" style="width:120px; height:30px;">

<< BACK TO MENU