Application Form
:root{
--blue:#135fc1;
--blue-dark:#0c438b;
--light:#f4f8fd;
--border:#cbd5e1;
--text:#1f2937;
--muted:#64748b;
--danger:#b42318;
--success:#067647;
--shadow:0 12px 32px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.45;
color:var(--text);
background:#edf3f9;
}
.page{max-width:1040px;margin:24px auto;padding:0 14px 40px}
.header{
background:#fff;
border-top:7px solid var(--blue);
border-radius:14px 14px 0 0;
padding:22px 26px;
box-shadow:var(--shadow);
text-align:center;
}
.header h1{margin:0;color:var(--blue-dark);font-size:30px;letter-spacing:.2px}
.header .subtitle{font-size:18px;font-weight:700;margin-top:5px}
.contact{margin-top:10px;color:var(--muted);font-size:13px}
.notice{
background:#fff;
border-left:5px solid var(--blue);
padding:16px 20px;
margin:16px 0;
border-radius:8px;
box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.notice p{margin:5px 0}
form{display:block}
fieldset{
min-width:0;
margin:16px 0;
padding:20px;
border:1px solid #d6e0ea;
border-radius:12px;
background:#fff;
box-shadow:0 4px 14px rgba(15,23,42,.06);
}
legend{
padding:0 9px;
color:var(--blue-dark);
font-size:18px;
font-weight:700;
}
h3{margin:18px 0 8px;color:var(--blue-dark);font-size:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.full{grid-column:1/-1}
label{display:block;font-weight:700;margin-bottom:5px}
.hint{font-weight:400;color:var(--muted);font-size:12px}
input,select,textarea,button{font:inherit}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],
input[type="number"],select,textarea{
width:100%;
border:1px solid var(--border);
border-radius:7px;
padding:9px 10px;
background:#fff;
color:var(--text);
}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{
outline:3px solid rgba(19,95,193,.16);
border-color:var(--blue);
}
.choice-row{display:flex;flex-wrap:wrap;gap:10px 22px;padding:5px 0}
.choice{display:inline-flex;align-items:center;gap:7px;font-weight:400}
.choice input{margin:0}
.conditional{display:none;margin-top:10px}
.conditional.show{display:block}
.finance-table{width:100%;border-collapse:collapse;margin-top:8px}
.finance-table th,.finance-table td{border:1px solid var(--border);padding:7px;vertical-align:middle}
.finance-table th{background:var(--light);text-align:left;font-size:12px}
.finance-table input,.finance-table select{padding:7px}
.money-wrap{position:relative}
.money-wrap::before{content:"£";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.money-wrap input{padding-left:24px}
.totals{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.total-box{
padding:13px;
border-radius:9px;
background:var(--light);
border:1px solid #d9e7f6;
}
.total-box span{display:block;color:var(--muted);font-size:12px}
.total-box strong{display:block;font-size:21px;color:var(--blue-dark);margin-top:2px}
.balance.negative strong{color:var(--danger)}
.balance.positive strong{color:var(--success)}
.upload{
padding:12px;
border:1px dashed #9fb4c9;
background:#f8fbff;
border-radius:8px;
}
.upload input{width:100%}
.small-print{font-size:12px;color:#475569}
.consent-box{
padding:14px;
background:#f8fafc;
border:1px solid var(--border);
border-radius:8px;
margin:10px 0;
}
.required{color:var(--danger)}
.actions{
position:sticky;
bottom:0;
z-index:5;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
padding:14px;
margin-top:16px;
background:rgba(255,255,255,.96);
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 -6px 24px rgba(15,23,42,.10);
}
button{
border:0;
border-radius:8px;
padding:10px 18px;
font-weight:700;
cursor:pointer;
}
.primary{background:var(--blue);color:#fff}
.primary:hover{background:var(--blue-dark)}
.secondary{background:#e7eef7;color:#173b68}
.danger{background:#fff1f0;color:var(--danger);border:1px solid #f0b7b2}
.status{margin-top:12px;padding:11px;border-radius:8px;display:none}
.status.show{display:block}
.status.error{background:#fff1f0;color:var(--danger);border:1px solid #f0b7b2}
.status.ok{background:#ecfdf3;color:var(--success);border:1px solid #a6f4c5}
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:20px}
@media(max-width:760px){
body{font-size:13px}
.page{margin:0 auto;padding:0 0 28px}
.header{border-radius:0;padding:18px 14px}
.header h1{font-size:25px}
fieldset{border-radius:0;margin:10px 0;padding:15px}
.notice{margin:10px}
.grid,.grid-3,.totals{grid-template-columns:1fr}
.finance-table{display:block;overflow-x:auto;white-space:nowrap}
.actions{border-radius:0}
}
@media print{
body{background:#fff}
.page{max-width:none;margin:0;padding:0}
.header,fieldset,.notice{box-shadow:none}
.actions,.no-print{display:none!important}
fieldset{break-inside:avoid}
input,select,textarea{border:1px solid #777}
}
Please complete every applicable section. Enter “N/A” where a question does not apply.
The trustees means-test all applications and assess them using a point-scoring system. For equipment requests, please attach a description and quotation wherever possible.
Make Them Smile · The Business Hive, 13 Dudley Street, Grimsby, DN34 2AW
(function(){
"use strict";
const form = document.getElementById("grantForm");
const status = document.getElementById("formStatus");
const outgoingNames = [
"Rent / Mortgage","Council Tax","Electricity","Gas","Water","Insurance",
"Pension","Groceries","Telephone","HP / Finance","CCJs","Travel",
"Other 1","Other 2","Other 3","Other 4","Other 5","Other 6","Other 7"
];
function slug(text){
return text.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_|_$/g,"");
}
const outgoingBody = document.getElementById("outgoingRows");
outgoingNames.forEach((name, i) => {
const key = slug(name);
const labelCell = name.startsWith("Other")
? ``
: name;
outgoingBody.insertAdjacentHTML("beforeend", `
});
const multipliers = {
weekly: 52/12,
fortnightly: 26/12,
fourweekly: 13/12,
monthly: 1,
annual: 1/12
};
function monthlyValue(input){
const row = input.closest("tr");
const frequency = row ? row.querySelector(".frequency") : null;
const amount = Number.parseFloat(input.value) || 0;
return amount * (multipliers[frequency ? frequency.value : "monthly"] || 1);
}
function money(number){
return new Intl.NumberFormat("en-GB", {style:"currency",currency:"GBP"}).format(number);
}
function calculate(){
const income = [...document.querySelectorAll(".income")].reduce((sum, el) => sum + monthlyValue(el), 0);
const outgoings = [...document.querySelectorAll(".outgoing")].reduce((sum, el) => sum + monthlyValue(el), 0);
const balance = income - outgoings;
document.getElementById("incomeTotal").textContent = money(income);
document.getElementById("outgoingTotal").textContent = money(outgoings);
document.getElementById("balanceTotal").textContent = money(balance);
document.getElementById("hiddenIncome").value = income.toFixed(2);
document.getElementById("hiddenOutgoings").value = outgoings.toFixed(2);
document.getElementById("hiddenBalance").value = balance.toFixed(2);
const box = document.getElementById("balanceBox");
box.classList.toggle("negative", balance < 0);
box.classList.toggle("positive", balance >= 0);
}
document.addEventListener("input", e => {
if(e.target.matches(".income,.outgoing,.frequency")) calculate();
});
document.addEventListener("change", e => {
if(e.target.matches(".income,.outgoing,.frequency")) calculate();
if(e.target.matches("[data-toggle]")){
const target = document.getElementById(e.target.dataset.toggle);
if(!target) return;
const group = document.querySelectorAll(`[data-toggle="${e.target.dataset.toggle}"]`);
const selected = [...group].find(r => r.checked);
const show = selected && selected.value === "Yes";
target.classList.toggle("show", show);
target.querySelectorAll("input,select,textarea").forEach(control => {
if(!show) control.value = "";
});
}
});
function serialisableData(){
const data = {};
new FormData(form).forEach((value,key) => {
if(value instanceof File) return;
if(Object.prototype.hasOwnProperty.call(data,key)){
data[key] = Array.isArray(data[key]) ? [...data[key],value] : [data[key],value];
} else data[key] = value;
});
return data;
}
function saveDraft(){
calculate();
localStorage.setItem("mtsGrantApplicationDraft", JSON.stringify(serialisableData()));
showStatus("Draft saved on this device. Uploaded files are not retained and must be selected again.", "ok");
}
function loadDraft(){
const raw = localStorage.getItem("mtsGrantApplicationDraft");
if(!raw) return;
try{
const data = JSON.parse(raw);
Object.entries(data).forEach(([name,value]) => {
const controls = form.querySelectorAll(`[name="${CSS.escape(name)}"]`);
controls.forEach(control => {
if(control.type === "radio" || control.type === "checkbox"){
const values = Array.isArray(value) ? value : [value];
control.checked = values.includes(control.value) || value === "on";
} else if(control.type !== "file"){
control.value = Array.isArray(value) ? value[0] : value;
}
});
});
document.querySelectorAll("[data-toggle]:checked").forEach(el => el.dispatchEvent(new Event("change",{bubbles:true})));
calculate();
showStatus("A saved draft has been restored from this device.", "ok");
}catch(err){
console.error("Could not restore draft",err);
}
}
function showStatus(message,type){
status.textContent = message;
status.className = `status show ${type}`;
status.scrollIntoView({behavior:"smooth",block:"center"});
}
document.getElementById("saveBtn").addEventListener("click", saveDraft);
document.getElementById("printBtn").addEventListener("click", () => window.print());
document.getElementById("clearBtn").addEventListener("click", () => {
if(confirm("Clear every answer in this form and remove the saved draft?")){
form.reset();
localStorage.removeItem("mtsGrantApplicationDraft");
calculate();
status.className = "status";
}
});
form.addEventListener("submit", e => {
calculate();
if(!form.checkValidity()){
e.preventDefault();
form.reportValidity();
showStatus("Please complete the required fields marked with an asterisk before submitting.", "error");
return;
}
if(form.action.includes("YOUR_FORM_ENDPOINT")){
e.preventDefault();
showStatus("The form itself is complete, but the submission address has not yet been connected. Replace YOUR_FORM_ENDPOINT in the code with the endpoint supplied by your website host or form service.", "error");
return;
}
localStorage.removeItem("mtsGrantApplicationDraft");
});
document.getElementById("signedDate").valueAsDate = new Date();
calculate();
loadDraft();
})();
