405 lines
18 KiB
HTML
405 lines
18 KiB
HTML
{{ define "main" }}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 pe-lg-4">
|
|
<p>{{ .Content }}</p>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="p-4 p-sm-5 shadow rounded content">
|
|
<h2 class="section-title">{{ .Title }}</h2>
|
|
<div id="prefill-status" class="small fw-bold mb-3 text-primary"></div>
|
|
|
|
<form id="multi-step-form">
|
|
|
|
<div class="step" id="step-1">
|
|
<div class="row gy-4">
|
|
<div class="form-group col-md-12">
|
|
<label for="company_name" class="h4">Officiële Bedrijfsnaam</label>
|
|
<input type="text" class="form-control text-dark" id="company_name" name="accountName" placeholder="Zoals vermeld bij de KvK" required>
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="kvk" class="h4">KvK Nummer</label>
|
|
<input type="tel" class="form-control text-dark" id="kvk" name="kvk_number" pattern="[0-9]*" inputmode="numeric" maxlength="8" required>
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="website" class="h4">Website</label>
|
|
<input type="url" class="form-control text-dark" id="website" name="website" placeholder="https://www.uwbedrijf.nl">
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="telephone" class="h4">Telefoon</label>
|
|
<input type="tel" class="form-control text-dark" id="telephone" name="telephone" placeholder="+31 000 000 000">
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="email" class="h4">E-mail</label>
|
|
<input type="email" class="form-control text-dark" id="email" name="email" placeholder="info@uwbedrijf.nl">
|
|
</div>
|
|
|
|
<h3 class="pt-4">Bezoekadres</h3>
|
|
<div class="form-group col-md-6">
|
|
<label for="address" class="h4">Straat + Huisnummer</label>
|
|
<input type="text" class="form-control text-dark" id="address" name="address">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label for="postal_code" class="h4">Postcode</label>
|
|
<input type="text" class="form-control text-dark" id="postal_code" name="postalCode" placeholder="1234 AB" maxlength="7">
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-5">
|
|
<button type="button" class="btn btn-primary next-step">Volgende stap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none" id="step-2">
|
|
<div class="row gy-4">
|
|
<div class="form-group col-md-8">
|
|
<label for="factory" class="h4">Beschikt u over eigen fabriek(en)?</label>
|
|
<select class="form-control text-dark" id="factory" name="has_factory" required>
|
|
<option value="Nee">Nee, wij besteden de bouw uit</option>
|
|
<option value="Ja">Ja, wij bouwen in eigen beheer</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group col-md-4">
|
|
<label for="factory_count" class="h4">Aantal locaties</label>
|
|
<input type="number" class="form-control text-dark" id="factory_count" name="factory_count" value="0" min="0">
|
|
</div>
|
|
|
|
<div class="form-group col-md-12">
|
|
<label class="d-block mb-3 h3">Financiële mogelijkheden</label>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="huurkoop" name="finance_options" value="Huurkoop">
|
|
<label class="form-check-label" for="huurkoop">Huur(-koop)</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="lease" name="finance_options" value="Lease">
|
|
<label class="form-check-label" for="lease">Lease</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-12">
|
|
<label for="second_hand" class="h4">Biedt u geregeld tweedehands modellen aan?</label>
|
|
<select class="form-control text-dark" id="second_hand" name="second_hand">
|
|
<option value="Nee">Nee, uitsluitend nieuwbouw</option>
|
|
<option value="Ja">Ja, wij hebben een wisselend aanbod</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-5">
|
|
<button type="button" class="btn btn-secondary prev-step">Vorige</button>
|
|
<button type="button" class="btn btn-primary next-step">Volgende stap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none" id="step-3">
|
|
<div class="row gy-4">
|
|
<div class="form-group col-md-12">
|
|
<label class="d-block mb-3 h4">Bouwwijze</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="prefab" name="build_method" value="Prefab">
|
|
<label class="form-check-label" for="prefab"><strong>Prefab:</strong> Volledig in fabriek</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="modulair" name="build_method" value="Modulair">
|
|
<label class="form-check-label" for="modulair"><strong>Modulair:</strong> Units/modules</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="customization" class="h4">Maatwerk</label>
|
|
<select class="form-control text-dark" id="customization" name="customization" required>
|
|
<option value="Volledig">Volledig architectonisch maatwerk</option>
|
|
<option value="Aanpasbaar">Standaardmodellen met opties</option>
|
|
<option value="Standaard">Uitsluitend vaste modellen</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-5">
|
|
<button type="button" class="btn btn-secondary prev-step">Vorige</button>
|
|
<button type="button" class="btn btn-primary next-step">Volgende stap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none" id="step-4">
|
|
<div class="row gy-4">
|
|
<div class="form-group col-md-12">
|
|
<label for="slogan" class="h4">Slogan (Max. 30 tekens)</label>
|
|
<input type="text" class="form-control text-dark" id="slogan" name="slogan" maxlength="30" placeholder="Duurzaam bouwen met hart voor de zorg">
|
|
<small>Nog <span id="slogan-count">30</span> tekens</small>
|
|
</div>
|
|
|
|
<div class="form-group col-md-12">
|
|
<label for="intro" class="h4">Bedrijfsintroductie (Max. 320 tekens)</label>
|
|
<textarea id="intro" name="intro_text" class="form-control text-dark" rows="4" maxlength="320" placeholder="Wat maakt uw bedrijf uniek?"></textarea>
|
|
<small class="text-muted">Nog <span id="char-count">320</span> tekens over.</small>
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-5">
|
|
<button type="button" class="btn btn-secondary prev-step">Vorige</button>
|
|
<button type="button" class="btn btn-primary next-step" id="review-btn">Gegevens controleren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none" id="step-5">
|
|
<div class="row gy-3">
|
|
<div class="col-md-12">
|
|
<div class="p-4 bg-light rounded border">
|
|
<h3 class="mb-4 text-primary">Controleer uw gegevens</h3>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Bedrijf & Contact</h5>
|
|
<p class="mb-1"><strong>Naam:</strong> <span id="summary-name"></span></p>
|
|
<p class="mb-1"><strong>KvK:</strong> <span id="summary-kvk"></span></p>
|
|
<p class="mb-1"><strong>Website:</strong> <span id="summary-web"></span></p>
|
|
<p class="mb-1"><strong>E-mail:</strong> <span id="summary-email"></span></p>
|
|
<p class="mb-1"><strong>Adres:</strong> <span id="summary-address"></span></p>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>Productie & Aanbod</h5>
|
|
<p class="mb-1"><strong>Fabriek:</strong> <span id="summary-factory"></span></p>
|
|
<p class="mb-1"><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
|
|
<p class="mb-1"><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
|
|
<p class="mb-1"><strong>Extra opties:</strong> <span id="summary-options"></span></p>
|
|
<p class="mb-1"><strong>Financiering:</strong> <span id="summary-finance"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5>Presentatie</h5>
|
|
<p class="mb-2"><strong>Slogan:</strong> <br><span id="summary-slogan" class="fst-italic"></span></p>
|
|
<p class="mb-0"><strong>Bedrijfsintroductie:</strong></p>
|
|
<div class="p-2 border rounded bg-white mt-1">
|
|
<span id="summary-intro" style="white-space: pre-wrap;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-4 text-center">
|
|
<button type="button" class="btn btn-outline-secondary prev-step me-3">Aanpassen</button>
|
|
<button type="submit" id="submit-btn" class="btn btn-success btn-lg px-5">Definitief verzenden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
(() => {
|
|
'use strict';
|
|
|
|
const CFG = {
|
|
prefillEndpoint: '/api/prefill/account',
|
|
useProxyForSubmit: false,
|
|
submitEndpointDirect: 'https://crm.start-it.nl/api/v1/LeadCapture/38887b5457c35e15f669c4c3ce69fe52',
|
|
fallbackEmail: 'info@mantelzorgwoning.info',
|
|
queryParamId: 'id'
|
|
};
|
|
|
|
const $ = (sel, root = document) => root.querySelector(sel);
|
|
const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
|
|
|
|
const getVal = (id) => {
|
|
const el = document.getElementById(id);
|
|
return el ? (el.value || '').trim() || '-' : '-';
|
|
};
|
|
|
|
const getChecked = (name) => {
|
|
const picked = $$(`input[name="${CSS.escape(name)}"]:checked`).map(cb => cb.value);
|
|
return picked.length ? picked.join(', ') : 'Geen';
|
|
};
|
|
|
|
// 1. URL HTTPS Preload helper
|
|
const websiteEl = document.getElementById('website');
|
|
if (websiteEl) {
|
|
websiteEl.addEventListener('focus', function() {
|
|
if (!this.value) this.value = 'https://';
|
|
});
|
|
websiteEl.addEventListener('blur', function() {
|
|
if (this.value === 'https://') this.value = '';
|
|
});
|
|
}
|
|
|
|
function setFieldValue(fieldId, value) {
|
|
const el = document.getElementById(fieldId);
|
|
if (!el || !value) return false;
|
|
let finalVal = value;
|
|
// Forceer https op website veld bij prefill
|
|
if (fieldId === 'website' && value && !value.startsWith('http')) {
|
|
finalVal = 'https://' + value;
|
|
}
|
|
el.value = finalVal;
|
|
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
return true;
|
|
}
|
|
|
|
function showInlineStatus(msg) {
|
|
const box = document.getElementById('prefill-status');
|
|
if (box) box.textContent = msg;
|
|
}
|
|
|
|
// Formatting & Counters
|
|
const kvkEl = document.getElementById('kvk');
|
|
if (kvkEl) kvkEl.addEventListener('input', e => e.target.value = e.target.value.replace(/\D/g, '').slice(0, 8));
|
|
|
|
const setupCounter = (fId, cId, max) => {
|
|
const el = document.getElementById(fId), cnt = document.getElementById(cId);
|
|
if (!el || !cnt) return;
|
|
const up = () => { cnt.innerText = max - el.value.length; };
|
|
el.addEventListener('input', up);
|
|
up();
|
|
};
|
|
setupCounter('slogan', 'slogan-count', 30);
|
|
setupCounter('intro', 'char-count', 320);
|
|
|
|
// Navigation & 2. UITGEBREIDE SUMMARY
|
|
$$('.next-step').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const curr = btn.closest('.step');
|
|
const inputs = $$('[required]', curr);
|
|
let valid = true;
|
|
inputs.forEach(i => { if(!i.checkValidity()) { valid = false; i.classList.add('is-invalid'); } else { i.classList.remove('is-invalid'); }});
|
|
|
|
if (!valid) return;
|
|
|
|
const next = curr.nextElementSibling;
|
|
if (next) {
|
|
if (next.id === 'step-5') {
|
|
// Vullen van alle summary velden
|
|
const sMap = {
|
|
'summary-name': getVal('company_name'),
|
|
'summary-kvk': getVal('kvk'),
|
|
'summary-web': getVal('website'),
|
|
'summary-email': getVal('email'),
|
|
'summary-address': `${getVal('address')}, ${getVal('postal_code')}`,
|
|
'summary-factory': `${getVal('factory')} (Locaties: ${getVal('factory_count')})`,
|
|
'summary-build': getChecked('build_method'),
|
|
'summary-options': getChecked('additional_offerings'),
|
|
'summary-finance': getChecked('finance_options'),
|
|
'summary-custom': getVal('customization'),
|
|
'summary-slogan': getVal('slogan'),
|
|
'summary-intro': getVal('intro')
|
|
};
|
|
for (const [id, val] of Object.entries(sMap)) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.innerText = val;
|
|
}
|
|
}
|
|
curr.classList.add('d-none');
|
|
next.classList.remove('d-none');
|
|
window.scrollTo(0,0);
|
|
}
|
|
});
|
|
});
|
|
|
|
$$('.prev-step').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const curr = btn.closest('.step'), prev = curr.previousElementSibling;
|
|
if (prev) { curr.classList.add('d-none'); prev.classList.remove('d-none'); }
|
|
});
|
|
});
|
|
|
|
// Prefill Logic
|
|
async function prefillCRM() {
|
|
const id = new URLSearchParams(window.location.search).get(CFG.queryParamId);
|
|
if (!id) return;
|
|
showInlineStatus('Bezig met ophalen gegevens...');
|
|
try {
|
|
const res = await fetch(`${CFG.prefillEndpoint}?id=${id}`);
|
|
if (!res.ok) throw new Error();
|
|
const data = await res.json();
|
|
|
|
setFieldValue('company_name', data.name);
|
|
setFieldValue('website', data.website);
|
|
setFieldValue('address', data.billingAddressStreet);
|
|
setFieldValue('postal_code', data.billingAddressPostalCode);
|
|
setFieldValue('kvk', data.cKvk);
|
|
setFieldValue('telephone', data.phoneNumber);
|
|
setFieldValue('email', data.emailAddress || data.emailAddressData?.[0]?.emailAddress);
|
|
|
|
showInlineStatus('Gegevens succesvol geladen.');
|
|
} catch (e) {
|
|
showInlineStatus('Kon geen gegevens vinden voor dit ID.');
|
|
}
|
|
}
|
|
|
|
// 3. SUBMIT MET VOLLEDIGE BESCHRIJVING
|
|
document.getElementById('multi-step-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('submit-btn');
|
|
btn.disabled = true; btn.innerText = 'Verzenden...';
|
|
|
|
const fullDescription = `
|
|
BEDRIJFSGEGEVENS
|
|
-----------------
|
|
Naam: ${getVal('company_name')}
|
|
KvK: ${getVal('kvk')}
|
|
Adres: ${getVal('address')}
|
|
Postcode: ${getVal('postal_code')}
|
|
Tel: ${getVal('telephone')}
|
|
Email: ${getVal('email')}
|
|
Website: ${getVal('website')}
|
|
|
|
PRODUCTIE & AANBOD
|
|
-----------------
|
|
Eigen fabriek: ${getVal('factory')} (Aantal: ${getVal('factory_count')})
|
|
Bouwmethode: ${getChecked('build_method')}
|
|
Maatwerk: ${getVal('customization')}
|
|
Financiering: ${getChecked('finance_options')}
|
|
Aanvullend aanbod: ${getChecked('additional_offerings')}
|
|
Tweedehands: ${getVal('second_hand')}
|
|
Servicecontract: ${getVal('service_contract')}
|
|
Voorraad leverbaar: ${getVal('stock')}
|
|
|
|
MARKETING
|
|
-----------------
|
|
Slogan: ${getVal('slogan')}
|
|
Introductie: ${getVal('intro')}
|
|
`.trim();
|
|
|
|
const payload = {
|
|
lastName: getVal('company_name'),
|
|
website: getVal('website'),
|
|
emailAddress: getVal('email') !== '-' ? getVal('email') : CFG.fallbackEmail,
|
|
description: fullDescription
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(CFG.submitEndpointDirect, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (res.ok) window.location.href = '/bedankt?bedrijf=' + encodeURIComponent(getVal('company_name'));
|
|
else throw new Error();
|
|
} catch (err) {
|
|
alert('Fout bij verzenden.');
|
|
btn.disabled = false; btn.innerText = 'Definitief verzenden';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', prefillCRM);
|
|
})();
|
|
</script>
|
|
|
|
{{ end }} |