OpenTimeTracker/application/forms/layouts/accountFormLayout.phtml

<?php echo $this->formstart(); ?>
<?php echo $this->fields['pin'] ?>
<div class="row">
    <div class="small-12 columns">
      <ul class="button-group even-3">
          <li><a id='seven' href="#" class="button keyButton secondary">7</a></li>
          <li><a id='eight' href="#" class="button keyButton secondary">8</a></li>
          <li><a id='nine' href="#" class="button keyButton secondary">9</a></li>
          <li><a id='four' href="#" class="button keyButton secondary">4</a></li>
          <li><a id='five' href="#" class="button keyButton secondary">5</a></li>
          <li><a id='six' href="#" class="button keyButton secondary">6</a></li>
          <li><a id='one' href="#" class="button keyButton secondary">1</a></li>
          <li><a id='two' href="#" class="button keyButton secondary">2</a></li>
          <li><a id='three' href="#" class="button keyButton secondary">3</a></li>
      </ul>
        <ul class="button-group even-2">
            <li><a id='zero' href="#" class="button keyButton secondary">0</a></li>
            <li><a href="#" class="clearKeyPad button keyButton secondary"><i class="fa fa-close"></i> Clear</a></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <?php echo $this->fields['submit'] ?>
        <?php echo $this->formend(); ?>
    </div>
</div>

<script>

    $(document).ready(function() {
        $('.keyButton').click(function() {
            $value = $(this).text();
            $("#pin").val($("#pin").val()+$value);
        });

        $('.clearKeyPad').click(function() {
            $("#pin").val('');
            $("#errorMessage").foundation('reveal','close');
            return false;
        });
    });

</script>