From fe95482a0514bfb85c16cf5e1c61f470ccf1f42b Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <35454011+bvandevliet@users.noreply.github.com>
Date: Wed, 17 Dec 2025 20:20:39 +0100
Subject: [PATCH] Added form, yet needs submission handling.

---
 public/contact.html  | 65 ++++++++++++++++++++++++++++++++++++++++++--
 src/scss/styles.scss |  2 +-
 2 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/public/contact.html b/public/contact.html
index d9750d0..2cc35d7 100644
--- a/public/contact.html
+++ b/public/contact.html
@@ -21,12 +21,71 @@
   </header>
 
   <main>
-    <section class="container-xxl pb-0">
+    <section class="container-xxl">
       <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>
 
-    <!-- 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>
 
   <footer class="bg-secondary-subtle">
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 56b43c0..d4505fd 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -43,13 +43,13 @@ $accordion-icon-width: 1rem;
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/accordion";
+@import "bootstrap/scss/forms";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/badge";
 // @import "bootstrap/scss/breadcrumb";
 // @import "bootstrap/scss/button-group";
 // @import "bootstrap/scss/close";
 // @import "bootstrap/scss/dropdown";
-// @import "bootstrap/scss/forms";
 // @import "bootstrap/scss/modal"; // Requires transitions
 // @import "bootstrap/scss/offcanvas"; // Requires transitions
 // @import "bootstrap/scss/pagination";