CodeThatForm User Guide 

The following "8 steps" instruction will guide you step by step through the CodeThatForm configuration process.

  Download package with CodeThatForm script and unarchive it.

For free version (STD) download use this link.

If you'd like to buy full version (PRO) use this link.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

 Read Standard vs PRO to know the differences between CodeThatForm Standard and PRO.

  Create the basic HTML file.

Your file may look as following:

<html>
<head>
<link href="common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="jsform/layered.js"></script>
</head>
<body>
</body>
</html>

At the example above we're about to create Layered JSForm. In case you'd like to create Simple Window write

<script language="javascript1.2" src="jsform/layered.js"></script>

instead of

<script language="javascript1.2" src="jsform/codethatform_windowed.js"></script>

  Now lets create your first CodeThatForm.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To create new JSForm use function wincreate() as at the example below:

<script language="javascript1.2">

var w;

var html = "<table border=0 cellpadding=4 cellspacing=2 width=100%><tr><td>"+
	"<p class=title><img src='img/alarm.gif' align=left valign=bottom> It's time to wake up!</td></tr></table>";

function wincreate () {
	w = new CLrWindow(
	384, 256, 150, 10,' <font size="2pt" color="#F9B800"><b>CodeThatForm - layered</b></font>',html,'#F0DCA3','','',
	[//buttons
		{w:16,h:14,src:'img/orange/min.gif',over:'img/orange/minovr.gif'}, //min
		{w:16,h:14,src:'img/orange/max.gif',over:'img/orange/maxovr.gif'},//max
		{w:16,h:14,src:'img/orange/close.gif',over:'img/orange/closeovr.gif'},// close
		{w:16,h:14,src:'img/orange/rest.gif', over:'img/orange/restovr.gif'}//restore
	],{ bgc:'#761500',h:22, bgi:'', css:'title' }, 
	  {color:'#F9B800',width:1}, 0, 0, 2, 'Alpha(Opacity=80)');
	w.create();
}

</script>

Learn more about CodeThatForm creation.

  To give your users possibilities to change form styles you can create a form like this:

<form>
<p>Press this button to Create New Layered Form &nbsp;&nbsp;
<input class=btn type=button onclick="wincreate()" 
 value="Create New Box">

<p>Change background color for your new form - 
&nbsp;&nbsp;
<select class=formlist name=bgcolor 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.bgColor(bgcolor.value)">
<option value="#16731A" selected>&nbsp;Green&nbsp;
<option value="#000000">&nbsp;Black&nbsp;
<option value="#F0DCA3">&nbsp;Yellow&nbsp;
</select>

<p>Change window title for your new form - 
&nbsp;&nbsp;
<select class=formlist name=win_title 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.Title(win_title.value)">
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> 
               CodeThatForm - layered</b></font>" 
               selected>CodeThatForm - layered
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> 
               My favorite example</b></font>">
               My favorite example
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> Small form</b>
               </font>">Small form
</select>

<p>Add adition HTML-code to your new form - 
&nbsp;&nbsp;
<select class=formlist name=html 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.appHTML(html.value)">
<option value="<tr><td><p class=title2>
               <img src='img/deal.gif' align=left 
               valign=bottom>&nbsp;
               And do many important things.</td></tr>"
                selected>And do many important things.
<option value="<tr><td><p class=title3>
               <img src='img/alarm.gif' align=left 
               valign=bottom>&nbsp;
               It's time to wake up!</td></tr>">
               It's time to wake up!
</select>

<p><input class=btn type=button onclick="
    if (w_l == null) alert('You should create at least one 
    Layered Form. Press Create New Box button.'); 
    else w_l.Caption({bgc:'#000000',h:22, bgi:'', 
    css:'title'})" value="Change Caption Style">
</form>

Learn more about changing CodeThatForm properties.

  To give your users possibilities to manipulate with form actions you can create a form like this:

<form>
<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Press this button to Create New Simple Window Form
&nbsp;&nbsp;
<input class=btn type=button onclick="wincreate()" 
 value="Create New Box">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Change window coordinate
<p>
<b>x</b>&nbsp;<input class=formlist style="width: 50px" 
               name=x value=300>&nbsp;&nbsp;&nbsp;
<b>y</b>&nbsp;<input class=formlist style="width: 50px" 
               name=y value=200>
&nbsp;&nbsp;&nbsp;<input type=button value="Move" class="btn" 
onclick="if (w == null) alert('You should create at least one 
Windowed Form. Press Create New Box button.'); 
else if (x.value == null) alert('You should enter x-coordinate.'); 
else if (y.value == null) alert('You should enter y-coordinate.'); 
else w.move(x.value, y.value)">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Change window size
<p>
<b>width</b>&nbsp;<input class=formlist style="width: 50px"
                   name=win_width value=400>
&nbsp;&nbsp;&nbsp;
<b>height</b>&nbsp;<input class=formlist style="width: 50px" 
                    name=win_height value=100>
&nbsp;&nbsp;&nbsp;<input type=button value="Resize" 
 class="btn" onclick="if (w == null) alert('You should create 
at least one Windowed Form. Press Create New Box button.'); 
else if (win_width.value == null) alert('You should enter width.'); 
else if (win_height.value == null) alert('You should enter height.'); 
else w.resize(win_width.value, win_height.value)">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>&nbsp;Load URL
<p>
<input name=url maxlength=1024 size=30 
 value='http://www.codethat.com'>
&nbsp;&nbsp;&nbsp;<input type=button class=btn 
onclick="if (w == null) alert('You should create at least one
Windowed Form. Press Create New Box button.'); 
else w.loadURL(this.form.url.value)" value="Load">

</form>

Learn more about using CodeThatForm actions.

  Now lets try to open our HTML file in the browser:

CodeThatForm

  So... a complete code for this example you can see here:

<HTML>
<HEAD>
<link href="/common_codethat.css" rel="stylesheet" type="text/css">

<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="jsform/layered.js"></script>
<script language="javascript1.2">

var w_l;

var html_layer = "<table border=0 cellpadding=4 "+
    "cellspacing=2 width=100%><tr><td>"+
	"<p class=title><img src='img/alarm.gif' "+
	"align=left valign=bottom> It's time "+
	"to wake up!</td></tr>";

function layercreate () {

	w_l = new CLrWindow(
	384, 256, 150, 10,' <font size="2pt" color="#F9B800">
	<b>CodeThatForm - layered</b></font>',
	html_layer,'#16731A','','',
	[//buttons
		{w:16,h:14,src:'img/orange/min.gif',
		 over:'img/orange/minovr.gif'}, //min
		{w:16,h:14,src:'img/orange/max.gif',
		 over:'img/orange/maxovr.gif'},//max
		{w:16,h:14,src:'img/orange/close.gif',
		 over:'img/orange/closeovr.gif'},// close
		{w:16,h:14,src:'img/orange/rest.gif', 
		 over:'img/orange/restovr.gif'}//restore
	],{ bgc:'#761500',h:22, bgi:'', css:'title' }, 
	  {color:'#F9B800',width:1}, 0, 0, 2, 
	   'Alpha(Opacity=80)');
	w_l.create();
}                          
       
</script>
</head>
<body>
<form>
<p>Press this button to Create New Layered Form &nbsp;&nbsp;
<input class=btn type=button onclick="wincreate()" 
 value="Create New Box">

<p>Change background color for your new form - 
&nbsp;&nbsp;
<select class=formlist name=bgcolor 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.bgColor(bgcolor.value)">
<option value="#16731A" selected>&nbsp;Green&nbsp;
<option value="#000000">&nbsp;Black&nbsp;
<option value="#F0DCA3">&nbsp;Yellow&nbsp;
</select>

<p>Change window title for your new form - 
&nbsp;&nbsp;
<select class=formlist name=win_title 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.Title(win_title.value)">
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> 
               CodeThatForm - layered</b></font>" 
               selected>CodeThatForm - layered
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> 
               My favorite example</b></font>">
               My favorite example
<option value="&nbsp;<font size='2pt' 
               color='#F9B800'><b> Small form</b>
               </font>">Small form
</select>

<p>Add adition HTML-code to your new form - 
&nbsp;&nbsp;
<select class=formlist name=html 
 onclick="if (w_l == null) alert('You should create at least 
          one Layered Form. Press Create New Box button.'); 
          else w_l.appHTML(html.value)">
<option value="<tr><td><p class=title2>
               <img src='img/deal.gif' align=left 
               valign=bottom>&nbsp;
               And do many important things.</td></tr>"
                selected>And do many important things.
<option value="<tr><td><p class=title3>
               <img src='img/alarm.gif' align=left 
               valign=bottom>&nbsp;
               It's time to wake up!</td></tr>">
               It's time to wake up!
</select>

<p><input class=btn type=button onclick="
    if (w_l == null) alert('You should create at least one 
    Layered Form. Press Create New Box button.'); 
    else w_l.Caption({bgc:'#000000',h:22, bgi:'', 
    css:'title'})" value="Change Caption Style">
<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Press this button to Create New Simple Window Form
&nbsp;&nbsp;
<input class=btn type=button onclick="wincreate()" 
 value="Create New Box">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Change window coordinate
<p>
<b>x</b>&nbsp;<input class=formlist style="width: 50px" 
               name=x value=300>&nbsp;&nbsp;&nbsp;
<b>y</b>&nbsp;<input class=formlist style="width: 50px" 
               name=y value=200>
&nbsp;&nbsp;&nbsp;<input type=button value="Move" class="btn" 
onclick="if (w == null) alert('You should create at least one 
Windowed Form. Press Create New Box button.'); 
else if (x.value == null) alert('You should enter x-coordinate.'); 
else if (y.value == null) alert('You should enter y-coordinate.'); 
else w.move(x.value, y.value)">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>
&nbsp;Change window size
<p>
<b>width</b>&nbsp;<input class=formlist style="width: 50px"
                   name=win_width value=400>
&nbsp;&nbsp;&nbsp;
<b>height</b>&nbsp;<input class=formlist style="width: 50px" 
                    name=win_height value=100>
&nbsp;&nbsp;&nbsp;<input type=button value="Resize" 
 class="btn" onclick="if (w == null) alert('You should create 
at least one Windowed Form. Press Create New Box button.'); 
else if (win_width.value == null) alert('You should enter width.'); 
else if (win_height.value == null) alert('You should enter height.'); 
else w.resize(win_width.value, win_height.value)">

<P class=title3>
<IMG height=15 src="img/arrow_light.gif" width=13>&nbsp;Load URL
<p>
<input name=url maxlength=1024 size=30 
 value='http://www.codethat.com'>
&nbsp;&nbsp;&nbsp;<input type=button class=btn 
onclick="if (w == null) alert('You should create at least one
Windowed Form. Press Create New Box button.'); 
else w.loadURL(this.form.url.value)" value="Load">

</form>
</body>

  Congratulations! You have just created your first CodeThatForm enhanced web page.

To make your life easier we do plan to supply you with on and off line JSForm builders in the nearest time.

Try an Example >>