Hi,
my netlify site is https://magicwptools.com/ and I have a contact form on the contact page
I have tried everything from the form setup example and here the code for the page
import React, { useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
const Contact = () => {
const navigate = useNavigate();
const handleSubmit = event => {
event.preventDefault();
const myForm = event.target;
const formData = new FormData(myForm);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString()
})
.then(() => navigate("/thank-you/"))
.catch(error => alert(error));
};
return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md mx-auto">
{/* Form Header */}
<div className="text-center mb-8">
<h2 className="text-3xl font-extrabold text-gray-900">Contact Us</h2>
<p className="mt-2 text-sm text-gray-600">
We'd love to hear from you. Send us a message and we'll respond as soon as possible.
</p>
</div>
{/* Contact Form */}
<form
data-netlify="true"
name="contact"
method="post"
action="/thank-you/"
onSubmit={handleSubmit}
className="bg-white py-8 px-6 shadow rounded-lg sm:px-10"
>
<input type="hidden" name="form-name" value="contact" />
{/* Name Field */}
<div className="mb-6">
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700 mb-2"
>
Your Name
</label>
<input
type="text"
name="name"
id="name"
required
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Your name"
/>
</div>
{/* Email Field */}
<div className="mb-6">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700 mb-2"
>
Email
</label>
<input
type="email"
name="email"
id="email"
required
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="you@example.com"
/>
</div>
{/* Message Field */}
<div className="mb-6">
<label
htmlFor="message"
className="block text-sm font-medium text-gray-700 mb-2"
>
Message
</label>
<textarea
name="message"
id="message"
required
rows={4}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Your message here..."
/>
</div>
{/* Submit Button */}
<div>
<button
type="submit"
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium
text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
transition-colors duration-200"
>
Send Message
</button>
</div>
</form>
{/* Optional: Contact Information */}
<div className="mt-8 text-center text-sm text-gray-600">
<p>Or reach us at:</p>
<p className="mt-2">
<span className="font-medium">Email: </span>
contact@magicwptools.com
</p>
</div>
</div>
</div>
);
};
export default Contact;
Please help me troubleshoot the code. The form is not detected in the netlify dashboard.