利用Next.js和Netlify构建高效的联系表单，并集成强大的垃圾邮件检测功能！本文将指导您创建一个包含确认页面的联系表单，并利用Netlify的内置功能提升反垃圾邮件能力。
Next.js是一个强大的React框架，能够构建高性能、可扩展的React应用。结合Netlify，您可以快速搭建一个无需编写服务器端代码的联系表单。
Netlify表单设置便捷，且免费版即可使用（每个Netlify站点最多可免费提交100次表单）。提交的表单会自动通过Netlify内置的垃圾邮件过滤器（使用Akismet），并提供多种配置选项以增强垃圾邮件检测能力。
在Next.js应用中，创建一个ContactForm组件，用于在联系页面渲染表单。如果希望表单在/contact路径下渲染，则应在pages/contact.js文件中使用以下ContactForm组件，包含标签和输入字段：
const ContactForm = (/* 代码见下文 */);
以下代码片段创建了一个包含姓名、公司、邮箱和留言字段以及提交按钮的表单。提交表单后，根据表单的action属性值，将重定向到/contact/?success=true。目前，页面在带有和不带有success查询参数时的外观没有区别，稍后我们将进行更新。
目前的Contact.js文件如下：
import React from "react";
const ContactPage = () => {
const ContactForm = (/* 上述代码片段中的代码 */)
return (
<div>
<h1>联系我们</h1>
{ContactForm}
</div>
);
};
export default ContactPage;完成基本表单设置后，我们需要添加一些信息，以便Netlify在未来的站点部署中自动识别表单。为此，需要更新表单，添加data-netlify="true"属性和一个包含表单名称的隐藏输入字段。在Netlify仪表盘中，导航到您的站点，然后点击“表单”选项卡，即可根据隐藏字段中设置的名称查看表单响应。重要的是，如果站点中有多个表单，则应为每个表单设置唯一的名称，以便Netlify正确记录。
{/* 代码见下文 */}成功将站点部署到Netlify，并添加data-netlify属性和form-name字段后，您可以访问已部署的站点并填写表单。提交表单后，导航到https://app.netlify.com/sites/site-name/forms（其中site-name是您的站点名称），如果表单设置成功，则应显示最新的表单提交记录。
为了提升用户体验，我们应该添加一些逻辑，在表单提交后，当URL更改为/contact/?success=true时重定向到确认页面。也可以选择在表单提交时重定向到完全不同的页面，但使用查询参数可以利用Next Router实现类似的效果。我们可以创建一个新变量，根据查询参数确定确认页面或表单的可见性。可以使用import { useRouter } from "next/router";导入的next/router来检索当前的查询参数。
const router = useRouter(); const confirmationScreenVisible = router.query?.success && router.query.success === "true";
在本例中，确认页面和表单不可能同时可见；因此，可以使用以下语句确定表单是否可见：
const formVisible = !confirmationScreenVisible;
为了让用户可以选择重新提交表单，可以在确认页面添加一个按钮，通过清除查询参数来重置表单。使用router.replace（而不是router.push）不仅会更新页面，还会将当前页面替换为不包含查询参数的版本。
router.replace("/contact", undefined, { shallow: true })然后，我们可以根据表单是否可见有条件地渲染表单：
{formVisible ? ContactForm : ConfirmationMessage}综合以上，我们可以使用以下代码根据查询参数（表单提交时更新）有条件地渲染表单：
import React, { useState } from "react";
import { useRouter } from "next/router";
const ContactPage = () => {
const [submitterName, setSubmitterName] = useState("");
const router = useRouter();
const confirmationScreenVisible =
router.query?.success && router.query.success === "true";
const formVisible = !confirmationScreenVisible;
const ConfirmationMessage = (
感谢您提交表单。我们将在24-48小时内与您联系。
);
const ContactForm = (/* 第一个代码示例中的代码 */);
return (
联系我们
{formVisible ? ContactForm : ConfirmationMessage}
);
};
export default ContactPage;现在，表单的核心功能已经完成，除了默认包含的Akismet之外，我们还可以为表单添加额外的垃圾邮件检测功能。可以通过向表单添加data-netlify-honeypot="bot-field"属性来启用此功能。
{/* 代码见下文 */}我们还需要创建一个新的隐藏段落，其中包含一个名为bot-field的标签，其中包含输入。此字段对机器人“可见”，但对人类不可见。当此隐藏字段被填写时，Netlify会检测到机器人，并将提交标记为垃圾邮件。
<p hidden> <label>请勿填写此项：</label> <input type="text" name="bot-field"> </p>
https://app.netlify.com/sites/[your-site-name]/settings/forms中进行设置，我们可以在其中包含一个自定义主题字段（可以隐藏）用于电子邮件通知。完整的站点代码可在GitHub上找到。（请提供GitHub链接，如果文章中有）
以下代码包含我们讨论的所有内容，以及使用姓名字段中提交的内容设置自定义主题行的逻辑。（请提供代码）
请注意，以上代码片段需要根据原文档补充完整代码。 我尽力根据原文档进行了改写和润色，力求在不改变原意的情况下进行伪原创。
以上是如何与Next.js创建联系表格和Netlify的详细内容。更多信息请关注PHP中文网其他相关文章！
