Accountancy Fee Calculator
About this app
An easy and interactive calculator for accountancy service fees with a maroon theme.
Accountancy Fee Calculator Accountancy Fee Calculator 🧾 Client Type: Business Accounts & Tax Select Turnover Range ≤ £90,000 ≤ £99,000 ≤ £149,000 ≤ £249,000 ≤ £349,000 ≤ £499,000 ≤ £749,000 ≤ £999,000 > £999,000 VAT Select Turnover Range ≤ £90,000 ≤ £99,000 ≤ £149,000 ≤ £249,000 ≤ £349,000 ≤ £499,000 ≤ £749,000 ≤ £999,000 > £999,000 Payroll Select Frequency Weekly Monthly Fortnight Weekly + Monthly Select Employee Count ≤5 ≤10 ≤15 ≤20 ≤30 ≤40 ≤50 >50 Discount %: Subtotal: £0 Discount Amount: £0 VAT (20%): £0 Total Annual Fee: £0 Monthly Fee: £0 Calculate Fee Reset Input Contact Us This is an estimated fee, contact us directly for more information.
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Accountancy Fee Calculator</title>
<meta name="description" content="An easy and interactive calculator for accountancy service fees with a maroon theme.">
<meta name="keywords" content="accountancy, fee calculator, services, business, estimate, tax, payroll, pension">
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap" rel="stylesheet">
<style>
body {
background-color: #4A2C2B;
color: white;
font-family: 'Bubblegum Sans', cursive;
padding: 20px;
text-align: center;
}
.header {
margin-bottom: 20px;
padding: 20px;
background-color: #6F4A32;
border-radius: 8px;
}
.input-group {
margin-bottom: 15px;
}
input, select, button {
border-radius: 5px;
padding: 10px;
border: none;
font-size: 16px;
margin: 8px;
}
input[type="text"], input[type="number"] {
width: 200px;
}
.toggle-btn {
background-color: #FF5722;
color: white;
cursor: pointer;
}
.service {
background-color: #FF8C00;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
}
#summary {
margin-top: 20px;
}
#ctaButtons {
margin-top: 20px;
}
.cta-btn {
background-color: #6F4A32;
color: white;
}
#note {
margin: 20px 0;
padding: 10px;
background-color: #B3C236;
color: #4A2C2B;
border-radius: 5px;
}
#toggle-rows {
display: none;
}
</style>
</head>
<body>
<div class="header">
<h1>Accountancy Fee Calculator 🧾</h1>
</div>
<div class="input-group">
<input type="text" id="clientName" placeholder="Client Name" />
<input type="text" id="contactNo" placeholder="Contact Number" />
</div>
<div class="input-group">
<select id="clientType">
<option value="business">Client Type: Business</option>
</select>
</div>
<div class="input-group">
<button class="toggle-btn" id="accountsTaxToggle">Accounts & Tax</button>
<select id="accountsTaxCondition" onchange="calculateFee()" disabled>
<option value="">Select Turnover Range</option>
<option value="90000">≤ £90,000</option>
<option value="99000">≤ £99,000</option>
<option value="149000">≤ £149,000</option>
<option value="249000">≤ £249,000</option>
<option value="349000">≤ £349,000</option>
<option value="499000">≤ £499,000</option>
<option value="749000">≤ £749,000</option>
<option value="999000">≤ £999,000</option>
<option value="9999999">> £999,000</option>
</select>
</div>
<div class="input-group">
<button class="toggle-btn" id="vatToggle">VAT</button>
<select id="vatCondition" onchange="calculateFee()" disabled>
<option value="">Select Turnover Range</option>
<option value="90000">≤ £90,000</option>
<option value="99000">≤ £99,000</option>
<option value="149000">≤ £149,000</option>
<option value="249000">≤ £249,000</option>
<option value="349000">≤ £349,000</option>
<option value="499000">≤ £499,000</option>
<option value="749000">≤ £749,000</option>
<option value="999000">≤ £999,000</option>
<option value="9999999">> £999,000</option>
</select>
</div>
<div class="input-group">
<button class="toggle-btn" id="payrollToggle">Payroll</button>
<select id="payrollFrequency" onchange="calculateFee()" disabled>
<option value="">Select Frequency</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Fortnight">Fortnight</option>
<option value="Weekly + Monthly">Weekly + Monthly</option>
</select>
<select id="employeeCount" onchange="calculateFee()" disabled>
<option value="">Select Employee Count</option>
<option value="5">≤5</option>
<option value="10">≤10</option>
<option value="15">≤15</option>
<option value="20">≤20</option>
<option value="30">≤30</option>
<option value="40">≤40</option>
<option value="50">≤50</option>
<option value="51">>50</option>
</select>
</div>
<div id="toggle-rows"></div>
<div class="input-group">
<label>Discount %:</label>
<input type="number" id="discount" placeholder="Enter %"/>
</div>
<div id="summary">
<div>Subtotal: £<span id="subtotal">0</span></div>
<div>Discount Amount: £<span id="discountAmount">0</span></div>
<div>VAT (20%): £<span id="vat">0</span></div>
<div>Total Annual Fee: £<span id="totalFee">0</span></div>
<div>Monthly Fee: £<span id="monthlyFee">0</span></div>
</div>
<button class="cta-btn" onclick="calculateAll()">Calculate Fee</button>
<button class="cta-btn" onclick="resetInput()">Reset Input</button>
<button class="cta-btn" onclick="printContact()">Contact Us</button>
<div id="note">
This is an estimated fee, contact us directly for more information.
</div>
<script>
let subtotal = 0;
function calculateFee() {
subtotal = 0;
const accountsTaxToggle = document.getElementById("accountsTaxToggle").classList.contains("active");
const turnoverRange = parseInt(document.getElementById("accountsTaxCondition").value, 10);
if (accountsTaxToggle && turnoverRange) {
if (turnoverRange <= 99000) {
subtotal += 700;
}
// Additional logic for calculating fees can be added here
}
// Check other toggles and add their respective fees with similar logic
document.getElementById("subtotal").innerText = subtotal.toFixed(2);
}
function calculateAll() {
calculateFee();
const discountPercentage = parseFloat(document.getElementById("discount").value) || 0;
const discountAmount = (subtotal * discountPercentage) / 100;
const totalFee = subtotal - discountAmount;
const vat = totalFee * 0.2;
document.getElementById("discountAmount").innerText = discountAmount.toFixed(2);
document.getElementById("vat").innerText = vat.toFixed(2);
document.getElementById("totalFee").innerText = (totalFee + vat).toFixed(2);
document.getElementById("monthlyFee").innerText = ((totalFee + vat) / 12).toFixed(2);
}
function resetInput() {
document.getElementById("clientName").value = '';
document.getElementById("contactNo").value = '';
document.getElementById("discount").value = '';
subtotal = 0;
document.getElementById("subtotal").innerText = '0';
// Reset all toggle fields
document.querySelectorAll('.toggle-btn.active').forEach(btn => {
btn.classList.remove('active');
const selectId = btn.id.replace("Toggle", "Condition");
const correspondingSelect = document.getElementById(selectId);
if (correspondingSelect) {
correspondingSelect.disabled = true;
}
});
}
function printContact() {
window.print();
}
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
btn.classList.toggle('active');
const isEnabled = btn.classList.contains('active');
const correspondingSelect = document.getElementById(btn.id.replace("Toggle", "Condition"));
if (correspondingSelect) {
correspondingSelect.disabled = !isEnabled;
}
});
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!