Made super simple.
If you are reading this. I’m guessing you want to learn how to send the contact form directly to your email. Fear not, it is easier than you think.
To get the contact information from the frontend webpage, it needs to be sent to the backend server first. Then the server decides what to do with that request.
To make things easier, we are NOT going to set up a backend server. Rather we will use a free host to supply our backend.
Step 1.
Sign up for a free account using the email address that you want the information to be sent to. A free account is limited to 50 requests per month.
Step 2.
Create your basic or similar contact form.
Step 3.
After creating a formspree account, create a New Form.
Step 4.
Copy the formspree endpoint.
Step 5.
This is an important step to connect the request to the host’s backend. Inside the form tag add the following two attributes. The action attribute is the endpoint that we copied in step 4. The method attribute is a POST request. One of the RESTful API methods.
Step 6.
When you now click on submit. It will redirect to the formspree success page.
Step 7. Optional
To prevent the redirect page from happening. Add the following script into your script.js file.
<html>
......<form id="my-form" action="https://formspree.io/yourEndPoint" method="POST"> </form><p id="my-form-status"></p>
.......</html><script>
var form = document.getElementById("my-form");
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 => {
status.innerHTML = "Thanks for your submission!";
form.reset()
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
</script>
By adding this script, it will prevent the default action of submit. Then it will pass the body’s data to the form’s endpoint. On success it will display “Thanks for your submission!” and then reset the form. On failure is will display “Oops! There was a problem submitting your form.”
Back on formspree submission tab you will see the history of submission requests.
Congratulations!! You now have a working contact form sent directly to your email.
