Contact Us

Send us a message

1 Contact

›

2 Valve Details

›

3 Review

›

4 Submit

1. Contact Details

We only need the basics to respond quickly.

Enquiry Reference

ENQ-XXXXX

Autogenerated

First Name *

Last Name *

Email *

Phone *

Company *

Purpose *

Preferred Branch *

How did you find us? *

Select Valve Type *

2. Valve Details

Choose what you know. If unsure, pick "Not sure" and upload a photo.

Core details

Design

Size (DN)

Pressure Class

End connection

Seat / liner / trim

Quantity

Design Spec.

Operating conditions

Media

Temperature

Specify media *

Operation

Operator

Fail position (if actuated)

Voltage

Attachments and notes

Upload any photos, P&ID drawings or spec sheets. Files go directly into your enquiry record.

Notes

</
textarea>
</div>
</div>
<div class="btnbar">
<button class="btn" type="button" id="vBack2">Back</button>
<button class="btn primary" type="button" id="vContinue2">Continue
to Review</button>
</div>
</div>
<div class="snap">
<div class="box white">
<div style="display:flex;align-items:center;justify-content:spacebetween;
gap:10px;flex-wrap:wrap">
<h4 style="margin:0;color:#2a3552">Snapshot</h4>
<span class="badge warn" id="vReadyBadge">Basic info required</
span>
</div>
<div class="missing" id="vMissing"></div>
<div class="kv" id="vSnapshot"></div>
</div>
</div>
</div>
</div>

<div class="panel" data-panel="3">
<h3>3. Review</h3>
<p>Confirm the enquiry details before sending.</p>
<div class="ref-box" style="margin-bottom:16px">
<div>
<div class="ref-label">Enquiry Reference</div>
<div class="ref-val" id="vEnqRefReview">ENQ-XXXXX</div>
</div>
</div>
<div class="box white" style="margin-bottom:16px">
<h4>Contact</h4>
<div class="spec-grid">
<div class="spec-row"><span>Name:</span><b id="qName">-</b></
div>
<div class="spec-row"><span>Email:</span><b id="qEmail">-</b></
div>
<div class="spec-row"><span>Phone:</span><b id="qPhone">-</b></
div>
<div class="spec-row"><span>Company:</span><b id="qCompany">-</
b></div>
<div class="spec-row"><span>Branch:</span><b id="qBranch">-</b></
div>
<div class="spec-row"><span>Purpose:</span><b id="qPurpose">-</
b></div>
<div class="spec-row"><span>Source:</span><b id="qSource">-</b></
div>
</div>
</div>
<h4>Valve Details</h4>
<div id="vValvesList"></div>
<div class="btnbar">
<button class="btn" type="button" id="vBack3">Back</button>
<button class="btn primary" type="button" id="vContinue3">Continue to
Submit</button>
</div>
</div>

<div class="panel" data-panel="4">
<h3>4. Submit Enquiry</h3>
<div class="success-box">
<h4>✓ Enquiry Ready to Send</h4>
<p style="color:#155724;margin:8px 0">Your reference number:</p>
<div class="ref" id="vEnqRef">ENQ-XXXXX</div>
<p style="color:#155724;font-size:12px;margin:4px 0">Keep this
reference for follow-up queries.</p>
</div>
<div class="box white">
<h4>Send Enquiry</h4>
<p style="margin-top:0">Click below to submit your enquiry. Our team will
be in touch shortly.</p>
<div class="btnbar" style="margin-top:12px">
<button class="btn ghost" type="button" id="vBack4">Back to Review</
button>
<button class="btn good" type="button" id="vSendWebhook">✓ Submit
Enquiry</button>
</div>
<div id="vStatusMsg"></div>
<div id="vAnotherWrap" style="display:none;margin-top:16px;textalign:
center;border-top:1px solid #e0e3ee;padding-top:16px">
<p style="color:#6b7590;margin:0 0 12px;font-size:13px">Need to
enquire about another valve?</p>
<button class="btn primary" type="button" id="vStartAnother">+ Submit
Another Enquiry</button>
</div>
</div>
</div>
</div>
</div>
<script>
(function(){
const root = document.getElementById('valve-estimator');
const qs = (sel) => root.querySelector(sel);
const qsa = (sel) => Array.from(root.querySelectorAll(sel));
const WEBHOOK_URL = 'https://services.leadconnectorhq.com/hooks/
4IduTN1O5z2LGlLzE878/webhook-trigger/zjp8GiJGweavir5Taq50';
let step = 1;
let maxStep = 1;
let currentType = null;
let valves = [];
let draftValve = null; // saves Step 2 state when navigating away without
submitting
let REFERENCE = 'ENQ-' +
Math.random().toString(36).slice(2,7).toUpperCase();
qs('#vEnqRef').innerText = REFERENCE;
qs('#vEnqRefDisplay').innerText = REFERENCE;
qs('#vEnqRefReview').innerText = REFERENCE;
const valveTypes = [
{ id:'gate', name:'Gate Valve', hasDesign:true, image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5feb9185ff4153e327ce.jpg' },
{ id:'globe', name:'Globe Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5fec2837e83adba77660.jpg' },
{ id:'check', name:'Check / NRV', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5fec5dbbe8a0135c8d5c.jpg' },
{ id:'ball', name:'Ball Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5a2e753f154193f7ac5c.jpg' },
{ id:'butterfly', name:'Butterfly Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5feb9a0c18353f989db6.jpg' },
{ id:'plug', name:'Plug Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699f5feb9185ffb3f3e327cf.jpg' },
{ id:'diaphragm', name:'Diaphragm Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2cfcd277ba02b3196b7ab.png' },
{ id:'regulating', name:'Regulating Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2d18c222c3354940c9d4c.png' },
{ id:'safety', name:'Safety / Relief', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2d0ec277ba0f46396e7b9.png' },
{ id:'steamtrap', name:'Steam Trap', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2d01f74ad4ba9e9170a35.png' },
{ id:'strainer', name:'Strainer', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2d1547fc07c572fc2b085.png' },
{ id:'footvalve', name:'Foot Valve', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
69b2d09b277ba045a396dab2.png' },
{ id:'other', name:'Other', image:'https://
assets.cdn.filesafe.space/4IduTN1O5z2LGlLzE878/media/
699fde6995735c18bcf9887d.png' }
];
function renderValveTypes(){
const wrap = qs('#vTypeChoices');
wrap.innerHTML = '';
valveTypes.forEach(t => {
const el = document.createElement('div');
el.className = 'choice';
el.dataset.typeId = t.id;
const imgHtml = t.image
? `<img decoding="async" src="${esc(t.image)}" alt="${esc(t.name)}" loading="lazy"
onerror="this.parentElement.textContent='
'">`
: `<span style="font-size:32px">
</span>`;
el.innerHTML = `<div class="img">${imgHtml}</div><b>${esc(t.name)}</
b>`;
el.addEventListener('click', () => {
qsa('.choice').forEach(c => c.classList.remove('active'));
el.classList.add('active');
currentType = t;
refreshStep2(t.id, '', '');
updateSnapshot();
});
wrap.appendChild(el);
});
}
renderValveTypes();
// ── VALVE CASCADE DATA FROM EXCEL
─────────────────────────────────────
───
// Structure: cascade[typeId][design][material] = {sizes, pressures, ends,
operations}
const cascade = {
"gate": {
"Wedge": {
"Brass": { sizes:["15-100"], pressures:["PN16"], ends:
["Threaded"], operations:["Manual"] },
"Bronze": { sizes:["15-100"], pressures:["PN16/20"], ends:
["Threaded"], operations:["Manual"] },
"Forged Steel": { sizes:["15-50"], pressures:["CL800/1500"],
ends:["Threaded","Weld-On"], operations:["Manual"] },
"Cast Iron": { sizes:["50-600"], pressures:["PN10/16/25/40"],
ends:["Flanged"], operations:["Manual"] },
"Carbon Steel": { sizes:["50-600"], pressures:
["CL150/300/600/900/1500"], ends:["Flanged","Weld-On"], operations:
["Manual"] },
"Stainless Steel": { sizes:["50-600"], pressures:
["CL150/300/600/900/1500"], ends:["Flanged","Weld-On"], operations:
["Manual"] }
},
"Knife": {
"Ductile Iron": { sizes:["50-1200"], pressures:["PN4/6/10"], ends:
["Wafer Lug"], operations:["Manual","Actuated"] },
"Carbon Steel": { sizes:[], pressures:[], ends:[],
operations:["Manual"] },
"Stainless Steel": { sizes:[], pressures:[], ends:[],
operations:["Manual"] }
},
"RSV": {
"Ductile Iron": { sizes:["50-600"], pressures:["PN16"], ends:
["Flanged","PVC Socket"],operations:["Manual"] }
},
"Parallel Slide": {
"Forged Steel": { sizes:["15-50"], pressures:["CL300"], ends:
["Flanged"], operations:["Manual"] },
"Cast Steel": { sizes:["65-600"], pressures:["CL150/300"],
ends:["Flanged"], operations:["Manual"] }
}
},
"globe": {
"Globe valve": {
"Bronze": { sizes:["8-50"], pressures:["PN20/32"], ends:
["Threaded"], operations:["Manual"] },
"Forged Steel": { sizes:["15-50"], pressures:
["CL150/300/600/900/1500","CL800/900/1500"], ends:
["Flanged","Threaded","Weld-On"], operations:["Manual"] },
"Carbon Steel": { sizes:["50-600"], pressures:
["CL150/300/600/900/1500","CL800/900/1500"], ends:
["Flanged","Threaded","Weld-On"], operations:["Manual"] },
"Stainless Steel": { sizes:[], pressures:[], ends:[],
operations:["Manual"] },
"Cast Iron": { sizes:[], pressures:[], ends:[],
operations:["Manual"] }
},
"Bellow Seal": {
"Carbon Steel": { sizes:["15-200"], pressures:["PN16/25/40"],
ends:["Flanged"], operations:["Manual"] }
},
"Angle Seat": {
"Stainless Steel": { sizes:["15-50"], pressures:["PN16"], ends:
["Flanged","Threaded"], operations:["Actuated"] }
}
},
"check": {
"Swing check": {
"Bronze": { sizes:["15-50"], pressures:["PN16"],
ends:["Threaded"], operations:[] },
"Brass": { sizes:["15-50"], pressures:["PN16"], ends:
["Threaded"], operations:[] },
"Cast Iron": { sizes:["50-1200"], pressures:["PN10/16/25"],
ends:["Flanged"], operations:[] },
"Carbon Steel": { sizes:["50-600"], pressures:
["CL150/300/600/900/1500"], ends:["Flanged","Weld-On"], operations:[] },
"Stainless Steel": { sizes:["50-600"], pressures:
["CL150/300/600/900/1500"], ends:["Flanged","Weld-On"], operations:[] },
"Forged Steel": { sizes:["15-50"], pressures:
["CL150/300/600/800/900/1500"], ends:["Flanged","Weld-On"], operations:
[] }
},
"Ball check": {
"Ductile Iron": { sizes:["50-300"], pressures:["PN16"], ends:
["Flanged"], operations:[] }
},
"Piston check": {
"Forged Steel": { sizes:["15-50"], pressures:["CL800"], ends:
["Threaded","Weld-On"], operations:[] },
"Stainless Steel": { sizes:["15-50"], pressures:["CL800"], ends:
["Threaded","Weld-On"], operations:[] }
},
"Lift check": {
"Bronze": { sizes:["15-50"], pressures:["PN20"], ends:
["Flanged"], operations:[] },
"Carbon Steel": { sizes:["15-50"], pressures:["PN16/CL150"],
ends:["Flanged"], operations:[] }
},
"Single plate": {
"Cast Iron": { sizes:["50-400"], pressures:["PN16"], ends:
["Wafer Lug"], operations:[] },
"Stainless Steel": { sizes:["50-400"], pressures:["PN16/CL150"],
ends:["Wafer Lug"], operations:[] }
},
"Dual plate": {
"Cast Iron": { sizes:[], pressures:["PN16"], ends:
["Wafer Lug"], operations:[] },
"Stainless Steel": { sizes:["50-1200"], pressures:["PN16/PN25/
CL150/300/600"],ends:["Wafer Lug"], operations:[] },
"Carbon Steel": { sizes:["50-1200"], pressures:["CL150/300/600"],
ends:["Wafer Lug"], operations:[] }
},
"Thin Wafer Check": {
"Mild Steel": { sizes:["40-600"], pressures:["PN16"], ends:
["Wafer Lug"], operations:[] },
"Stainless Steel": { sizes:["40-600"], pressures:["PN16"], ends:
["Wafer Lug"], operations:[] }
}
},
"ball": {
"1PCE": {
"Cast Iron": { sizes:["15-100"], pressures:["PN16"], ends:
["Threaded"], operations:["Manual"] },
"Stainless Steel": { sizes:["15-50"], pressures:["1000PSI"], ends:
["Threaded"], operations:["Manual"] },
"Chrome Plated": { sizes:["8-100"], pressures:["PN20"], ends:
["Threaded"], operations:["Manual"] }
},
"2PCE": {
"Carbon Steel": { sizes:["15-600"], pressures:["PN16/
CL150/300/600"],ends:["Flanged"], operations:["Manual","Actuated"] },
"Stainless Steel": { sizes:["15-600"], pressures:["PN16/
CL150/300/600"],ends:["Flanged"], operations:["Manual","Actuated"] }
},
"3PCE": {
"Stainless Steel": { sizes:["15-100"], pressures:["1000PSI/2000PSI"],
ends:["Threaded"], operations:["Manual","Actuated"] }
},
"3WAY": {
"Stainless Steel": { sizes:["15-200"], pressures:["PN16","PN16/CL150"],
ends:["Threaded","Flanged"], operations:["Manual","Actuated"] }
}
},
"butterfly": {
"__none__": {
"Cast Iron": { sizes:["25-1200","50-1400"], pressures:["PN16/PN25"],
ends:["Wafer Lug","Flanged"], operations:["Manual","Actuated"] },
"Stainless Steel": { sizes:["25-1200"], pressures:["PN16/PN25"],
ends:["Wafer Lug"], operations:["Manual","Actuated"] }
}
},
"plug": {
"Sleeved": {
"Carbon Steel": { sizes:["15-500"], pressures:["PN10/40/CL150/300"],
ends:["Flanged"], operations:["Manual"] },
"Stainless Steel": { sizes:["15-500"], pressures:["PN10/40/CL150/300"],
ends:["Flanged"], operations:["Manual"] }
},
"Lubricated": {
"Cast Iron": { sizes:["15-50","40-200"], pressures:["CL150","CL125/
CL150"], ends:["Screwed","Flanged"], operations:["Manual"] }
}
},
"diaphragm": {
"KB": { "Cast Iron": { sizes:["15-200"], pressures:["PN6/10"], ends:
["Flanged","Threaded"], operations:["Manual"] } },
"Type A": { "Cast Iron": { sizes:["15-200"], pressures:["PN6/10"], ends:
["Flanged","Threaded"], operations:["Manual"] } }
},
"regulating": {
"PRV": {
"Bronze": { sizes:["15-50"], pressures:["PN16/25"], ends:
["Threaded"], operations:["Manual"] },
"Stainless Steel": { sizes:["15-50"], pressures:["PN16/25"], ends:
["Threaded"], operations:["Manual"] }
}
},
"safety": {
"__none__": {
"Bronze": { sizes:["15-50"], pressures:["PN16/25"], ends:
["Threaded"], operations:["Manual"] },
"Brass": { sizes:["15-50"], pressures:["PN16/25"], ends:
["Threaded"], operations:["Manual"] },
"Stainless Steel": { sizes:["15-50"], pressures:["PN16/25"], ends:
["Threaded"], operations:["Manual"] },
"Carbon Steel": { sizes:["15-200"], pressures:["PN16/25/40"], ends:
["Flanged"], operations:["Manual"] }
}
},
"steamtrap": {
"Thermodynamic": {
"Stainless Steel": { sizes:["15-25"], pressures:["PN40"], ends:
["Threaded"], operations:[] },
"Carbon Steel": { sizes:["15-25"], pressures:["PN40"], ends:["Flanged"],
operations:[] }
},
"Ball Float trap": {
"Ductile Iron": { sizes:["15-25"], pressures:["PN16"], ends:
["Threaded","Flanged"], operations:[] }
},
"Inverted Bucket": {
"Ductile Iron": { sizes:["15-25"], pressures:["PN16"], ends:
["Threaded","Flanged"], operations:[] }
}
},
"strainer": {
"Y-Strainer": {
"Bronze": { sizes:["15-50"], pressures:["PN20"], ends:
["Threaded"], operations:[] },
"Cast Iron": { sizes:["40-400"], pressures:["PN16"], ends:
["Flanged"], operations:[] },
"Carbon Steel": { sizes:["15-300"], pressures:["PN16/
CL150","CL800"],ends:["Threaded","Flanged"],operations:[] },
"Stainless Steel": { sizes:["15-300"], pressures:["CL200","CL150/
CL300"],ends:["Threaded","Flanged"],operations:[] }
}
},
"footvalve": {
"__none__": {
"Ductile Iron": { sizes:["15-300"], pressures:["PN16"], ends:
["Flanged"], operations:[] },
"Bronze": { sizes:["10-100"], pressures:["PN16/25"], ends:
["Threaded"], operations:[] },
"Stainless Steel": { sizes:["10-100"], pressures:["PN16/25"], ends:
["Threaded"], operations:[] }
}
},
"other": { "__none__": { "__none__": { sizes:[], pressures:[], ends:[],
operations:[] } } }
};
// ── HELPER: get unique values across matching records
─────────────────────
function getOptions(typeId, design, material, field){
const typeData = cascade[typeId] || {};
const designs = design ? [design] : Object.keys(typeData);
const result = new Set();
designs.forEach(dKey => {
const dData = typeData[dKey] || {};
const mats = material ? [material] : Object.keys(dData);
mats.forEach(mKey => {
const node = dData[mKey];
if(node && node[field]) node[field].forEach(v => { if(v) result.add(v); });
});
});
return [...result].sort();
}
function populateSelect(sel, options, addNotSure = true){
const prev = sel.value;
sel.innerHTML = '<option value="">Select...</option>';
if(addNotSure) sel.innerHTML += '<option value="Not sure">Not sure</
option>';
options.forEach(o => {
const opt = document.createElement('option');
opt.value = o; opt.textContent = o;
sel.appendChild(opt);
});
if(prev && Array.from(sel.options).some(o => o.value === prev)) sel.value =
prev;
}
function refreshStep2(typeId, design, material){
const typeData = cascade[typeId] || {};
const hasDesign = typeId !== 'butterfly' && typeId !== 'safety' && typeId !==
'footvalve' && typeId !== 'other'
&& Object.keys(typeData).length > 0
&& !Object.keys(typeData).every(k => k === '__none__');
// Design
qs('#vDesignField').classList.toggle('show', hasDesign);
if(hasDesign){
populateSelect(qs('#vDesign'), Object.keys(typeData).filter(k => k !==
'__none__'));
if(design && !Array.from(qs('#vDesign').options).some(o => o.value ===
design)){
qs('#vDesign').value = '';
design = '';
}
} else {
qs('#vDesign').value = '';
design = '__none__';
}
// Material — based on type+design
const mats = getOptions(typeId, design || null, null, 'sizes').length
? Object.keys((typeData[design] || typeData['__none__'] || {}))
: [];
const allMatsForType = new Set();
const designKeys = design ? [design] : Object.keys(typeData);
designKeys.forEach(dk => { Object.keys(typeData[dk]||{}).forEach(m =>
allMatsForType.add(m)); });
populateSelect(qs('#vBodyMaterial'), [...allMatsForType].sort());
if(material && !Array.from(qs('#vBodyMaterial').options).some(o => o.value
=== material)){
qs('#vBodyMaterial').value = '';
material = '';
}
const effectiveDesign = hasDesign ? (design || null) : '__none__';
const effectiveMaterial = material || null;
// Size — based on type+design+material
populateSelect(qs('#vSize'), getOptions(typeId, effectiveDesign,
effectiveMaterial, 'sizes'));
// Pressure
populateSelect(qs('#vPressure'), getOptions(typeId, effectiveDesign,
effectiveMaterial, 'pressures'));
// Ends
populateSelect(qs('#vEndConnection'), getOptions(typeId, effectiveDesign,
effectiveMaterial, 'ends'));
// Operator
const ops = getOptions(typeId, effectiveDesign, effectiveMaterial,
'operations');
const hasActuated = ops.includes('Actuated');
const opList = ['Manual Handwheel','Manual Lever','Manual Gearbox'];
if(hasActuated) opList.push('Pneumatic Actuated','Electric Actuated');
populateSelect(qs('#vOperator'), opList, false);
updateSnapshot();
}
// ── DRAFT: save/restore Step 2 fields without committing to valves[]
────
function saveDraft(){
const qty = qs('#vQuantity').value === 'Other' ? qs('#vQtyOther').value :
qs('#vQuantity').value;
const media = qs('#vMedia').value === 'Other' ? qs('#vMediaOther').value :
qs('#vMedia').value;
draftValve = {
typeObj: currentType,
design: qs('#vDesign').value,
size: qs('#vSize').value,
pressure: qs('#vPressure').value,
endConnection:qs('#vEndConnection').value,
bodyMaterial: qs('#vBodyMaterial').value,
trim: qs('#vTrim').value,
quantityRaw: qs('#vQuantity').value,
quantityOther:qs('#vQtyOther').value,
qty,
mediaRaw: qs('#vMedia').value,
mediaOther: qs('#vMediaOther').value,
media,
temperature: qs('#vTempRange').value,
operator: qs('#vOperator').value,
failPosition: qs('#vFailQuick').value,
voltage: qs('#vElectricVoltage').value,
designSpec: qs('#vDesignSpec').value,
notes: qs('#vNotes').value
};
}
function restoreDraft(){
if(!draftValve) return;
const d = draftValve;
currentType = d.typeObj;
if(currentType){
qsa('.choice').forEach(c => {
c.classList.toggle('active', c.dataset.typeId === currentType.id);
});
refreshStep2(currentType.id, d.design || '', d.bodyMaterial || '');
}
qs('#vDesign').value = d.design || '';
qs('#vSize').value = d.size || '';
qs('#vPressure').value = d.pressure || '';
qs('#vEndConnection').value = d.endConnection|| '';
qs('#vBodyMaterial').value = d.bodyMaterial || '';
qs('#vTrim').value = d.trim || '';
qs('#vQuantity').value = d.quantityRaw || '';
qs('#vQtyOther').value = d.quantityOther|| '';
qs('#vQtyOtherWrap').classList.toggle('show', d.quantityRaw === 'Other');
qs('#vMedia').value = d.mediaRaw || '';
qs('#vMediaOther').value = d.mediaOther || '';
qs('#vMediaOtherField').classList.toggle('show', d.mediaRaw === 'Other');
qs('#vTempRange').value = d.temperature || '';
qs('#vOperator').value = d.operator || '';
qs('#vFailQuick').value = d.failPosition || '';
qs('#vElectricVoltage').value = d.voltage || '';
qs('#vElectricOpts').classList.toggle('show', d.operator === 'Electric
Actuated');
qs('#vDesignSpec').value = d.designSpec || '';
qs('#vNotes').value = d.notes || '';
updateSnapshot();
}
function showStep(s){
// When leaving Step 2 without saving to valves[], save as draft
if(step === 2 && s !== 2) saveDraft();
step = s;
if(s > maxStep) maxStep = s;
qs('#vStepBadge').innerText = `Step ${s} of 4`;
qsa('.panel').forEach(p => p.classList.remove('show'));
qs(`.panel[data-panel="${s}"]`).classList.add('show');
qsa('.step').forEach(st => {
const n = parseInt(st.dataset.step,10);
st.classList.remove('active','visited');
if(n === s){
st.classList.add('active');
} else if(n <= maxStep){
st.classList.add('visited');
}
});
if(s === 2){
restoreDraft();
if(!draftValve){
if(currentType) refreshStep2(currentType.id, '', '');
else updateSnapshot();
}
// Auto-fill email into the GHL attachment iframe
injectEmailIntoIframe();
}
if(s === 3) renderReview();
}
function injectEmailIntoIframe(){
const email = qs('#vEmail').value || '';
const iframe = qs('#inline-VjrppVUk6Nm17seSxuRV');
if(!iframe) return;
const base = 'https://link.salesflow.co.za/widget/form/
VjrppVUk6Nm17seSxuRV';
const src = email ? `${base}?email=${encodeURIComponent(email)}` : base;
// Only reload if src has changed
if(iframe.src !== src) iframe.src = src;
}
// Clicking a visited step navigates without reset
qsa('.step').forEach(st => {
st.addEventListener('click', () => {
const target = parseInt(st.dataset.step, 10);
if(target <= maxStep) showStep(target);
});
});
qs('#vBack2').addEventListener('click', () => showStep(1));
qs('#vBack3').addEventListener('click', () => showStep(2));
qs('#vBack4').addEventListener('click', () => showStep(3));
qs('#vContinue1').addEventListener('click', () => {
const req =
['vFirstName','vLastName','vEmail','vPhone','vCompany','vPurpose','vBranch','vS
ource'];
let valid = true;
req.forEach(id => {
const el = qs('#'+id);
if(!String(el.value||'').trim()){ el.classList.add('error'); valid=false; }
else el.classList.remove('error');
});
if(!currentType) valid = false;
if(!valid){ alert('Please complete all required fields and select a valve type.');
return; }
showStep(2);
});
qs('#vContinue3').addEventListener('click', () => showStep(4));
const bindCond = (trigSel, trigVal, tgtSel) => {
qs(trigSel).addEventListener('change', e => {
qs(tgtSel).classList.toggle('show', e.target.value === trigVal);
updateSnapshot();
});
};
bindCond('#vQuantity','Other','#vQtyOtherWrap');
bindCond('#vMedia','Other','#vMediaOtherField');
bindCond('#vOperator','Electric Actuated','#vElectricOpts');
// Cascade: design change → refresh material/size/pressure/ends/operator
qs('#vDesign').addEventListener('change', () => {
if(!currentType) return;
refreshStep2(currentType.id, qs('#vDesign').value, '');
updateSnapshot();
});
// Cascade: material change → refresh size/pressure/ends/operator
qs('#vBodyMaterial').addEventListener('change', () => {
if(!currentType) return;
const typeData = cascade[currentType.id] || {};
const hasDesign = qs('#vDesignField').classList.contains('show');
const design = hasDesign ? (qs('#vDesign').value || null) : '__none__';
const material = qs('#vBodyMaterial').value || null;
populateSelect(qs('#vSize'), getOptions(currentType.id, design, material,
'sizes'));
populateSelect(qs('#vPressure'), getOptions(currentType.id, design,
material, 'pressures'));
populateSelect(qs('#vEndConnection'), getOptions(currentType.id, design,
material, 'ends'));
const ops = getOptions(currentType.id, design, material, 'operations');
const hasActuated = ops.includes('Actuated');
const opList = ['Manual Handwheel','Manual Lever','Manual Gearbox'];
if(hasActuated) opList.push('Pneumatic Actuated','Electric Actuated');
populateSelect(qs('#vOperator'), opList, false);
updateSnapshot();
});
qsa('.panel[data-panel="2"] select, .panel[data-panel="2"] input, .panel[datapanel="
2"] textarea')
.forEach(el => { el.addEventListener('input', updateSnapshot);
el.addEventListener('change', updateSnapshot); });
function updateSnapshot(){
const snap = qs('#vSnapshot'), miss = qs('#vMissing');
snap.innerHTML = ''; miss.innerHTML = '';
const addKv = (k,v) => {
if(!v) return;
snap.insertAdjacentHTML('beforeend',
`<div class="item"><div class="k">${esc(k)}</div><div class="v">$
{esc(String(v))}</div></div>`);
};
const qty = qs('#vQuantity').value === 'Other' ? qs('#vQtyOther').value :
qs('#vQuantity').value;
const media = qs('#vMedia').value === 'Other' ? qs('#vMediaOther').value :
qs('#vMedia').value;
addKv('Type', currentType ? currentType.name : '');
addKv('Design', qs('#vDesign').value);
addKv('Size', qs('#vSize').value);
addKv('Pressure', qs('#vPressure').value);
addKv('Ends', qs('#vEndConnection').value);
addKv('Material', qs('#vBodyMaterial').value);
addKv('Quantity', qty);
addKv('Media', media);
addKv('Operator', qs('#vOperator').value);
addKv('Spec.', qs('#vDesignSpec').value);
const missing = [];
if(!qs('#vSize').value) missing.push('Size');
if(!qs('#vPressure').value) missing.push('Pressure');
if(!media) missing.push('Media');
if(missing.length){
qs('#vReadyBadge').className = 'badge warn';
qs('#vReadyBadge').innerText = 'Missing Basic Info';
missing.forEach(m => miss.insertAdjacentHTML('beforeend',`<div
class="tag">${esc(m)}</div>`));
} else {
qs('#vReadyBadge').className = 'badge good';
qs('#vReadyBadge').innerText = '✓ Ready';
}
}
function saveCurrentValve(){
if(!currentType){ alert('Please select a valve type first.'); showStep(1); return
false; }
const qty = qs('#vQuantity').value === 'Other' ? qs('#vQtyOther').value :
qs('#vQuantity').value;
const media = qs('#vMedia').value === 'Other' ? qs('#vMediaOther').value :
qs('#vMedia').value;
if(qs('#vMedia').value === 'Other' && !String(media||'').trim()){ alert('Please
specify the media.'); qs('#vMediaOther').focus(); return false; }
// Single enquiry — always replace index 0
valves[0] = {
type_id: currentType.id,
type: currentType.name,
design: qs('#vDesign').value,
size: qs('#vSize').value,
pressure: qs('#vPressure').value,
endConnection:qs('#vEndConnection').value,
bodyMaterial: qs('#vBodyMaterial').value,
trim: qs('#vTrim').value,
quantity: qty,
media: media,
temperature: qs('#vTempRange').value,
operator: qs('#vOperator').value,
failPosition: qs('#vFailQuick').value,
voltage: qs('#vElectricVoltage').value,
designSpec: qs('#vDesignSpec').value,
notes: qs('#vNotes').value
};
draftValve = null;
return true;
}
function resetStep2(){
qsa('.panel[data-panel="2"] select').forEach(s => s.value='');
qsa('.panel[data-panel="2"] input').forEach(i => { if(i.type!=='file')
i.value=''; });
qsa('.panel[data-panel="2"] textarea').forEach(t => t.value='');
qsa('.conditional').forEach(c => c.classList.remove('show'));
updateSnapshot();
}
qs('#vContinue2').addEventListener('click', () => { if(saveCurrentValve())
showStep(3); });
function renderReview(){
const fn = qs('#vFirstName').value, ln = qs('#vLastName').value;
qs('#qName').innerText = `${fn} ${ln}`.trim() || '-';
qs('#qEmail').innerText = qs('#vEmail').value || '-';
qs('#qPhone').innerText = qs('#vPhone').value || '-';
qs('#qCompany').innerText = qs('#vCompany').value || '-';
qs('#qBranch').innerText = qs('#vBranch').value || '-';
qs('#qPurpose').innerText = qs('#vPurpose').value || '-';
qs('#qSource').innerText = qs('#vSource').value || '-';
const list = qs('#vValvesList');
list.innerHTML = '';
const v = valves[0];
if(!v) return;
list.insertAdjacentHTML('beforeend', `
<div class="valve-item">
<div class="valve-item-header">
<b>${esc(v.type||'Valve')}</b>
<span class="badge info">Qty: ${esc(String(v.quantity||'?'))}</span>
</div>
<div class="spec-grid">
<div class="spec-row"><span>Design:</span><b>${esc(v.design||'-')}</
b></div>
<div class="spec-row"><span>Size:</span><b>${esc(v.size||'-')}</b></
div>
<div class="spec-row"><span>Pressure:</span><b>$
{esc(v.pressure||'-')}</b></div>
<div class="spec-row"><span>Ends:</span><b>$
{esc(v.endConnection||'-')}</b></div>
<div class="spec-row"><span>Material:</span><b>$
{esc(v.bodyMaterial||'-')}</b></div>
<div class="spec-row"><span>Media:</span><b>${esc(v.media||'-')}</
b></div>
<div class="spec-row"><span>Operator:</span><b>$
{esc(v.operator||'-')}</b></div>
<div class="spec-row"><span>Design Spec.:</span><b>$
{esc(v.designSpec||'-')}</b></div>
</div>
<div class="attachments-mini">
<span class="pill">
Files uploaded separately via GHL form</span>
</div>
</div>`);
}
function getPayload(){
const v = valves[0] || {};
const productName = [v.type, v.design, v.size,
v.pressure].filter(Boolean).join(' ') || 'Valve Enquiry';
const qty = parseInt(v.quantity, 10) || 1;
return {
first_name: qs('#vFirstName').value,
last_name: qs('#vLastName').value,
email: qs('#vEmail').value,
phone: qs('#vPhone').value,
reference: REFERENCE,
product_name: productName,
quantity: qty,
company: qs('#vCompany').value,
branch: qs('#vBranch').value,
purpose: qs('#vPurpose').value,
source: qs('#vSource').value,
tags: 'ValveSpec,Enquiry',
type: v.type,
design: v.design,
size: v.size,
pressure: v.pressure,
end_connection:v.endConnection,
body_material: v.bodyMaterial,
trim: v.trim,
media: v.media,
temperature: v.temperature,
operator: v.operator,
fail_position: v.failPosition,
voltage: v.voltage,
design_spec: v.designSpec,
notes: v.notes
};
}
qs('#vSendWebhook').addEventListener('click', async () => {
const payload = getPayload();
const statusEl = qs('#vStatusMsg');
const btn = qs('#vSendWebhook');
const backBtn = qs('#vBack4');
btn.innerText = 'Sending…';
btn.disabled = true;
statusEl.innerHTML = `<div class="status-sending">
Submitting enquiry
${REFERENCE}…</div>`;
try {
const resp = await fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if(!resp.ok){
const txt = await resp.text().catch(()=>'');
throw new Error(`Server responded ${resp.status}. ${txt}`);
}
btn.innerText = '✓ Submitted';
btn.className = 'btn good';
backBtn.style.display = 'none';
statusEl.innerHTML = `
<div class="status-ok">
Enquiry <strong>${REFERENCE}</strong> submitted successfully!
<br>
<span style="font-weight:400;font-size:12px">Our team will be in touch
shortly.</span>
</div>`;
qs('#vAnotherWrap').style.display = 'block';
} catch(err){
console.error(err);
btn.innerText = '⚠ Retry';
btn.disabled = false;
statusEl.innerHTML = `
<div class="status-err">
Submission failed: ${esc(err.message)}<br>
<span style="font-weight:400;font-size:12px">Please try again or
contact us directly.</span>
</div>`;
}
});
// Full form reset for a brand new enquiry
qs('#vStartAnother').addEventListener('click', () => {
// Reset all Step 1 fields
qsa('.panel[data-panel="1"] input, .panel[data-panel="1"] select').forEach(el
=> el.value = '');
// Reset valve state
valves = [];
draftValve = null;
currentType = null;
qsa('.choice').forEach(c => c.classList.remove('active'));
resetStep2();
// Reset Step 4 UI
const btn = qs('#vSendWebhook');
btn.innerText = '✓ Submit Enquiry';
btn.className = 'btn good';
btn.disabled = false;
qs('#vBack4').style.display = '';
qs('#vStatusMsg').innerHTML = '';
qs('#vAnotherWrap').style.display = 'none';
// Generate new reference
REFERENCE = 'ENQ-' +
Math.random().toString(36).slice(2,7).toUpperCase();
qs('#vEnqRef').innerText = REFERENCE;
qs('#vEnqRefDisplay').innerText = REFERENCE;
qs('#vEnqRefReview').innerText = REFERENCE;
// Reset step nav
maxStep = 1;
showStep(1);
});
function esc(str){
return String(str??'')
.replaceAll('&','&').replaceAll('<','<')
.replaceAll('>','>').replaceAll('"','"')
.replaceAll("'","'");
}
})();
</script></div>
						</div>
				</div>
					</div>
				</div>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-3ef6e33 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3ef6e33" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e0d997a" data-id="e0d997a" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<section class="elementor-section elementor-inner-section elementor-element elementor-element-02fb919 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="02fb919" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-94ad318" data-id="94ad318" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-fd7aa97 elementor-view-default elementor-widget elementor-widget-icon" data-id="fd7aa97" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
				<div class="elementor-widget-container">
							<div class="elementor-icon-wrapper">
			<div class="elementor-icon">
			<i aria-hidden="true" class="fas fa-map-marker-alt"></i>			</div>
		</div>
						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7e42876" data-id="7e42876" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-28ab08f elementor-widget elementor-widget-heading" data-id="28ab08f" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">Kwa-Zulu-Natal</h2>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-1eaa607 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1eaa607" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-a3e88a2" data-id="a3e88a2" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-d83c0c8 elementor-widget elementor-widget-google_maps" data-id="d83c0c8" data-element_type="widget" data-e-type="widget" data-widget_type="google_maps.default">
				<div class="elementor-widget-container">
							<div class="elementor-custom-embed">
			<iframe loading="lazy"
					src="https://maps.google.com/maps?q=10%2C%202%20Corobrik%20Rd%2C%20Riverhorse%20Valley%2C%20Durban%2C%204071&t=m&z=13&output=embed&iwloc=near"
					title="10, 2 Corobrik Rd, Riverhorse Valley, Durban, 4071"
					aria-label="10, 2 Corobrik Rd, Riverhorse Valley, Durban, 4071"
			></iframe>
		</div>
						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-9cfd379" data-id="9cfd379" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<section class="elementor-section elementor-inner-section elementor-element elementor-element-0c2ac40 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0c2ac40" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7ceb4d8" data-id="7ceb4d8" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-671b1e9 elementor-view-default elementor-widget elementor-widget-icon" data-id="671b1e9" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
				<div class="elementor-widget-container">
							<div class="elementor-icon-wrapper">
			<div class="elementor-icon">
			<i aria-hidden="true" class="fas fa-map-marker-alt"></i>			</div>
		</div>
						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-70baad2" data-id="70baad2" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-cb52d0b elementor-widget elementor-widget-heading" data-id="cb52d0b" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">Gauteng</h2>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-2fd5b60 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="2fd5b60" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-094c25f" data-id="094c25f" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-c72e844 elementor-widget elementor-widget-google_maps" data-id="c72e844" data-element_type="widget" data-e-type="widget" data-widget_type="google_maps.default">
				<div class="elementor-widget-container">
							<div class="elementor-custom-embed">
			<iframe loading="lazy"
					src="https://maps.google.com/maps?q=Unit%203%2C%2011%20Venda%20Road%2C%20Sebenza%2C%20Edenvale%2C%201609%2C%20Gauteng&t=m&z=10&output=embed&iwloc=near"
					title="Unit 3, 11 Venda Road, Sebenza, Edenvale, 1609, Gauteng"
					aria-label="Unit 3, 11 Venda Road, Sebenza, Edenvale, 1609, Gauteng"
			></iframe>
		</div>
						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-ead9028 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ead9028" data-element_type="section" data-e-type="section" data-settings="{"background_background":"classic"}">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-97a4490" data-id="97a4490" data-element_type="column" data-e-type="column" data-settings="{"background_background":"classic"}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<section class="elementor-section elementor-inner-section elementor-element elementor-element-72849bc elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="72849bc" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e1a2acc" data-id="e1a2acc" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-1f6f289 elementor-widget elementor-widget-text-editor" data-id="1f6f289" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Address</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8849a6d" data-id="8849a6d" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-620ded6 elementor-widget elementor-widget-text-editor" data-id="620ded6" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Unit 10,   2 Corobrik Rd,  Riverhorse Valley,   Durban,   4071</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-2c74e80 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="2c74e80" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-816fc58" data-id="816fc58" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-48bc521 elementor-widget elementor-widget-text-editor" data-id="48bc521" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Telephone</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4fa67ac" data-id="4fa67ac" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-f7a9a28 elementor-widget elementor-widget-text-editor" data-id="f7a9a28" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>031 569 6325/6</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-53101f8 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="53101f8" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a113a31" data-id="a113a31" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-6b62c93 elementor-widget elementor-widget-text-editor" data-id="6b62c93" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Email</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-21e4dfd" data-id="21e4dfd" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-9e61dfa elementor-widget elementor-widget-text-editor" data-id="9e61dfa" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>valvespec@mweb.co.za</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-45a54ed" data-id="45a54ed" data-element_type="column" data-e-type="column" data-settings="{"background_background":"classic"}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<section class="elementor-section elementor-inner-section elementor-element elementor-element-4898860 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4898860" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-960dfc3" data-id="960dfc3" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-5412550 elementor-widget elementor-widget-text-editor" data-id="5412550" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Address</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d6c668b" data-id="d6c668b" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-feca994 elementor-widget elementor-widget-text-editor" data-id="feca994" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Unit 3, 11 Venda Road, Sebenza, Edenvale, 1609, Johannesburg</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-8ac7ff6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="8ac7ff6" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b17e176" data-id="b17e176" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-dbbbeaf elementor-widget elementor-widget-text-editor" data-id="dbbbeaf" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Telephone</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ece3055" data-id="ece3055" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-995072c elementor-widget elementor-widget-text-editor" data-id="995072c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>011 397 6922/7497</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-87f2864 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="87f2864" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ce1e7b7" data-id="ce1e7b7" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-4aae1e0 elementor-widget elementor-widget-text-editor" data-id="4aae1e0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Email</p>								</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8989e61" data-id="8989e61" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-b01248e elementor-widget elementor-widget-text-editor" data-id="b01248e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>jhb@valvespec.co.za</p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
		<div class="elementor-element elementor-element-3f2f0d5 e-flex e-con-boxed e-con e-parent" data-id="3f2f0d5" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
					</div>
				</div>
		<div class="elementor-element elementor-element-37b5de45 e-flex e-con-boxed e-con e-parent" data-id="37b5de45" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-19c9c40 e-con-full e-flex e-con e-child" data-id="19c9c40" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
		<div class="elementor-element elementor-element-98a21cd e-con-full e-flex e-con e-child" data-id="98a21cd" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-2ffaaf5 elementor-widget elementor-widget-image" data-id="2ffaaf5" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img decoding="async" src="https://valvespec.co.za/wp-content/uploads/elementor/thumbs/cropped-cropped-VS-QET-LOGO-1-qw0qxrve3arq3pbp338ea6zgal2tx3n676uuzrv7r4.png" title="cropped-cropped-VS-QET-LOGO (1)" alt="cropped-cropped-VS-QET-LOGO (1)" loading="lazy" />															</div>
				</div>
				<div class="elementor-element elementor-element-9913374 elementor-shape-circle e-grid-align-mobile-center elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="9913374" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
				<div class="elementor-widget-container">
							<div class="elementor-social-icons-wrapper elementor-grid" role="list">
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-animation-pop elementor-repeater-item-702099c" href="https://www.facebook.com/valvespec/" target="_blank">
						<span class="elementor-screen-only">Facebook-f</span>
						<i aria-hidden="true" class="fab fa-facebook-f"></i>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-animation-pop elementor-repeater-item-b9adc1a" href="https://www.linkedin.com/company/valve-specialists-cc/" target="_blank">
						<span class="elementor-screen-only">Linkedin-in</span>
						<i aria-hidden="true" class="fab fa-linkedin-in"></i>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-animation-pop elementor-repeater-item-39912c7" href="https://www.instagram.com/valvespec/" target="_blank">
						<span class="elementor-screen-only">Instagram</span>
						<i aria-hidden="true" class="fab fa-instagram"></i>					</a>
				</span>
					</div>
						</div>
				</div>
		<div class="elementor-element elementor-element-2bb22b4 e-con-full e-flex e-con e-child" data-id="2bb22b4" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-5524cbc elementor-widget elementor-widget-image" data-id="5524cbc" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img decoding="async" width="242" height="173" src="https://valvespec.co.za/wp-content/uploads/2024/10/logo.jpg" class="attachment-large size-large wp-image-9904" alt="" />															</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-1fbb5ac e-con-full e-flex e-con e-child" data-id="1fbb5ac" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-ab4b45c elementor-widget elementor-widget-heading" data-id="ab4b45c" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h5 class="elementor-heading-title elementor-size-default">Support Documents</h5>				</div>
				</div>
				<div class="elementor-element elementor-element-6f4a0db elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="6f4a0db" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<a href="https://valvespec.co.za/wp-content/uploads/2024/10/ISO-CERT-2024-2025.pdf">

<span class="elementor-icon-list-icon">
							<i aria-hidden="true" class="fas fa-square-full"></i>						</span>
										<span class="elementor-icon-list-text">ISO Certificate</span>
											</a>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<i aria-hidden="true" class="fas fa-square-full"></i>						</span>
										<span class="elementor-icon-list-text">Level 1 BEE</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<i aria-hidden="true" class="fas fa-square-full"></i>						</span>
										<span class="elementor-icon-list-text">Credit Application</span>
									</li>
						</ul>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-6abe495 e-con-full e-flex e-con e-child" data-id="6abe495" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-2ef1e65 elementor-widget elementor-widget-heading" data-id="2ef1e65" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h5 class="elementor-heading-title elementor-size-default">Company</h5>				</div>
				</div>
				<div class="elementor-element elementor-element-e471fb4 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="e471fb4" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<a href="https://valvespec.co.za/about-us/">

<span class="elementor-icon-list-icon">
							<i aria-hidden="true" class="fas fa-square-full"></i>						</span>
										<span class="elementor-icon-list-text">About us</span>
											</a>
									</li>
						</ul>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-be2fcae e-con-full e-flex e-con e-child" data-id="be2fcae" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-e4608b7 elementor-widget elementor-widget-heading" data-id="e4608b7" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h5 class="elementor-heading-title elementor-size-default">Newsletter</h5>				</div>
				</div>
				<div class="elementor-element elementor-element-7022fa5 elementor-widget elementor-widget-heading" data-id="7022fa5" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<div class="elementor-heading-title elementor-size-default">Subscribe to our Newsletter & Event right now to be updated.</div>				</div>
				</div>
				<div class="elementor-element elementor-element-88f6e03 elementor-button-align-stretch elementor-widget elementor-widget-form" data-id="88f6e03" data-element_type="widget" data-e-type="widget" data-settings="{"step_next_label":"Next","step_previous_label":"Previous","button_width_tablet":"100","button_width":"100","step_type":"number_text","step_icon_shape":"circle"}" data-widget_type="form.default">
				<div class="elementor-widget-container">
							<form class="elementor-form" method="post" name="New Form" aria-label="New Form">
			<input type="hidden" name="post_id" value="414"/>
			<input type="hidden" name="form_id" value="88f6e03"/>
			<input type="hidden" name="referer_title" value="Contact Us - ValveSpec" />

<input type="hidden" name="queried_id" value="414"/>
			
			<div class="elementor-form-fields-wrapper elementor-labels-">
								<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-md-50">
												<label for="form-field-name" class="elementor-field-label elementor-screen-only">
								Name							</label>
														<input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Name">
											</div>
								<div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-md-50 elementor-field-required">
												<label for="form-field-email" class="elementor-field-label elementor-screen-only">
								Email							</label>
														<input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Email" required="required">
											</div>
								<div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons elementor-md-100">
					<button class="elementor-button elementor-size-sm" type="submit">
						<span class="elementor-button-content-wrapper">
																						<span class="elementor-button-text">Sign Up Newsletter</span>
													</span>
					</button>
				</div>
			</div>
		</form>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-a7dc3eb e-flex e-con-boxed e-con e-child" data-id="a7dc3eb" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-ffd703a elementor-widget elementor-widget-heading" data-id="ffd703a" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<div class="elementor-heading-title elementor-size-default">Copyright © 2024 ValveSpec, All rights reserved.</div>				</div>
				</div>
				<div class="elementor-element elementor-element-42cfaa3 elementor-icon-list--layout-inline elementor-align-end elementor-mobile-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="42cfaa3" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items elementor-inline-items">
							<li class="elementor-icon-list-item elementor-inline-item">
											<a href="https://valvespec.co.za/privacy-policy/">

<span class="elementor-icon-list-text">Privacy policy</span>
											</a>
									</li>
						</ul>
						</div>
				</div>
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		
		
			</div>

</main>

</body>
</html>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced

Served from: valvespec.co.za @ 2026-04-19 11:00:57 by W3 Total Cache
-->