Hello all, I have a Gatsby project hosted on https://auto-search-testing.netlify.app/
I have activated Netlify form and the form is working on the frontend, but when I log in to my dashboard, it is not showing any active form. I have used most resources on the net to debug this, including this: How to Integrate Netlify’s Form Handling in a React App but nothing works pls I need help. Thanks in advance
This is my full code:
import React, { useState } from ‘react’;
import { Link } from ‘gatsby’;
import Layout from ‘…/components/Layout’;
import PageTitle from ‘…/components/PageTitle’;
const ContactPage = () => {
const [name, setName] = useState(“”)
const [email, setEmail] = useState(“”)
const [phone, setPhone] = useState(“”)
const [message, setMessage] = useState(“”)
const handleSubmit = e => {
e.preventDefault()
const myForm = e.target;
const formData = new FormData(myForm);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
// Clear form fields
setName('');
setEmail('');
setPhone('');
setMessage('');
})
.catch((error) => document.querySelector('.error').innerText = 'Something went wrong, pls try again.');
};
return (
<Layout>
<PageTitle heading={'Contact Us'} />
<div className="contact-section">
<div className="auto-container">
<div className="row clearfix">
{/* Form Column */}
<div className="form-column column col-lg-7 col-md-7 col-sm-12 col-xs-12">
{/* Contact Form */}
<div className="contact-form">
<div className="group-title">
<h3>DROP US A MESSAGE</h3>
<div className="text">
We'd love to hear from you! If you have any questions, feedback, or inquiries, please don't hesitate to get in touch with us. Fill out the form below or use the provided contact information to reach out to our team. We'll do our best to respond to you promptly.
</div>
</div>
{/* Contact Form */}
<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
onSubmit={handleSubmit} id="contact-form">
<input type="hidden" name="form-name" value="contact" />
<input type="hidden" name="bot-field" />
<div className="row clearfix">
<div className="col-md-6 col-sm-6 col-xs-12 form-group">
<input onChange={({ target }) => setName(target.value)}
type="text"
required
name="name"
value={name}
minLength="3" placeholder="Your Name *" />
</div>
<div className="col-md-6 col-sm-6 col-xs-12 form-group">
<input type="email"
name="email"
value={email}
required
onChange={({ target }) => setEmail(target.value)} placeholder="Your Email *" />
</div>
<div className="col-md-12 col-sm-12 col-xs-12 form-group">
<input type="tel" name="phone" placeholder="Your Phone Number" onChange={({ target }) => setPhone(target.value)}
value={phone} />
</div>
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<textarea name="message" placeholder="Message *" required onChange={({ target }) => setMessage(target.value)}
value={message}></textarea>
</div>
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<button className="theme-btn btn-style-one" type="submit">
SUBMIT
</button>
</div>
</div>
</form>
<div className="success"></div>
<div className="error"></div>
</div>
{/* End Contact Form */}
</div>
</div>
</div>
</div>
</Layout>
)
}
export default ContactPage;
