Netlify forms could not identify form in my JS file

41 Views Asked by At

I am unable to get the user response in my netlify server where i have enabled form detection and added data-netlify=true as mentioned in the docs in my form element.

I have tried to implement netlify forms in my project.I have followed the documentation and added data-netlify true in my form element.I have deployed the site on my custom domain https://mindokay.com/ and the form is hosted on this particular link https://mindokay.com/talkToUs .Here is my JS file of the form container, here is the js code

      <form
        name="form"
        onSubmit={handleSubmit}
        method="POST"
        action="/talkToUs"
        data-netlify="true"
      >
        
          Name:
          <input
            type="text"
            id="customerName"
            name="customerName"
            value={formData.customerName}
            onChange={handleInputChange}
            required
          />
        
        `your text`
          Phone Number:
          <input
            type="tel"
            id="phoneNumber"
            name="phoneNumber"
            value={formData.phoneNumber}
            onChange={handleInputChange}
            required
          />
        
        
          Company Name:
          <input
            type="text"
            id="companyName"
            name="companyName"
            value={formData.companyName}
            onChange={handleInputChange}
            required
          />
        
        
          Email:
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
          />
          
            Company Size:
            <select
              type="dropdown"
              id="companySize"
              value={companySize || ""}
              onChange={(e) => setCompanySize(e.target.value)}
              style={{ width: "105%" }}
            >
              
                Select a company size
              
              
                {" "}
                below 25{" "}
              
              
                25-100
              
              
                100-250
              
              
                250-1000
              
              1000" className="option">
                above 1000
              
            
          
          
            I already have a mental health plan of another company <br />
          
          
            
              <input
                type="checkbox"
                checked={showDate}
                onChange={handleToggle}
              />
              
            
            {showDate && (
              
                
                  Expires on :
                
                <input
                  type="date"
                  id="planEndDate"
                  name="planEndDate"
                  value={planExpiryDate ? formatDate(planExpiryDate) : ""}
                  onChange={(e) =>
                    setExpiryDate(
                      e.target.value ? new Date(e.target.value) : null
                    )
                  }
                  placeholder={showDate ? "Expires on" : ""}
                />
              `your text`
            )}
          
        
        
        

        <button type="submit">Submit</button>
      </form>

and the handleSubmit funtion as well.

const handleSubmit = (event) =\> {
event.preventDefault();
setShowBanner(true);
const myForm = event.target;
const formData = new FormData(myForm);

   fetch("/talkToUs", {
  method: "POST",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: new URLSearchParams(formData).toString(),
   `your text`})
  .then((response) => {
    if (response.ok) {
      // Handle successful form submission
      alert("Thank you for your submission");
      // Reset form data and state
      setFormData({
        name: "",
        phoneNumber: "",
        companyName: "",
        email: "",
      });
    } else {
      // Handle form submission error
      throw new Error("Form submission failed.");
    }
  })
  .catch((error) => alert(error));

};

i have attached the screenshot of the response.Basically i am looking to get the response of my form in netlify server where i have deployed the site.

0

There are 0 best solutions below