Formsubmit.co form not working in reactapp - reactjs

Question

I added formsubmit service to my email form on my react application simple personal website. but it does not seem to be working. It does nothing. Does the extra javascript in there mess with the formsubmit service? I actually put my real email in just changed it for this post.
import React, { useState } from 'react';
import './styles.contactform.css';
function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log(name, email, message)
setName('')
setEmail('')
setMessage('')
}
return (
<div className="contact-container">
<form className="contact-form" action="https://formsubmit.co/myemail#email.com" method="POST" onSubmit={handleSubmit}>
<input type="hidden" name="_next" value="https://notmicahclark.herokuapp.com/"/>
<input type="text" value={name} id="name" name="name" placeholder="Name..." onChange={(e) => setName(e.target.value)} required/>
<input type="email" value={email} id="email" name="email" placeholder="Email..." onChange={(e) => setEmail(e.target.value)} required/>
<img className="letter-img" src="contact_form_imagepng.png" alt="Mail Letter"/>
<input id="message" value={message} name="message" placeholder="Your message..." onChange={(e) => setMessage(e.target.value)}/>
<button type="submit" value="Submit">Submit</button>
</form>
</div>
);
}
export default ContactForm;

Answer 1

To overcome this issue, you can use the AJAX form feature provided by FormSubmit.
According to their documentation:
You can easily submit the form using AJAX without ever having your
users leave the page. — this even works cross-origin.
Please refer to their documentation about AJAX forms (sample code snippets are available): https://formsubmit.co/ajax-documentation

Answer 2

I've tested your code. The problem is that you are both using the form's HTML action field, and at the same time using your own method for form submission. Remove the action=... call and instead write this in your handleSubmit method.
fetch('https://formsubmit.co/ajax/myemail#email.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(Object.fromEntries(new FormData(event.target))),
})
Should work like a charm. Add then and catch statements to your liking.