Customizing Fields

Create Your Own Inputs

If you don't like the way the plugin auto-generates a field, simply create the field in your calculator div with the correct class or name, and the plugin will use your field instead of generating its own. If you create your own inputs in the calculator, it's also a good idea to add a div.form inside the calculator div and then place your field inside it, like so:

<div class="calculator">
	<div class="form">
		<!--  your fields here.  -->
	</div>
</div>

Doing this will ensure that any fields that the plugin has to generate, will show up directly after the fields you added. Here are a few details on the different fields, types of inputs, and the names or classes that the plugin will detect.

---

Amount Input

Generally, this should be an input[type=text] (though select lists are also detected). Any of these classes or names will work (in order of detection):

<input type="text" class="amount" value="$7,500">
<input type="text" class="accrue-amount" value="$7,500">
<input type="text" name="amount" value="$7,500">
<input type="text" name="loan-amount" value="$7,500">

---

Rate Input

The rate can be either an input[type=text] or select tag. Any of these classes or names will work (in order of detection):

<input type="text" class="rate" value="7%">
<input type="text" class="accrue-rate" value="7%">
<!-- or use a select list -->
<select class="rate">
  <option value="7">7%</option>
  <option value="8">8%</option>
</select>

---

Comparison Rate Input

This follows all the same requirements as the rate field, except that the field name or class must be rate_compare. Any of these classes or names will work (in order of detection):

<input type="text" class="rate_compare" value="3%">
<input type="text" class="accrue-rate_compare" value="3%">
<!-- or use a select list -->
<select class="rate_compare">
  <option value="3">3%</option>
  <option value="4">4%</option>
</select>
<!-- or use a hidden input -->
<input type="hidden" name="rate_compare" value="3%">

Note the select list. This could be used to create a picklist of credit score ranges and you'd set the rate that your financial institutions' loan would be at for each score range - this way your calculations could be more accurate based on credit scores.

---

Term Input

The term field can be an input[type=text] or select tag. Any of these classes or names will work (in order of detection):

<input type="text" class="term" value="36m">
<input type="text" class="accrue-term" value="36m">
<input type="text" name="term" value="36m">
<!-- or use a select list -->
<select class="term">
  <option value="36m">36 months</option>
  <option value="4y">4 years</option>
</select>

---

Comparison Term Input

This field must be added to the form manually - by default the calculator uses the same term for both of the loans it's comparing, so to override the comparison term, simply create a field in this format:

<input type="text" class="term_compare" value="36m">
<input type="text" name="term_compare" value="36m">
<!-- or use a select list -->
<select class="term_compare">
  <option value="36m">36 months</option>
  <option value="4y">4 years</option>
</select>

---