PLEASE help us help you by writing a good post!
Site name: magical-travesseiro-abe821.netlify.app
My website domain is through namecheap, hosted on Netlify.
I am having an issue with netlify UI recognising form submissions.
So i have used netlify forms before but never ran into this issue. I have followed the opennetlify form prompt to be sure, but the netlify UI does not seem to recognize the form submission from my site.
I have the next.js file here, with the following form code.
{/* <!--Form--> */}
{!isSubmitted && (
<form
onSubmit={handleSubmit}
className="cs-form"
id="cs-form-1105"
name="contact"
method="POST"
data-netlify="true"
>
<label className="cs-label">
Name
<input
className="cs-input"
required
type="text"
id="name-1105"
name="name"
placeholder="Name"
onChange={handleChange}
value={formValues.name}
/>
</label>
<label className="cs-label cs-email">
Email
<input
className="cs-input"
required
type="email"
id="email-1105"
name="email"
placeholder="Email"
onChange={handleChange}
value={formValues.email}
/>
</label>
<label className="cs-label cs-phone">
Phone
<input
className="cs-input"
required
type="phone"
id="phone-1105"
name="phone"
placeholder="Phone"
onChange={handleChange}
value={formValues.phone}
/>
</label>
<label className="cs-label">
Message
<textarea
className="cs-input cs-textarea"
required
name="message"
id="message-1105"
placeholder="Please state the desired treatments and the best number to contact you on!"
onChange={handleChange}
value={formValues.message}
></textarea>
</label>
<button className="cs-button-solid cs-submit" type="submit">
Make an Appointment
</button>
</form>
)}
This is handled by the following functions.
const [isSubmitted, setIsSubmitted] = useState(false);
const [formValues, setFormValues] = useState({
email: "",
phone: "",
name: "",
message: "",
});
const [errors, setErrors] = useState({});
const handleChange = (event) => {
event.preventDefault();
const { name, value } = event.target;
setFormValues({
...formValues,
[name]: value,
});
};
const handleSubmit = async (event) => {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
const email = formData.get("email");
const phone = formData.get("phone");
const name = formData.get("name");
const message = formData.get("message");
const validationErrors = {};
console.log(email, phone, name, message);
if (!email.includes("@")) {
validationErrors.email = "Please enter a valid email address.";
return;
}
if (name.length < 1) {
validationErrors.name = "Name must be at least 3 characters long.";
if (message.length < 1) {
validationErrors.message =
"Message must be at least 3 characters long.";
}
}
if (phone.length > 11) {
validationErrors.phone = "Phone number cannot exceed 11 characters.";
return;
}
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
console.log(errors);
setErrors({});
console.log(formData.toString());
await fetch("/hiddenform.html", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => setIsSubmitted(true))
.catch((error) => alert(error));
};
With a form called hiddenforms.html, here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hidden form</title>
</head>
<body>
<!-- A little help for the Netlify post-processing bots -->
<form name="contact" hidden data-netlify="true">
<input type="text" name="name" />
<input type="email" name="email" />
<input type="phone" name="phone" />
<textarea name="message" id="message"></textarea>
</form>
</body>
</html>
However, nothing i have tried is getting netlify to recognize the form submission, I have console.log’d the form contents and the state handling is all working as intended, I have double checked the names, of both forms and tried with either the netlify or data-netlify=true.
I have the exact same form set-up on a different website and it works fine. I am unsure of any other potential bug-fixes that I could attempt.
