Beautify Forms

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

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


<!-- DC Form Beautify CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/form_beautify/css/jqtransform.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Form Beautify JS -->
<script type="text/javascript" src="dreamcodes/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

View code:


<!-- 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="radio1" value="Yes" checked="checked" />
        <label>Yes</label>
        <input type="radio" name="radio2" 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

View code:


<!-- 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