我尝试在我的 Next.js 网站上使用 netlify 表单，但它不起作用，我不知道该怎么做。 请帮忙！
这是我的代码。
<form className='contacts-form' onSubmit={handleSubmit} method='post' name="contact" data-netlify="true">
<input type="hidden" name="form-name" value="contact" />
{/* other inputs... */}
<button type="submit" name="submit">Submit</button>
</form>
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(() => router.push("/thank-you"))
.catch((error) => alert(error));
};
我解决了我的问题。
由于我的应用程序重定向，我遇到了错误 303。我通过编辑我的handleSubmit函数解决了这个问题： 而不是
fetch("/", {...
我把它改为：
fetch(`/${locale}`, {...
因为之前我有
import { useRouter } from 'next/router';
// other code...
const router = useRouter();
const { locale } = router;
！！！您需要一个form.html来帮助netlify检测您的表单！！！ 你必须把它放在公共文件夹中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Netlify form</title>
</head>
<body>
<!-- A little help for the Netlify post-processing bots -->
<form name="contactform" data-netlify="true" hidden>
<label for="nome">Nome:</label>
<input id="nome" type="text" name="nome" />
<label for="cognome">Cognome:</label>
<input id="cognome" type="text" name="cognome" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" />
<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio"></textarea>
<button type="submit" name='submit'></button>
</form>
</body>
</html>
请注意，如果标签为空，Netlify 不会将输入的内容发送到电子邮件通知。它只会显示在 Netlify UI 中。