I can’t get Netlify Forms to work on my website. I can’t even get the Netlify UI to find any form when deploying.
I have a client component with the form in it:
"use client";
import styles from "./page.module.css";
const Contact = ({ params: { locale } }) => {
const handleSubmit = (e) => {
e.preventDefault();
const encode = (data) => {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
};
const data = {
name: e.target.name.value,
email: e.target.email.value,
phone: e.target.phone.value,
message: e.target.message.value,
};
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact-form", ...data }),
})
.then(() => alert("Success!"))
.catch((error) => alert(error));
};
return (
<form className={styles.form} name="contact" data-netlify="true" onSubmit={handleSubmit}>
<input type="hidden" name="form-name" value="contact" />
<input type="text" name="name" required placeholder={localizedContent.name} />
<input type="email" name="email" required placeholder={localizedContent.email} />
<input type="number" name="phone" required placeholder={localizedContent.phone} />
<textarea name="message" required placeholder={localizedContent.message} />
<input type="submit" value={localizedContent.send} />
</form>
);
};
export default Contact;
But this doesn’t seem to do the job.
I’ve tried to add a form.html in the public folder, although I’m not sure this can solve it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
{/* A little help for the Netlify post-processing bots */}
<form name="contact" netlify hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<input type="number" name="phone" />
<textarea name="message"></textarea>
</form>
</body>
</html>
And I’ve also tried to add the same hidden form in the main Layout.js of the app.
Could someone point me in the right direction? Thanks!