itsblue-development
/
itsblue-website
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: change to turnstile and new formrecevr
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Dorian Zedler 2023-09-06 15:20:29 +02:00
parent fd5b899e5f
commit 415cfe6808
Signed by: dorian
GPG Key ID: 989DE36109AFA354
1 changed files with 50 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
themes/quark-hugo/layouts/partials/contactForm.html
View File

@ -1,10 +1,4 @@
<form
name="contact"
action=""
method="POST"
id="contact-form"
class=""
>
<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>
@ -14,15 +8,8 @@
</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"
/>
<input name="name" value="" type="text" class="form-input" placeholder="Name" autocomplete="on"
required="required" />
</div>
</div>
</div>
@ -33,14 +20,7 @@
</div>
<div class="form-data">
<div class="form-input-wrapper">
<input
name="email"
value=""
type="email"
class="form-input"
placeholder="Email"
required="required"
/>
<input name="email" value="" type="email" class="form-input" placeholder="Email" required="required" />
</div>
</div>
</div>
@ -51,20 +31,13 @@
</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>
<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="h-captcha" data-sitekey="b586c42e-b3cd-4432-aea8-17efea9ff29d" data-theme="light"></div>
<div class="cf-turnstile" data-sitekey="0x4AAAAAAAJyfs56vKSrFYy_" data-theme="light"></div>
<div class="button-wrapper">
<button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
@ -72,30 +45,41 @@
</div>
</form>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
var form = document.getElementById("contact-form");
var statusToast = document.getElementById("status-toast");
var submitButton = document.getElementById("submit-button")
var submitButton = document.getElementById("submit-button");
submitButton.setLoading = function() {
this.classList = "btn disabled"
this.innerHTML = '<div class="loading loading-lg">'
submitButton.setLoading = function () {
this.classList = "btn disabled"
this.innerHTML = '<div class="loading loading-lg">'
}
submitButton.setNormal = function() {
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.show = function (type, content) {
this.classList = "toast toast-" + type
this.innerHTML = content
}
statusToast.hide = function() {
this.classList = "hide"
this.innerHTML = ""
statusToast.hide = function () {
this.classList = "hide"
this.innerHTML = ""
}
function handleSubmitSuccess() {
statusToast.show("success", "Thanks for your submission!");
form.reset();
submitButton.setNormal();
}
function handleSubmitError() {
statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
submitButton.setNormal()
}
async function handleSubmit(event) {
@ -103,28 +87,26 @@
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()
}
try {
const response = await fetch("https://mail.itsblue.de/formrecevr/f/eb839512-45e8-4c6e-84de-3c88092b1310", {
method: form.method,
body: data,
headers: {
Accept: "application/json",
},
})
.catch((error) => {
statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
submitButton.setNormal()
});
if (response.ok) {
handleSubmitSuccess()
}
else {
handleSubmitError()
}
} catch (e) {
handleSubmitError()
} finally {
turnstile.reset();
}
}
form.addEventListener("submit", handleSubmit);
</script>
</script>