I'm submitting this form using smtp js. The form submission and validation is working properly, but after passing the data successfully to the mail it doesn't reload the page. It's showing HTTP ERROR 405. Can anyone please help me to solve this issue?
This is the Html part. The last div is hidden, as I want to use this as a pop-up which will be apperaed when the mail is sent successfully.
HTML
<form class="send-message row-start-1 col-start-1 col-end-4 w-[100%] md:w-[75%]" action="" id="" method="POST"" >
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="name"
placeholder="Name"
id="name"
/>
<span id="nameError" class="text-red-400 text-xs md:text-sm"></span>
</div>
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="email"
id="email"
placeholder="Email"
/>
<span
id="emailError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="subject"
id="subject"
placeholder="Subject"
/>
<span
id="subjectError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<div class="mb-4">
<textarea
class="dark:bg-black bg-transparent border border-white w-full h-28 px-2 py-2 rounded text-sm text-white md:text-base"
name="message"
id="message"
cols="30"
rows="10"
placeholder="Message"
></textarea>
<span
id="messageError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<!-- send button starts here -->
<div class="relative">
<button onclick="return sendMail()"
class="flex flex-row items-center justify-center gap-2 bg-[#f7f7f7] transition-all duration-300 ease-in-out drop-shadow-xl hover:bg-white hover:drop-shadow-2xl text-nav-color font-bold py-2 px-8 md:px-10 md:py-2 rounded"
>
<svg
class="w-6 h-8"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-send"
viewBox="0 0 16 16"
>
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"
/>
</svg>
Send
</button>
<!-- success message -->
<div class="absolute top-0 left-0 hidden bg-green-100 rounded-md p-3 md:w-[50%]" id="success">
<svg
class="stroke-2 stroke-current text-green-600 h-8 w-8 mr-2 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M0 0h24v24H0z" stroke="none" />
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2 4-4" />
</svg>
<div class="text-green-700">
<div class="font-bold text-xl">Message sent successfully.</div>
</div>
</div>
</div>
</form>
Js
function sendMail() {
let inputName = document.getElementById("name").value;
let inputEmail = document.getElementById("email").value;
let inputSubject = document.getElementById("subject").value;
let inputMessage = document.getElementById("message").value;
let validName = validateName(inputName);
let validEmail = validateEmail(inputEmail);
let validSubject = validateSubject(inputSubject);
let validMessage = validateMessage(inputMessage);
if (validName != false && validEmail != false && validSubject != false && validMessage != false) {
let messageBody = 'Name: ' + inputName + '<br>Email: ' + inputEmail + '<br>Subject: ' + inputSubject + '<br>Message: ' + inputMessage;
Email.send({
SecureToken:"XXXXXXXXXXXX",
To : 'XXXXXXXXX@gmail.com',
From : "XXXXXXXXXXX@gmail.com",
Subject : "New message on contact from " + inputName,
Body : messageBody,
}).then(
showSuccess()
)
return true;
}
else{
return false;
}
}
// showing success message
function showSuccess() {
let successMessage = document.getElementById("success");
successMessage.classList.remove("hidden");
successMessage.classList.add("flex");
}
