bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added form, yet needs submission handling.

Browse source
This commit is contained in:
Bob Vandevliet 2025-12-17 20:20:39 +01:00
parent 84e534ce4e
commit fe95482a05
2 changed files with 63 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

65
public/contact.html
View file

@ -21,12 +21,71 @@
</header> </header>
<main> <main>
<section class="container-xxl pb-0"> <section class="container-xxl">
<h1 id="contact" class="text-center">Contact</h1> <h1 id="contact" class="text-center">Contact</h1>
<!--# include file='/includes/components/contact-row.html' --> <div class="row justify-content-center">
<div class="col-lg-8 mt-0">
<form id="quote-form">
<div class="row mb-3">
<div class="col">
<label for="nameInput" class="form-label">Voornaam *</label>
<input type="text" class="form-control" id="nameInput" required>
</div>
<div class="col">
<label for="surnameInput" class="form-label">Achternaam *</label>
<input type="text" class="form-control" id="surnameInput" required>
</div>
</div>
<div class="mb-3">
<label for="companyInput" class="form-label">Bedrijfsnaam</label>
<input type="text" class="form-control" id="companyInput">
</div>
<div class="mb-3">
<label for="messageInput" class="form-label">Korte toelichting *</label>
<!-- <label for="messageInput" class="form-label">Licht kort jouw aanvraag toe *</label> -->
<!-- <label for="messageInput" class="form-label">Vertel iets meer over jouw aanvraag *</label> -->
<!-- <label for="messageInput" class="form-label">Beschrijf kort jouw project *</label> -->
<textarea class="form-control" id="messageInput" rows="4" required></textarea>
</div>
<div class="mb-3">
<label for="emailInput" class="form-label">Email *</label>
<input type="email" class="form-control" id="emailInput" required>
</div>
<div class="mb-3">
<label for="phoneInput" class="form-label">Telefoon</label>
<input type="tel" class="form-control" id="phoneInput">
</div>
<div class="mt-2 text-center">
<button type="submit" class="btn btn-primary mt-2">Verstuur</button>
<p><small>Ik ontvang een email met de gegevens van jouw aanvraag. Ook gebruik ik deze gegevens ter aanvulling van mijn self-hosted CRM.</small></p>
</div>
</form>
</div>
</div>
</section> </section>
<!-- Nothing more here yet, contact form will be added later.. --> <section id="prijzen" class="container-xxl">
<h2 class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Wat kost een dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">
<div class="col-sm-6 col-lg-4">
<!--# include file="/includes/pricing/cat-open.html" -->
</div>
<div class="col-sm-6 col-lg-4">
<!--# include file="/includes/pricing/cat-specific.html" -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<!--# include file="/includes/pricing/post-edit.html" -->
</div>
</div>
</section>
<section class="container-xxl pb-0">
<!--# include file='/includes/components/contact-row.html' -->
</section>
</main> </main>
<footer class="bg-secondary-subtle"> <footer class="bg-secondary-subtle">

2
src/scss/styles.scss
View file

@ -43,13 +43,13 @@ $accordion-icon-width: 1rem;
@import "bootstrap/scss/list-group"; @import "bootstrap/scss/list-group";
@import "bootstrap/scss/transitions"; @import "bootstrap/scss/transitions";
@import "bootstrap/scss/accordion"; @import "bootstrap/scss/accordion";
@import "bootstrap/scss/forms";
// @import "bootstrap/scss/alert"; // @import "bootstrap/scss/alert";
// @import "bootstrap/scss/badge"; // @import "bootstrap/scss/badge";
// @import "bootstrap/scss/breadcrumb"; // @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/button-group"; // @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/close"; // @import "bootstrap/scss/close";
// @import "bootstrap/scss/dropdown"; // @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/forms";
// @import "bootstrap/scss/modal"; // Requires transitions // @import "bootstrap/scss/modal"; // Requires transitions
// @import "bootstrap/scss/offcanvas"; // Requires transitions // @import "bootstrap/scss/offcanvas"; // Requires transitions
// @import "bootstrap/scss/pagination"; // @import "bootstrap/scss/pagination";