StartIT/mantelzorgwoning.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New: EspoCRM API naar formulier bedrijf aanmelden

Browse Source
This commit is contained in:
Machiel Heinen
2026-01-29 10:13:54 +01:00
parent a1af2e4928
commit aa98cd394e
5 changed files with 275 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/company/boxtom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

30
hugo_stats.json
View File

@@ -68,11 +68,13 @@
"border-start-0",
"border-top",
"btn",
"btn-lg",
"btn-outline",
"btn-outline-primary",
"btn-primary",
"btn-secondary",
"btn-sm",
"btn-success",
"btn-white",
"builder-card",
"card",
@@ -149,6 +151,7 @@
"flex-grow-1",
"flex-sm-row",
"flex-wrap",
"font-italic",
"font-small",
"footer-menu",
"footnote-backref",
@@ -162,10 +165,10 @@
"form-control-sm",
"form-group",
"form-inline",
"form-text",
"fw-bold",
"g-2",
"gap-2",
"gy-3",
"gy-4",
"h-100",
"h3",
@@ -210,6 +213,7 @@
"ms-sm-2",
"mt-2",
"mt-3",
"mt-4",
"mt-5",
"mt-auto",
"mt-sm-0",
@@ -355,6 +359,7 @@
"bouwwijze",
"builder-filters",
"builders-grid",
"char-count",
"checking-municipal-requirements",
"ciz-indicatie-en-sociale-wijkteams",
"ciz-indication-and-social-district-teams",
@@ -423,7 +428,6 @@
"goed-verblijven",
"het-bewijs-van-zorgbehoefte",
"het-proces-van-fabriek-naar-tuin",
"houtbouw",
"huurkoop",
"impact-on-property-value",
"impact-op-de-woningwaarde",
@@ -431,6 +435,7 @@
"important-fiscal-and-financial-considerations",
"inrichting-en-zorgspecifieke-aanpassingen",
"interior-and-care-specific-adjustments",
"intro",
"juridische-definitie",
"juridische-en-fiscale-aspecten",
"kangaroo-housing-kangoeroewoning",
@@ -440,8 +445,6 @@
"key-considerations-per-type",
"key-features-in-the-nl",
"kvk",
"landelijk",
"lead_time",
"lease",
"legal-definition-in-the-netherlands",
"lname",
@@ -452,7 +455,7 @@
"medical-confirmation",
"medische-bevestiging",
"message",
"modern",
"modulair",
"multi-step-form",
"navigation",
"negative",
@@ -475,10 +478,12 @@
"postal_code",
"pre-informal-care-home",
"pre-mantelzorgwoning",
"prefab",
"prefab-bouw",
"prefab-construction",
"prefab-informal-care-home",
"prefab-mantelzorgwoning",
"prefill-status",
"preparation-and-consultation",
"procedural-requirements",
"procedurele-eisen",
@@ -488,23 +493,31 @@
"reason",
"regulation-through-the-environmental-plan",
"removability-and-residual-value",
"rolstoel",
"review-btn",
"search-by",
"search-result-body",
"searchInput",
"searchModal",
"second_hand",
"select-language",
"service_contract",
"sett-living",
"site-administrator-details",
"slogan",
"slogan-count",
"sloop-of-verwijdering-van-de-woning",
"solilux",
"step-1",
"step-2",
"step-3",
"stock",
"step-4",
"step-5",
"submit-btn",
"summary-build",
"summary-custom",
"summary-intro",
"summary-name",
"summary-slogan",
"telephone",
"temporary-and-modular-units",
"termination-of-informal-care",
"the-challenge-of-temporariness",
@@ -516,7 +529,6 @@
"the-situation-after-informal-care-ends",
"the-sustainable-informal-care-dwelling",
"tijdelijke-en-modulaire-units",
"tillen",
"top-totaal-blijf-ook-wonen",
"transport-and-crane-work",
"transport-en-hijswerk",

309
layouts/_default/bedrijf-aanmelden.html
View File

@@ -9,32 +9,45 @@
<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">
<h4 class="mb-4">Stap 1: Bedrijfsgegevens</h4>
<div class="row gy-4">
<div class="form-group col-md-12">
<label for="company_name">Officiële Bedrijfsnaam</label>
<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">KvK Nummer</label>
<input type="text" class="form-control text-dark" id="kvk" name="kvk_number" required>
<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">Website</label>
<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-8">
<label for="address">Straat + Huisnummer</label>
<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-4">
<label for="postal_code">Postcode</label>
<input type="text" class="form-control text-dark" id="postal_code" name="postalCode">
<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">
@@ -44,25 +57,22 @@
</div>
<div class="step d-none" id="step-2">
<h4 class="mb-4">Stap 2: Bedrijfsvoering & Aanbod</h4>
<div class="row gy-4">
<div class="form-group col-md-8">
<label for="factory">Beschikt u over eigen fabriek(en)?</label>
<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>
<small class="form-text text-muted">Let op: conform de voorwaarden dient dit feitelijk juist te zijn[cite: 73].</small>
</div>
<div class="form-group col-md-4">
<label for="factory_count">Aantal locaties</label>
<input type="number" class="form-control text-dark" id="factory_count" name="factory_count" placeholder="0" min="0">
<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-2">Financiële mogelijkheden (meerdere opties mogelijk)</label>
<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>
@@ -74,18 +84,10 @@
</div>
<div class="form-group col-md-12">
<label for="second_hand">Biedt u geregeld tweedehands modellen aan?</label>
<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 tweedehands aanbod</option>
</select>
</div>
<div class="form-group col-md-12">
<label for="service_contract">Biedt u nazorg middels een service-overeenkomst?</label>
<select class="form-control text-dark" id="service_contract" name="service_contract">
<option value="Nee">Nee</option>
<option value="Ja">Ja, wij bieden structurele nazorg/onderhoud</option>
<option value="Ja">Ja, wij hebben een wisselend aanbod</option>
</select>
</div>
@@ -97,63 +99,28 @@
</div>
<div class="step d-none" id="step-3">
<h4 class="mb-4">Stap 3: Bouwstijl & Levering</h4>
<div class="row gy-4">
<div class="form-group col-md-12">
<label class="d-block mb-2">Welke bouwstijlen hanteert u? (meerdere opties mogelijk)</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="modern" name="build_style" value="Modern">
<label class="form-check-label" for="modern">Modern</label>
<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 form-check-inline">
<input class="form-check-input" type="checkbox" id="landelijk" name="build_style" value="Landelijk">
<label class="form-check-label" for="landelijk">Landelijk</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="houtbouw" name="build_style" value="Houtbouw">
<label class="form-check-label" for="houtbouw">Houtbouw / Chaletstijl</label>
<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-12">
<label for="customization">In hoeverre is maatwerk mogelijk?</label>
<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 maatwerk (architectonisch)</option>
<option value="Modulair">Modulair (aanpasbare standaardmodellen)</option>
<option value="Standaard">Uitsluitend standaardmodellen</option>
<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="form-group col-md-6">
<label for="stock">Levert u direct uit voorraad?</label>
<select class="form-control text-dark" id="stock" name="delivery_stock">
<option value="Nee">Nee, alles op bestelling</option>
<option value="Ja">Ja, wij hebben showmodellen/voorraad direct leverbaar</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="lead_time">Indicatieve levertijd (gemiddeld)</label>
<select class="form-control text-dark" id="lead_time" name="lead_time">
<option value="Snel">Minder dan 3 maanden</option>
<option value="Gemiddeld">3 tot 6 maanden</option>
<option value="Lang">Meer dan 6 maanden</option>
</select>
</div>
<div class="form-group col-md-12">
<label class="d-block mb-2">Specifieke zorgfaciliteiten mogelijk?</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="rolstoel" name="care_features" value="Rolstoeltoegankelijk">
<label class="form-check-label" for="rolstoel">Volledig rolstoeltoegankelijk</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="tillen" name="care_features" value="Plafondlift">
<label class="form-check-label" for="tillen">Voorbereiding voor til-/plafondliften</label>
</div>
</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>
@@ -161,6 +128,48 @@
</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-3 bg-light rounded border">
<p><strong>Bedrijf:</strong> <span id="summary-name"></span></p>
<p><strong>Slogan:</strong> <span id="summary-slogan"></span></p>
<p><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
<p><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
<hr>
<p><strong>Introductie:</strong></p>
<p class="font-italic" id="summary-intro" style="white-space: pre-wrap;"></p>
</div>
</div>
<div class="col-md-12 mt-4">
<button type="button" class="btn btn-secondary prev-step">Aanpassen</button>
<button type="submit" id="submit-btn" class="btn btn-success btn-lg">Definitief verzenden</button>
</div>
</div>
</div>
</form>
</div>
</div>
@@ -169,36 +178,144 @@
</section>
<script>
document.querySelectorAll('.next-step').forEach(button => {
button.addEventListener('click', () => {
const currentStep = button.closest('.step');
const nextStep = currentStep.nextElementSibling;
(() => {
'use strict';
// Simpele validatie check
const inputs = currentStep.querySelectorAll('input[required]');
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';
};
function setFieldValue(fieldId, value) {
const el = document.getElementById(fieldId);
if (!el || !value) return false;
if (el.value.trim() && el.value !== 'https://') return false;
el.value = value;
el.dispatchEvent(new Event('input', { bubbles: true }));
return true;
}
function showInlineStatus(msg) {
const box = document.getElementById('prefill-status');
if (box) box.textContent = msg;
}
// Formatting helpers
const kvkEl = document.getElementById('kvk');
if (kvkEl) kvkEl.addEventListener('input', e => e.target.value = e.target.value.replace(/\D/g, '').slice(0, 8));
// Counters
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
$$('.next-step').forEach(btn => {
btn.addEventListener('click', () => {
const curr = btn.closest('.step');
const inputs = $$('[required]', curr);
let valid = true;
inputs.forEach(i => { if(!i.value) valid = false; });
inputs.forEach(i => { if(!i.checkValidity()) { valid = false; i.classList.add('is-invalid'); } else { i.classList.remove('is-invalid'); }});
if(valid && nextStep) {
currentStep.classList.add('d-none');
nextStep.classList.remove('d-none');
window.scrollTo(0, 0); // Terug naar boven voor de focus
} else {
alert('Vul a.u.be. de verplichte velden in.');
if (!valid) return;
const next = curr.nextElementSibling;
if (next) {
if (next.id === 'step-5') {
document.getElementById('summary-name').innerText = getVal('company_name');
document.getElementById('summary-slogan').innerText = getVal('slogan');
document.getElementById('summary-custom').innerText = getVal('customization');
document.getElementById('summary-intro').innerText = getVal('intro');
document.getElementById('summary-build').innerText = getChecked('build_method');
}
curr.classList.add('d-none');
next.classList.remove('d-none');
window.scrollTo(0,0);
}
});
});
});
document.querySelectorAll('.prev-step').forEach(button => {
button.addEventListener('click', () => {
const currentStep = button.closest('.step');
const prevStep = currentStep.previousElementSibling;
if(prevStep) {
currentStep.classList.add('d-none');
prevStep.classList.remove('d-none');
$$('.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.');
}
}
document.getElementById('multi-step-form').addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('submit-btn');
btn.disabled = true; btn.innerText = 'Verzenden...';
const payload = {
lastName: getVal('company_name'),
website: getVal('website'),
emailAddress: getVal('email') !== '-' ? getVal('email') : CFG.fallbackEmail,
description: `KVK: ${getVal('kvk')}\nINTRO: ${getVal('intro')}\nBOUW: ${getChecked('build_method')}`
};
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 }}

28
static/prefill.php Normal file
View File

@@ -0,0 +1,28 @@
<?php
// prefill.php
$apiKey = '31b69c04fc1944c905bcf895789c1c98';
$crmBaseUrl = 'https://crm.start-it.nl/api/v1/Account/';
$id = $_GET['id'] ?? '';
if (!$id || !preg_match('/^[a-z0-9]+$/', $id)) {
http_response_code(400);
die(json_encode(['error' => 'Invalid ID']));
}
$opts = [
"http" => [
"method" => "GET",
"header" => "X-Api-Key: $apiKey\r\nContent-Type: application/json\r\n"
]
];
$context = stream_context_create($opts);
$response = @file_get_contents($crmBaseUrl . $id, false, $context);
if ($response === false) {
http_response_code(404);
echo json_encode(['error' => 'CRM record not found']);
} else {
header('Content-Type: application/json');
echo $response;
}

37
themes/godocs-1/assets/scss/_common.scss
View File

@@ -430,54 +430,35 @@ $quote-color: #918e91;
pointer-events: none;
}
/* Container voor filters */
#builder-filters {
--primary-color: #4c9e81; /* Komt overeen met je 'Bezoek de website' knop */
--checkbox-size: 24px; /* Ongeveer 50% groter dan standaard */
}
/* De checkbox groter maken en kleur geven */
.filter-checkbox {
width: var(--checkbox-size);
height: var(--checkbox-size);
.form-check-input {
width: 24px;
height: 24px;
margin-top: 0;
cursor: pointer;
border: 2px solid #ced4da;
transition: all 0.2s ease-in-out;
}
/* Kleur bij actieve/checked status */
.filter-checkbox:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
.form-check-input:checked {
background-color: $color-primary;
border-color: $color-primary;
}
/* Focus staat voor toegankelijkheid */
.filter-checkbox:focus {
.form-check-input:focus {
box-shadow: 0 0 0 0.25 margin rgba(76, 158, 129, 0.25);
border-color: var(--primary-color);
}
/* De labels beter uitlijnen en leesbaarder maken */
.form-check-label {
padding-left: 10px;
cursor: pointer;
font-size: 1.1rem; /* Iets groter voor leesbaarheid */
line-height: var(--checkbox-size);
line-height: 24px;
vertical-align: middle;
display: inline-block;
}
/* Groepering van de checkbox en label */
.form-check {
display: flex;
align-items: center;
margin-bottom: 1rem !important; /* Meer witruimte tussen de opties */
}
/* De "Filters wissen" link ook iets duidelijker maken */
#clear-filters {
font-size: 1rem;
text-decoration: underline;
margin-top: 15px;
margin-bottom: 1rem !important;
}