StartIT/web.start-it.nl
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Machiel Heinen
2025-12-02 16:34:42 +01:00
commit ae16f86d5e
203 changed files with 30853 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
themes/agico-hugo/layouts/_default/quote.html Normal file
View File

@@ -0,0 +1,145 @@
{{ define "main" }}
<section class="section section-lg-bottom bg-light">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<form id="leadcapture-form" class="row">
<div class="col-lg-6">
<input type="text" name="firstName" class="form-control mb-4" placeholder="Voornaam">
</div>
<div class="col-lg-6">
<input type="text" name="lastName" class="form-control mb-4" placeholder="Achternaam *" required>
</div>
<div class="col-lg-6">
<input type="email" name="emailAddress" class="form-control mb-4" placeholder="E-mail *" required>
</div>
<div class="col-lg-6">
<input type="text" name="phoneNumber" class="form-control mb-4" placeholder="Telefoon">
</div>
<div class="col-lg-12">
<textarea name="description" class="form-control mb-4" placeholder="Bericht *" required></textarea>
</div>
<div style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">
<label for="company">Bedrijfsnaam</label>
<input type="text" id="company" name="company" tabindex="-1" autocomplete="off">
</div>
<div class="col-lg-12">
<hr>
<h5>Prijsberekening (schatting)</h5>
</div>
<div class="col-lg-4">
<label for="pages" class="form-label">Aantal pagina's</label>
<input type="number" id="pages" name="pages" class="form-control mb-3" value="1" min="0" step="1">
<small class="text-muted">Prijs per pagina: €50</small>
</div>
<div class="col-lg-4">
<label for="websiteType" class="form-label">Website type</label>
<select id="websiteType" name="websiteType" class="form-select mb-3">
<option value="800">HUGO — €800</option>
<option value="1150" selected>Wordpress — €1150</option>
<option value="2350">Shopify — €2350</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label d-block">Extra modules</label>
<div class="form-check">
<input class="form-check-input calc-extra" type="checkbox" value="300" id="extraBlog" name="extraBlog">
<label class="form-check-label" for="extraBlog">Blog — €100</label>
</div>
<div class="form-check">
<input class="form-check-input calc-extra" type="checkbox" value="100" id="extraContact" name="extraContact">
<label class="form-check-label" for="extraContact">Extra contactformulier — €100</label>
</div>
<div class="form-check">
<input class="form-check-input calc-extra" type="checkbox" value="400" id="extraWebshopPayment" name="extraWebshopPayment">
<label class="form-check-label" for="extraWebshopPayment">Webshop — €400</label>
</div>
</div>
<div class="col-12 mt-3 d-flex">
<button type="button" id="calculate" class="btn btn-outline-primary me-3">Bereken totaal</button>
<p class="mb-0">Totaal: <strong>€<span id="total">0</span></strong></p>
</div>
<!-- Verborgen input zodat backend het totaal krijgt bij submit -->
<input type="hidden" name="estimatedTotal" id="estimatedTotal" value="0">
<!-- -------- einde calculator -------- -->
<div class="col-12 mt-4">
<button type="submit" class="btn btn-primary">{{ i18n "submit_now"}}</button>
</div>
<div class="col-12 mt-2">
<p id="leadcapture-status" class="text-success" hidden>Bedankt! We nemen zo spoedig mogelijk contact op.</p>
<p id="leadcapture-error" class="text-danger" hidden>Er ging iets mis. Probeer het opnieuw.</p>
</div>
</form>
</div>
</div>
</div>
</section>
<script>
(function () {
const pagesEl = document.getElementById('pages');
const websiteTypeEl = document.getElementById('websiteType');
const extrasEls = document.querySelectorAll('.calc-extra');
const totalEl = document.getElementById('total');
const hiddenTotalEl = document.getElementById('estimatedTotal');
const calculateBtn = document.getElementById('calculate');
const form = document.getElementById('leadcapture-form');
function toIntSafe(value) {
const s = String(value).replace(/[^\d\-]/g, '');
const n = parseInt(s, 10);
return Number.isNaN(n) ? 0 : n;
}
function computeTotal() {
const pages = toIntSafe(pagesEl.value);
const websiteBase = toIntSafe(websiteTypeEl.value);
let extrasSum = 0;
extrasEls.forEach(el => {
if (el.checked) {
extrasSum += toIntSafe(el.value);
}
});
const total = websiteBase + (pages * pricePerPage) + extrasSum;
return total;
}
function updateUI(total) {
totalEl.textContent = total;
hiddenTotalEl.value = total;
}
[pagesEl, websiteTypeEl].forEach(el => el.addEventListener('input', () => updateUI(computeTotal())));
extrasEls.forEach(el => el.addEventListener('change', () => updateUI(computeTotal())));
calculateBtn.addEventListener('click', () => updateUI(computeTotal()));
// Initial render
updateUI(computeTotal());
form.addEventListener('submit', function (ev) {
const honeypot = document.getElementById('company').value;
if (honeypot && honeypot.trim() !== '') {
// vermoedelijke bot — blokkeer submit
ev.preventDefault();
// toon fout (optioneel)
document.getElementById('leadcapture-error').hidden = false;
document.getElementById('leadcapture-status').hidden = true;
return;
}
hiddenTotalEl.value = computeTotal();
});
})();
</script>
{{ end }}