This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Beautify Forms

Beautify your existing forms by simply adding a few lines of code.

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- DC Form Beautify CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/form_beautify/css/jqtransform.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Form Beautify JS -->
<script type="text/javascript" src="dcodes/form_beautify/js/jquery.jqtransform.js"></script>
<!-- DC Form Beautify Settings -->
<script language="javascript">
        $(function(){
            $('form').jqTransform({imgPath:'form_beautify/img/'});
        });
</script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- DC Form Beautify CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/form_beautify/css/jqtransform.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Form Beautify JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/form_beautify/js/jquery.jqtransform.js"></script>
<!-- DC Form Beautify Settings -->
<script language="javascript">
        $(function(){
            $('form').jqTransform({imgPath:'form_beautify/img/'});
        });
</script>

Form in <table>

This simple basic form was beautifed with jqTransform library

 
 
Sales Department 

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- DC Form Beautify Start -->
<form action="url-to-post-to.php" method="POST">
  <table border="0" cellspacing="0" cellpadding="6" bgcolor="#ffffff" style="padding:25px; border:1px dotted #ccc; ">
    <tr>
      <td><label>Input Text:</label></td>
      <td><input name="input1" type="text" size="25" /></td>
    </tr>
    <tr>
      <td><label>Input Password:</label></td>
      <td><input type="password" size="25" /></td>
    </tr>
    <tr>
      <td><label>Check Box: </label></td>
      <td><input type="checkbox" name="checkbox1" /></td>
    </tr>
    <tr>
      <td><label>Radio Button:</label></td>
      <td><input type="radio" name="question" value="Yes" checked="checked" />
        <label>Yes</label>
        <input type="radio" name="question" value="No" />
        <label>No</label></td>
    </tr>
    <tr>
      <td><label>Textarea :</label></td>
      <td><textarea cols="33" rows="6" name="textarea1"></textarea></td>
    </tr>
    <tr>
      <td><label>Select Menu :</label></td>
      <td><select name="selectmenu1">
          <option value="salesdept">Sales Department </option>
          <option value="supportdept">Support Department </option>
          <option value="billingdept">Billing Department </option>
        </select></td>
    </tr>
    <tr>
      <td><label>Submit Button:</label></td>
      <td><input type="submit" value="Submit Now" /></td>
    </tr>
    <tr>
      <td><label>Reset Button:</label></td>
      <td><input type="reset" value="Reset" /></td>
    </tr>
    <tr>
      <td><label>Input Button:</label></td>
      <td><input type="button" value="Input Button" /></td>
    </tr>
  </table>
</form>
<!-- DC Form Beautify End -->

Form in <DIV>

This simple basic form was beautifed with jqTransform library

 
 
Sales Department 

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- DC Form Beautify Start -->
<form action="url-to-post-to.php.php" method="POST">
  <div class="rowElem">
    <label>Input Text:</label>
    <input type="text" name="input1"  size="25" />
  </div>
  <div class="rowElem">
    <label>Input Password:</label>
    <input type="password" size="25" />
  </div>
  <div class="rowElem">
    <label>Checkbox: </label>
    <input type="checkbox" name="checkbox1" id="">
  </div>
  <div class="rowElem">
    <label>Radio Button:</label>
    <input type="radio" id="" name="question" value="Yes" checked >
    <label>Yes</label>
    <input type="radio" id="" name="question" value="No" >
    <label>No</label>
  </div>
  <div class="rowElem">
    <label>Textarea :</label>
    <textarea cols="33" rows="6" name="textarea1"></textarea>
  </div>
  <div class="rowElem">
    <label>Select Menu :</label>
    <select name="selectmenu1">
      <option value="salesdept">Sales Department </option>
      <option value="supportdept">Support Department </option>
      <option value="billingdept">Billing Department </option>
    </select>
  </div>
  <div class="rowElem">
    <label>Submit Button:</label>
    <input type="submit" value="Submit Button" />
  </div>
  <div class="rowElem">
    <label>Reset Button:</label>
    <input type="reset" value="Reset Button" />
  </div>
  <div class="rowElem">
    <label>Input Button:</label>
    <input type="button" value="Input Button" />
  </div>
</form>
<!-- DC Form Beautify End -->


© TemplateAccess