Edit: Launch

themes/godocs-1/layouts/_default/contact.html

@@ -6,7 +6,7 @@
       <div class="col-lg-8">
         <div class="p-4 p-sm-5 shadow rounded content">
           <h2 class="section-title">{{ .Title }}</h2>
-          <form method="POST" action="{{ site.Params.contact_form_action }}">
+          <form id="contact-form">
             <div class="row gy-4">
               <div class="form-group col-md-6">
                 <label for="fname">{{ i18n "first_name" }}</label>
@@ -14,19 +14,23 @@
               </div>
               <div class="form-group col-md-6">
                 <label for="lname">{{ i18n "last_name" }}</label>
-                <input type="text" class="form-control text-dark" id="lname" name="lname" placeholder="{{ i18n "ph_last_name" }}">
+                <input type="text" class="form-control text-dark" id="lname" name="lname">
               </div>
-              <div class="form-group col-md-12">
+              <div class="form-group col-md-6">
                 <label for="email">{{ i18n "email" }}</label>
                 <input type="email" class="form-control text-dark" id="email" name="email" placeholder="{{ i18n "ph_email" }}" required>
               </div>
+              <div class="form-group col-md-6">
+                <label for="phone">Telefoonnummer</label>
+                <input type="tel" class="form-control text-dark" id="phone" name="phone" placeholder="Bijv. 0612345678">
+              </div>
               <div class="form-group col-md-12">
-                <label for="reason">{{ i18n "contact_reason" }}</label>
-                <select class="form-select rounded-0 px-0" id="reason" name="reason">
-                  <option selected disabled>{{ i18n "option_choose_reason" }}</option>
-                  <option value="zakelijk">{{ i18n "option_business" }}</option>
-                  <option value="ticket">{{ i18n "option_ticket" }}</option>
-                  <option value="project">{{ i18n "option_project" }}</option>
+                <label for="reason">Reden van contact</label>
+                <select class="form-control text-dark" id="reason" name="reason" required>
+                  <option value="" disabled selected>Maak een keuze...</option>
+                  <option value="Kavel laten toetsen">Kavel laten toetsen</option>
+                  <option value="Aanmelden nieuwsbrief">Aanmelden nieuwsbrief</option>
+                  <option value="Zakelijk">Zakelijk</option>
                 </select>
               </div>
               <div class="form-group col-md-12">
@@ -34,9 +38,10 @@
                 <textarea name="message" id="message" class="form-control text-dark" placeholder="{{ i18n "ph_message" }}"></textarea>
               </div>
               <div class="col-md-12">
-                <button type="submit" class="btn btn-primary">{{ i18n "send" }}</button>
+                <button type="submit" id="submit-btn" class="btn btn-primary">{{ i18n "send" }}</button>
               </div>
             </div>
+            <div id="form-response" class="mt-3" style="display:none;"></div>
           </form>
         </div>
       </div>
@@ -44,4 +49,60 @@
   </div>
 </section>
 
+<script>
+document.getElementById('contact-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const btn = document.getElementById('submit-btn');
+    const responseDiv = document.getElementById('form-response');
+    btn.disabled = true;
+    const originalBtnText = btn.innerText;
+    btn.innerText = 'Verzenden...';
+
+    const reason = document.getElementById('reason').value;
+    const message = document.getElementById('message').value;
+
+    // We combineren de reden en het bericht voor het 'description' veld in EspoCRM
+    const fullDescription = "Reden van contact: " + reason + "\n\nBericht:\n" + message;
+
+    const payload = {
+        "firstName": document.getElementById('fname').value,
+        "lastName": document.getElementById('lname').value,
+        "emailAddress": document.getElementById('email').value,
+        "phoneNumber": document.getElementById('phone').value,
+        "description": fullDescription,
+        "salutationName": "" // Je kunt dit leeg laten als je het hebt opgelost
+    };
+
+    fetch('https://crm.start-it.nl/api/v1/LeadCapture/1eeab8e3c9f41fd45419a012fb8696ac', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    })
+    .then(response => {
+        if (response.ok) {
+            responseDiv.style.display = 'block';
+            responseDiv.className = 'alert alert-success mt-3';
+            responseDiv.innerText = 'Bedankt! Uw bericht is succesvol verzonden.';
+            document.getElementById('contact-form').reset();
+        } else {
+            throw new Error('Server respons was niet ok');
+        }
+    })
+    .catch(error => {
+        responseDiv.style.display = 'block';
+        responseDiv.className = 'alert alert-danger mt-3';
+        responseDiv.innerText = 'Er is een fout opgetreden bij het verzenden. Controleer uw verbinding.';
+        console.error('Error:', error);
+    })
+    .finally(() => {
+        btn.disabled = false;
+        btn.innerText = originalBtnText;
+    });
+});
+</script>
+
 {{ end }}