128 lines
3.4 KiB
HTML
128 lines
3.4 KiB
HTML
<form
|
|
name="contact"
|
|
action=""
|
|
method="POST"
|
|
id="contact-form"
|
|
class=""
|
|
>
|
|
<div class="form-field form-group">
|
|
<div id="status-toast" class="toast hidden"></div>
|
|
</div>
|
|
<div class="form-field half left form-group">
|
|
<div class="form-label-wrapper">
|
|
<label class="form-label">Name <span class="required">*</span></label>
|
|
</div>
|
|
<div class="form-data">
|
|
<div class="form-input-wrapper">
|
|
<input
|
|
name="name"
|
|
value=""
|
|
type="text"
|
|
class="form-input"
|
|
placeholder="Name"
|
|
autocomplete="on"
|
|
required="required"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-field half right form-group">
|
|
<div class="form-label-wrapper">
|
|
<label class="form-label">Email <span class="required">*</span></label>
|
|
</div>
|
|
<div class="form-data">
|
|
<div class="form-input-wrapper">
|
|
<input
|
|
name="email"
|
|
value=""
|
|
type="email"
|
|
class="form-input"
|
|
placeholder="Email"
|
|
required="required"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-field form-group">
|
|
<div class="form-label-wrapper">
|
|
<label class="form-label">Message <span class="required">*</span></label>
|
|
</div>
|
|
<div class="form-data">
|
|
<div class="form-textarea-wrapper">
|
|
<textarea
|
|
name="message"
|
|
class="form-input"
|
|
placeholder="Message"
|
|
required="required"
|
|
spellcheck="false"
|
|
data-gramm="false"
|
|
style="line-height: 24px"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-wrapper">
|
|
<button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
|
|
<button type="reset" class="btn">Reset</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
var form = document.getElementById("contact-form");
|
|
var statusToast = document.getElementById("status-toast");
|
|
var submitButton = document.getElementById("submit-button")
|
|
|
|
submitButton.setLoading = function() {
|
|
this.classList = "btn disabled"
|
|
this.innerHTML = '<div class="loading loading-lg">'
|
|
}
|
|
|
|
submitButton.setNormal = function() {
|
|
this.classList = "btn btn-primary"
|
|
this.innerHTML = 'Submit'
|
|
}
|
|
|
|
statusToast.show = function(type, content) {
|
|
this.classList = "toast toast-" + type
|
|
this.innerHTML = content
|
|
}
|
|
|
|
statusToast.hide = function() {
|
|
this.classList = "hide"
|
|
this.innerHTML = ""
|
|
}
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault();
|
|
submitButton.setLoading()
|
|
statusToast.show("primary", "Please wait...")
|
|
var data = new FormData(form);
|
|
fetch("https://api.itsblue.de/f/eb839512-45e8-4c6e-84de-3c88092b1310", {
|
|
method: form.method,
|
|
body: data,
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if(response.ok) {
|
|
statusToast.show("success", "Thanks for your submission!");
|
|
form.reset();
|
|
submitButton.setNormal();
|
|
}
|
|
else {
|
|
statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
|
|
submitButton.setNormal()
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
|
|
submitButton.setNormal()
|
|
});
|
|
}
|
|
form.addEventListener("submit", handleSubmit);
|
|
</script>
|