Maltings 4x4 Store
Fill in your order details below. You'll get a return reference and instructions once submitted.
Reference:
:root { --ink: #1a1a17; --muted: #6f6b5f; --border: #d9d5c7; --accent: #8DAF56; --accent-hover: #74963f; --bg-soft: #f4f2ea; --success-bg: #eef1e4; --success-border: #a7b587; --success-ink: #4a5533; --error: #a13b2b; --radius: 6px; } * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg-soft); font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); display: flex; flex-direction: column; align-items: center; } .site-header { width: 100%; background: #1a1a17; color: #f4f2ea; padding: 14px 20px; text-align: center; box-sizing: border-box; } .site-header .brand { font-size: 19px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .site-header .brand span { color: #b7c08f; } .site-header .tel { font-size: 12.5px; color: #cfcabb; margin-top: 2px; } .page-wrap { width: 100%; display: flex; justify-content: center; padding: 40px 20px; box-sizing: border-box; } .card { width: 100%; max-width: 620px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 36px 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 800; color: var(--ink); } .subtitle { color: var(--muted); font-size: 14px; margin: 0 0 28px; line-height: 1.5; } .step-track { display: flex; gap: 6px; margin-bottom: 28px; } .step-track div { height: 4px; flex: 1; background: var(--border); border-radius: 2px; transition: background 0.25s ease; } .step-track div.active { background: var(--accent); } fieldset { border: none; padding: 0; margin: 0 0 22px; } legend { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 12px; padding: 0; border-bottom: 2px solid var(--accent); padding-bottom: 6px; width: 100%; } label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; margin-top: 14px; } label:first-of-type { margin-top: 0; } input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 14.5px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 85, 51, 0.15); } textarea { resize: vertical; min-height: 72px; } .error-text { color: var(--error); font-size: 12.5px; margin-top: 4px; display: none; } .field-error input, .field-error select { border-color: var(--error); } .field-error .error-text { display: block; } .item-row { display: grid; grid-template-columns: 1fr 1fr 80px 1fr auto; gap: 8px; margin-bottom: 8px; align-items: start; } .item-row input, .item-row select { margin: 0; } .remove-item { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; width: 38px; height: 38px; font-size: 16px; line-height: 1; } .remove-item:hover { border-color: var(--error); color: var(--error); } .add-item { background: none; border: 1px dashed var(--border); border-radius: 4px; color: var(--accent); padding: 9px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-top: 4px; } .add-item:hover { border-color: var(--accent); background: #f1f2ea; } .radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .radio-group.two-col { display: flex; gap: 8px; } .radio-group.two-col .radio-option { flex: 1 1 0; } .radio-option { border: 1px solid var(--border); border-radius: 4px; padding: 0 8px; text-align: center; font-size: 13.5px; line-height: 44px; height: 44px; box-sizing: border-box; margin: 0; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 0.15s ease, background 0.15s ease; } .radio-option input { position: absolute; opacity: 0; } .radio-option.selected { border-color: var(--accent); background: #f1f2ea; color: var(--accent); font-weight: 700; } .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); } button.primary { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 11px 22px; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease; } button.primary:hover { background: var(--accent-hover); } .char-count { text-align: right; font-size: 11.5px; color: var(--muted); margin-top: 4px; } /* Confirmation screen */ .confirmation { display: none; text-align: center; padding: 10px 0 4px; } .confirmation.show { display: block; } .confirmation .check { width: 52px; height: 52px; border-radius: 50%; background: var(--success-bg); border: 1px solid var(--success-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: var(--success-ink); } .confirmation h2 { margin: 0 0 6px; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; } .confirmation p.ref { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; } .summary { text-align: left; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 16px 18px; font-size: 13.5px; margin-bottom: 22px; } .summary dt { color: var(--muted); margin-top: 10px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } .summary dt:first-child { margin-top: 0; } .summary dd { margin: 2px 0 0; font-weight: 500; } .summary ul { margin: 2px 0 0; padding-left: 18px; } #formArea.hide { display: none; } .site-footer { width: 100%; background: #1a1a17; color: #a9a493; text-align: center; font-size: 12px; padding: 16px 20px; margin-top: 20px; box-sizing: border-box; } const REASONS = [ "No Longer Required", "Received Damaged", "Incorrect Item Dispatched", "Ordered Incorrectly" ]; let itemCount = 0; function addItemRow(prefill) { itemCount += 1; const id = itemCount; const container = document.getElementById('itemsContainer'); const row = document.createElement('div'); row.className = 'item-row'; row.dataset.id = id; row.innerHTML = `
`; container.appendChild(row); row.querySelector('.remove-item').addEventListener('click', () => { if (container.children.length > 1) { row.remove(); } }); } addItemRow(); document.getElementById('addItemBtn').addEventListener('click', () => addItemRow()); // Radio styling document.querySelectorAll('.radio-option').forEach(opt => { opt.addEventListener('click', () => { document.querySelectorAll('.radio-option').forEach(o => o.classList.remove('selected')); opt.classList.add('selected'); opt.querySelector('input').checked = true; document.getElementById('returnTypeGroup').classList.remove('field-error'); document.getElementById('returnTypeError').style.display = 'none'; }); }); // Char counter const comments = document.getElementById('comments'); comments.addEventListener('input', () => { document.getElementById('charCount').textContent = comments.value.length; }); function setFieldError(input, hasError) { const wrapper = input.closest('fieldset') ? input : input; const parent = input.parentElement; // find sibling error text after input let errEl = input.nextElementSibling; while (errEl && !errEl.classList.contains('error-text')) { errEl = errEl.nextElementSibling; } if (hasError) { input.style.borderColor = 'var(--error)'; if (errEl) errEl.style.display = 'block'; } else { input.style.borderColor = ''; if (errEl) errEl.style.display = 'none'; } } document.getElementById('returnForm').addEventListener('submit', async (e) => { e.preventDefault(); let valid = true; const orderNumber = document.getElementById('orderNumber'); const fullName = document.getElementById('fullName'); const email = document.getElementById('email'); if (!orderNumber.value.trim()) { setFieldError(orderNumber, true); valid = false; } else setFieldError(orderNumber, false); if (!fullName.value.trim()) { setFieldError(fullName, true); valid = false; } else setFieldError(fullName, false); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email.value.trim())) { setFieldError(email, true); valid = false; } else setFieldError(email, false); const phone = document.getElementById('phone'); const phonePattern = /^[+\d][\d\s()-]{6,}$/; if (!phonePattern.test(phone.value.trim())) { setFieldError(phone, true); valid = false; } else setFieldError(phone, false); const returnTypeInput = document.querySelector('input[name="returnType"]:checked'); if (!returnTypeInput) { document.getElementById('returnTypeError').style.display = 'block'; valid = false; } // Validate item rows const rows = document.querySelectorAll('.item-row'); rows.forEach(row => { const name = row.querySelector('.item-name'); const brand = row.querySelector('.item-brand'); const qty = row.querySelector('.item-qty'); const reason = row.querySelector('.item-reason'); const nameOk = name.value.trim().length > 0; const brandOk = brand.value.trim().length > 0; const qtyOk = qty.value.trim().length > 0; const reasonOk = reason.value.length > 0; name.style.borderColor = nameOk ? '' : 'var(--error)'; brand.style.borderColor = brandOk ? '' : 'var(--error)'; qty.style.borderColor = qtyOk ? '' : 'var(--error)'; reason.style.borderColor = reasonOk ? '' : 'var(--error)'; if (!nameOk || !brandOk || !qtyOk || !reasonOk) valid = false; }); if (!valid) return; // Build summary const items = Array.from(rows).map(row => ({ name: row.querySelector('.item-name').value.trim(), brand: row.querySelector('.item-brand').value.trim(), qty: row.querySelector('.item-qty').value.trim() || '1', reason: row.querySelector('.item-reason').value })); const refNumber = 'RTN-' + Math.floor(100000 + Math.random() * 900000); document.getElementById('refNumber').textContent = refNumber; const summary = document.getElementById('summaryBody'); summary.innerHTML = `Order Number${orderNumber.value.trim()}Name${fullName.value.trim()}Email${email.value.trim()}Contact Number${phone.value.trim()}Return Preference${returnTypeInput.value.charAt(0).toUpperCase() + returnTypeInput.value.slice(1)}Items
${comments.value.trim() ? `Comments${comments.value.trim()}` : ''} `; document.getElementById('formArea').classList.add('hide'); document.getElementById('confirmationArea').classList.add('show'); // Send the return details to Formspree const returnTypeLabel = returnTypeInput.value.charAt(0).toUpperCase() + returnTypeInput.value.slice(1); const itemsText = items.map(i => `${i.qty} x ${i.brand} ${i.name} (${i.reason})`).join('\n'); const formData = { _subject: `New Return Request - ${refNumber}`, reference: refNumber, orderNumber: orderNumber.value.trim(), name: fullName.value.trim(), email: email.value.trim(), phone: phone.value.trim(), returnPreference: returnTypeLabel, items: itemsText, comments: comments.value.trim() }; try { const response = await fetch('https://formspree.io/f/xrpzrddp', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(formData) }); if (!response.ok) { document.getElementById('summaryBody').insertAdjacentHTML('afterbegin', '
We couldn\'t send this automatically - please call us on 01427 753394 to confirm your return.
'); } } catch (err) { document.getElementById('summaryBody').insertAdjacentHTML('afterbegin', '
We couldn\'t send this automatically - please call us on 01427 753394 to confirm your return.
'); } }); document.getElementById('startNewBtn').addEventListener('click', () => { document.getElementById('returnForm').reset(); document.querySelectorAll('.radio-option').forEach(o => o.classList.remove('selected')); document.getElementById('itemsContainer').innerHTML = ''; itemCount = 0; addItemRow(); document.getElementById('charCount').textContent = '0'; document.getElementById('emailBtn').href = '#'; document.getElementById('confirmationArea').classList.remove('show'); document.getElementById('formArea').classList.remove('hide'); });