Replace contact form POST with async JS API endpoint
Deploy Staging / deploy (push) Successful in 1m10s
Deploy Staging / deploy (push) Successful in 1m10s
Add a POST /api/contact minimal API that returns JSON instead of relying on the Razor Page's OnPostAsync full-page reload. The contact form now submits via fetch(), showing an inline success or error message without reloading the page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SLdp8vEGVX6EKSDQPAx36a
This commit is contained in:
@@ -939,10 +939,7 @@
|
||||
|
||||
<div class="contact-form-box style-two">
|
||||
|
||||
@if (Model.ContactFormSubmitted)
|
||||
{
|
||||
<div class="alert alert-success">Danke für deine Nachricht! Ich melde mich so schnell wie möglich.</div>
|
||||
}
|
||||
<div id="contact-form-message" class="alert" role="alert" style="display:none;"></div>
|
||||
|
||||
<form method="post" id="dreamit-form">
|
||||
|
||||
@@ -1073,5 +1070,51 @@
|
||||
if (event.key === "Escape") closeModal();
|
||||
});
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var form = document.getElementById("dreamit-form");
|
||||
var messageBox = document.getElementById("contact-form-message");
|
||||
var submitButton = form.querySelector("button[type=submit]");
|
||||
|
||||
function showMessage(text, isSuccess) {
|
||||
messageBox.textContent = text;
|
||||
messageBox.className = "alert " + (isSuccess ? "alert-success" : "alert-danger");
|
||||
messageBox.style.display = "block";
|
||||
}
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
submitButton.disabled = true;
|
||||
|
||||
var payload = {
|
||||
name: form.querySelector("[name=name]").value,
|
||||
email: form.querySelector("[name=email]").value,
|
||||
phone: form.querySelector("[name=phone]").value,
|
||||
subject: form.querySelector("[name=subject]").value,
|
||||
message: form.querySelector("[name=message]").value
|
||||
};
|
||||
|
||||
fetch("/api/contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
showMessage("Danke für deine Nachricht! Ich melde mich so schnell wie möglich.", true);
|
||||
form.reset();
|
||||
} else {
|
||||
showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
|
||||
})
|
||||
.finally(function () {
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user