This is the Additional Charge Form from http://www.web-redesign.com/ for use as a boilerplate on Inkdit.com. The two column layout uses Zurb's foundation 4 grid (http://foundation.zurb.com/) so it works brilliantly on desktop and mobile.

Goto-Additional-Charge-Form

<h3><strong>Additional Charge Form</strong></h3>
<fieldset>
  <div class="row">
    <div class="small-12 large-6 columns">
      <label>Project Title:
        <input type="text" name="Project Title">
      </label>
    </div>
    <div class="small-12 large-6 columns">
      <label>Project ID:
        <input type="text" name="Project ID">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="small-12 large-6 columns end">
      <label>Date:
        <input type="date" name="Date">
      </label>
    </div>
  </div>
</fieldset>
<fieldset>
  <div class="row">
    <div class="small-12 large-6 columns">
      <label>Client Name:
        <input type="text" name="Client Name">
      </label>
    </div>
    <div class="small-12 large-6 columns">
      <label>Client Email:
        <input type="text" name="Client Email">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="small-12 large-6 columns end">
      <label>Client Phone:
        <input type="text" name="Client Phone">
      </label>
    </div>
  </div>
</fieldset>
<fieldset>
  <div class="row">
    <div class="small-12 large-6 columns">
      <label>[company] Contact:
        <input type="text" name="[company] contact">
      </label>
    </div>
  </div>
</fieldset>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>This item is a:
      <select name="This item is a">
        <option>Client requested change</option>
        <option>Additional item request</option>
        <option>Outside original budget/scope</option>
        <option>Other</option>
      </select>
  </p></div>
  <div class="small-12 large-6 columns">
    <label> if other:
      <input type="text" name="Other Item Type" placeholder="3 word description">
    </label>
    <p></p>
  </div>
</div>
<p><strong>Description of change or addition:<br></strong><input class="placeholder-text-area-html" name="Description of Change" readonly="readonly"></p>
<table>
  <tbody>
    <tr>
      <th>Description of Services</th>
      <th>Estimated Hours</th>
      <th>Costs</th>
    </tr>
    <tr>
      <td><input type="text" name="Description of Services 1"></td>
      <td><input type="text" name="Estimated Hours 1"></td>
      <td>$
        <input type="text" name="Costs 1"></td>
    </tr>
    <tr>
      <td><input type="text" name="Description of Services 2"></td>
      <td><input type="text" name="Estimated Hours 2"></td>
      <td>$
        <input type="text" name="Costs 2"></td>
    </tr>
    <tr>
      <td><input type="text" name="Description of Services 3"></td>
      <td><input type="text" name="Estimated Hours 3"></td>
      <td>$
        <input type="text" name="Costs 3"></td>
    </tr>
    <tr>
      <td><input type="text" name="Description of Services 4"></td>
      <td><input type="text" name="Estimated Hours 4"></td>
      <td>$
        <input type="text" name="Costs Total"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td align="right">total</td>
      <td>$
        <input type="text" name="Costs 4"></td>
    </tr>
  </tbody>
</table>
<p>I am in agreement with the additional charge, description, timeline and details outlined above.</p>
<p><img width="100%" class="placeholder-signing-line" src="/assets/sign-line-editor-graphic.png" height="194"><br></p>