Form is not detected

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.

Hi, @wpacademy. Just confirming you have enabled form detection on your site in the Netlify UI?

There doesn’t seem to be anything wrong with your code since even a cURL POST request to https://magicwptools.netlify.app returns a 404

Thanks,

Hi,
sorry for the confusion, I have mapped my domain to the site https://magicwptools.com/ and Yes, I have enabled form detection

Bizarre. Can you redeploy without a cache and see if that works. I’m unsure if you enabled the forms after (or before) deploying and thus if it was after, the form detection has not processed a deploy yet.

I have enabled form detection before the deployment. It is linked with Github repository for continues deployment, I have tried clearing Cloudflare cache and redeploy, still nothing in the forms detection

@wpacademy Your form is JavaScript rendered and I cannot see a hidden one in the HTML of your page.

Netlify doesn’t detect runtime generated forms, only forms that are in the HTML after the build completes.

See this section of the documentation:

To fix, ensure you have a version of the Form that Netlify can detect.

Thank you. Followed the implementation and it’s working now.

Ah thank you @nathanmartin I missed that.