New: Aanmelden bedrijven
This commit is contained in:
204
layouts/_default/bedrijf-aanmelden.html
Normal file
204
layouts/_default/bedrijf-aanmelden.html
Normal file
@@ -0,0 +1,204 @@
|
||||
{{ 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6">
|
||||
<label for="website">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>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-12">
|
||||
<label class="d-block mb-2">Financiële mogelijkheden (meerdere opties mogelijk)</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">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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-12">
|
||||
<label for="customization">In hoeverre is maatwerk mogelijk?</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.next-step').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const currentStep = button.closest('.step');
|
||||
const nextStep = currentStep.nextElementSibling;
|
||||
|
||||
// Simpele validatie check
|
||||
const inputs = currentStep.querySelectorAll('input[required]');
|
||||
let valid = true;
|
||||
inputs.forEach(i => { if(!i.value) valid = false; });
|
||||
|
||||
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.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user