cptluke76/Simple_Portfolio
1
0
Fork 0
mirror of https://github.com/its-michaelroy/Simple_Portfolio.git synced 2026-06-03 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Resolved issue with clearing the form, forcing use of hcaptcha, and avigating to success screen after successful submission of email

Browse Source
This commit is contained in:
its-michaelroy
2024-07-26 15:00:17 -03:00
parent 3bbcf71c95
commit 7fee0c8fc0
2 changed files with 21 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
assets/js/formHandler.js
View File

@@ -5,38 +5,22 @@ function onVerify() {
hcaptchaVerified = true; hcaptchaVerified = true;
} }
// Prevent form submission if hCaptcha is not verified // Handle form submission
document.getElementById("contactForm").addEventListener("submit", function (e) { document.getElementById("contactForm").addEventListener("submit", function (e) {
e.preventDefault(); // Prevent the default form submission if (!hcaptchaVerified) {
if (hcaptchaVerified) { e.preventDefault(); // Prevent the default form submission if hCaptcha is not verified
const email = document.getElementById("email").value; const errorMessage = document.createElement("div");
document.getElementById("subject").value = `New submission from ${email}`; errorMessage.textContent =
"hCaptcha not verified. Please complete the captcha.";
// Use fetch to submit the form data errorMessage.style.color = "red";
fetch(this.action, { document.body.appendChild(errorMessage);
method: "POST",
body: new FormData(this),
})
.then((response) => {
if (response.ok) {
clearFormFields(); // Clear fields on successful submission
alert("Your message has been sent!");
} else {
alert("There was a problem with your submission.");
}
})
.catch((error) => {
console.error("Error:", error);
alert("There was a problem with your submission.");
});
} else { } else {
alert("Please complete the hCaptcha challenge."); // Alert if hCaptcha is not verified // Allow the form to be submitted
// Use a timeout to clear the form fields after submission
setTimeout(() => {
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("message").value = "";
}, 1000); // Adjust the timeout as needed
} }
}); });
// Function to clear form fields
function clearFormFields() {
document.getElementById("name").value = "Name";
document.getElementById("email").value = "Email";
document.getElementById("message").value = "Message";
}

7
index.html
View File

@@ -224,6 +224,7 @@
method="POST" method="POST"
action="https://api.web3forms.com/submit" action="https://api.web3forms.com/submit"
class="row gtr-uniform gtr-50" class="row gtr-uniform gtr-50"
id="contactForm"
> >
<input <input
type="hidden" type="hidden"
@@ -258,7 +259,11 @@
></textarea> ></textarea>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="h-captcha" data-captcha="true"></div> <div
class="h-captcha"
data-captcha="true"
data-callback="onVerify"
></div>
</div> </div>
<!-- Honeypot Spam Protection --> <!-- Honeypot Spam Protection -->
<input <input