114 lines
4.9 KiB
HTML
114 lines
4.9 KiB
HTML
{{ 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="contact-form">
|
|
<div class="row gy-4">
|
|
<div class="form-group col-md-6">
|
|
<label for="fname">{{ i18n "first_name" }}</label>
|
|
<input type="text" class="form-control text-dark" id="fname" name="fname" placeholder="{{ i18n "ph_first_name" }}" required>
|
|
</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">
|
|
</div>
|
|
<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">{{ i18n "phone" }}</label>
|
|
<input type="tel" class="form-control text-dark" id="phone" name="phone" placeholder="{{ i18n "ph_phone" }}">
|
|
</div>
|
|
|
|
<div class="form-group col-md-12">
|
|
<label for="reason">{{ i18n "contact_reason" }}</label>
|
|
<select class="form-control text-dark" id="reason" name="reason" required>
|
|
<option value="" disabled selected>{{ i18n "option_choose_reason" }}</option>
|
|
<option value="Kavel laten toetsen">{{ i18n "option_plot_check" }}</option>
|
|
<option value="Adviesgesprek aanvragen">{{ i18n "option_advice" }}</option>
|
|
<option value="Aanmelden nieuwsbrief">{{ i18n "option_newsletter" }}</option>
|
|
<option value="Zakelijk">{{ i18n "option_business" }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-md-12">
|
|
<label for="message">{{ i18n "write_message" }}</label>
|
|
<textarea name="message" id="message" class="form-control text-dark" placeholder="{{ i18n "ph_message" }}"></textarea>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<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>
|
|
</div>
|
|
</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 de 'description'
|
|
const fullDescription = "Reden van contact: " + reason + "\n\nBericht:\n" + message;
|
|
|
|
// De payload met de nieuwe website parameter
|
|
const payload = {
|
|
"firstName": document.getElementById('fname').value,
|
|
"lastName": document.getElementById('lname').value,
|
|
"emailAddress": document.getElementById('email').value,
|
|
"phoneNumber": document.getElementById('phone').value,
|
|
"description": fullDescription,
|
|
"website": window.location.href // Hiermee wordt de volledige URL van de huidige pagina verstuurd
|
|
};
|
|
|
|
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 = '{{ i18n "send" }}';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{{ end }} |