Будем использовать сервис FormSpree. Зарегистрируйтесь на нём, потом создайте проект и в нём форму. Далее используйте предоставленный код.
https://formspree.io/
Код для вставки формы для сбора почт
<!-- modify this form HTML and place wherever you want your form -->
<form
action="https://formspree.io/f/mdojzwyp"
method="POST"
>
<label>
Your email:
<input type="email" name="email">
</label>
<label>
Your message:
<textarea name="message"></textarea>
</label>
<!-- your other form fields go here -->
<button type="submit">Send</button>
</form>Финальная версия формы с AJAX
<!-- modify this form HTML and place wherever you want your form -->
<form id="my-form" action="https://formspree.io/f/mdojzwyp" method="POST">
<label>Email:</label>
<input type="email" name="email" />
<label>Message:</label>
<input type="text" name="message" />
<button id="my-form-button">Submit</button>
<p id="my-form-status"></p>
</form>
<!-- Place this script at the end of the body tag -->
<script>
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
if (response.ok) {
status.innerHTML = "Thanks for your submission!";
form.reset()
} else {
response.json().then(data => {
if (Object.hasOwn(data, 'errors')) {
status.innerHTML = data["errors"].map(error => error["message"]).join(", ")
} else {
status.innerHTML = "Oops! There was a problem submitting your form"
}
})
}
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
</script>