Send Contact Form Directly to Email. No Backend Needed.

Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Step 6.

Step 7. Optional

<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>

--

--

--

Copy and Paste what’s on my mind. Perfect.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Basics of Styling and Writing CSS in React

Develop an Online Shop with Angular 11 and .Net Core 5

React Hook Form, an easy way to build forms

Hey, ever struggled with Javascript Promises?

React Redux Tutorial: A Beginner’s Guide to Redux

Complete guide to using country code picker in your React Native projects

unload And beforeunload Events And How To Easily Debug Them Both!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dong Xia

Dong Xia

Copy and Paste what’s on my mind. Perfect.

More from Medium

Configure Tailwind CSS for Vanilla JS with JIT in 10 Easy Steps

.JS dys-function-ality

My Grocery List and Meal Idea App: LISTLESS

My homepage!

3 things new web developers should know they can do in their browser