How can I design my form better? [closed]

Question

I have a price calculation form which looks very basic. I want to make it look little better. Like the '+' and '-' button look like bootstrap button and having a shadow. I also want to have a subtle background, I can't think of any idea. Please someone help me. This is my basic price calculator.

Javascript code

<script type="text/javascript">
  function Total(qty, ud, total, value) {
    qty = document.getElementById(qty);
    ud > 0 ? qty.value++ : qty.value--;
    qty.value = Math.max(qty.value, 0);
    document.getElementById(total).value = qty.value * value;
  }

</script>
<style>
.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
</style>

html code

  <div id="purhcaseForm">
    <form id="purchase1">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty",1,"total",8);' value='-' />
      <input type='button' name='add' onclick='Total("qty",1,"total",8);' value='+' />
      <input type='text' name='qty' id='qty' readonly=true value="0" />
     <span class="currencyinput">$<input type='text' name='total' id='total' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase2">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty1",-1,"total1",7);' value='-' />
      <input type='button' name='add' onclick='Total("qty1",1,"total1",7);' value='+' />
      <input type='text' name='qty1' id='qty1' readonly=true value="0" />
      <span class="currencyinput">$ <input type='text' name='total1' id='total1' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase3">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty2",-1,"total2",6);' value='-' />
      <input type='button' name='add' onclick='Total("qty2",1,"total2",6);' value='+' />
      <input type='text' name='qty2' id='qty2' readonly=true value="0" />
      <span class="currencyinput">$  <input type='text' name='total2' id='total2' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase4">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty3",-1,"total3",5);' value='-' />
      <input type='button' name='add' onclick='Total("qty3",1,"total3",5);' value='+' />
      <input type='text' name='qty3' id='qty3' readonly=true value="0" />
      <span class="currencyinput">$ <input type='text' name='total3' id='total3' value="0" /></span>
    </form>
  </div>

</body>

Answer 1

Here's a mockup. No need for the boxes around the numbers, leads people to think they can type right in the box rather than clicking the buttons. Also adding some headings and labels to elaborate the distinction of each one.

---

^{download bmml source – Wireframes created with Balsamiq Mockups}