当前位置：首页 > 编程语言 > 正文内容

使用Netlify Forms在Next.Js中创建联系表单

a811625532年前 (2023-12-20)编程语言15

作为网站所有者，拥有一个易于使用并能确保访客信息安全的联系表单至关重要。设计良好的联系表单是与潜在客户接触并与受众建立信任的绝佳方式。本指南结束时，您将拥有一个基于 Netlify 表单的全功能联系表单，并将其集成到您的 Next.js 应用程序中，使您能够轻松接收和管理用户咨询。

创建一个有效、可靠的联系表单对于现代在线业务至关重要。为访问者提供安全、便捷的联系 *** 至关重要，而联系表单正是完美的解决方案。通过使用联系表单，您可以简化沟通流程，方便访客就任何问题或疑虑与您联系。 是一个流行的 React 框架，以其服务器端渲染和无缝的开发人员体验而闻名，我们将在本教程中探讨如何将 Nextjs 与 Netlify 表单（ 提供的强大表单处理服务）相结合。

设置开发环境

在开始之前，我们要使用下面的命令行设置 Next.js 环境。

npx create-next-app@latest

请按照下面的提示操作：

之后，我们的 “下一个应用程序” 就准备就绪了，因此我们可以进入，在这里我们要做的工作最多。我们可以查看下面的树形结构。

form-app
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
└── app
├── favicon.ico
├── globals.css
├── layout.js
└── page.js
└── tailwind.config.js

创建联系表单组件

在本文中，我们有三种 *** 来实现 Netlify 表单与 Next.js 的集成；首先，我们要看看简化 *** ，然后再看其他 *** 。要创建表单组件，我们先浏览 layout.js 文件。

export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

在 html 标签下，我们将创建一个带有各种标签和属性（如 label 和input）的 form 字段。

//layout.js//
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<div>
<h2>Contact us!</h2>
<form>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
);
}

这个表单没有太多噱头，非常简单。启动应用程序（通常使用 npm run dev ）后，访问 localhost:3000 。你应该会看到一个类似下面这样的表单，这取决于你是如何设计的：

目前，如果您尝试将其部署到 Netlify，什么也不会发生。这是一个直接的表单，没有任何连接来让表单字段做任何事情。因此，让我们改变这一点。

为表单添加 Netlify 属性

让我们返回 layout.js，在 form 标签中添加 Netlify 属性，这有助于将表单链接到 Netlify 服务器。说明一下，这些属性是 netlify、 data-netlify='true' 和 netlify='true' 。要知道，它们的工作方式都是一样的，所以无论你选择使用哪一种，都能完美地工作。

  //layout.js//
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<div>
<h2>Contact us!</h2>
<form name="contact" method="post" netlify>
<input type="hidden" name="form-name" value="contact" />
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</div>
.....
</form>
</div>
</body>
</html>
);
}

之后，我们保存并部署到 Netlify，然后进入下一步，在 Netlify 中启用表单。

处理表单提交

您可以使用 Netlify 的无服务器表单管理功能管理表单，而无需调用额外的 API 或添加复杂的 代码。一旦开启，内置表单识别功能可使其构建系统在部署时自动解析您的 ，无需使用 API 或添加状态函数。首先，我们必须在 Netlify 网站的站点配置中 automatic form detection system。

现在我们的步骤已经完成，因此只要访问者访问您的网站并决定提交表单，他们就会收到下面的成功信息，表明 Netlify 已收到他们的信息。

如果我们转到 Netlify 和网站仪表盘，在表单提交下，我们会看到网站访客提交的表单列表。

公平地说，这种 *** 主要适用于，例如包含 HTML 的网站（Next.js 就是其中之一）。部署网站时，处理机器人会搜索 netlify 属性，而它们只能理解 HTML 形式的属性。因此，如果我们有一个想要部署到生产环境的 Next 应用程序，在 *** X 表单中添加上述属性后，该表单将无法工作，因为它们无法检测到使用 Javascript 呈现的表单。因此，我们可以使用另外两种 *** 来让 Netlify 理解我们的表单字段及其 Javascript 文件中的属性： 无状态和有状态组件表单。

无状态组件

对于我们的无状态 React 组件，我们要做的就是添加一个带有 hidden 属性的静态  html  表单字段。

<form name="contact" netlify="true" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>;

在本例中，我们将把它添加到 layout.js 中，因为它包含一个 html 标记。由于我们将为表单添加 hidden 属性，使用户和屏幕阅读器无法看到表单，因此可以移除 label 和 submit 组件。

在 *** X 表单中添加隐藏输入标签

在 *** X 表单中，必须另外包含一个 hidden 类型元素，其 name 和 value 属性如下代码所示：

<input type="hidden" name="form-name" value="contact" />

现在，您的 Pages.js 文件应该如下所示：

export default function Home() {
return (
<div>
<h2>Contact Us</h2>
<form name="contact" method="post">
<input type="hidden" name="form-name" value="contact" />
<div>
<label htmlFor="name">Name</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label htmlFor="email">Email</label>
<input type="email" id="email" name="email" />
</div>
<div>
<label htmlFor="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}

如果您在浏览器中运行应用程序，您应该可以看到表单；当您的应用程序部署到 Netlify 后，您就可以提交表单了。

有状态组件

在本例中，我们将创建一个包含状态函数的 Contact.js 文件，然后将其导入我们的 page.js 。至于 layout.js ，它仍然是隐藏的。

//Contact.js//
const encode = (data) => {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
};
const Contact = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
message: "",
});
const handleSubmit = (e) => {
e.preventDefault();
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...formData }),
})
.then(() => alert("Success!"))
.catch((error) => alert(error));
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
return (
<div>
<h2>Contact Us</h2>
<form onSubmit={handleSubmit}>...</form>
</div>
);
};
export default Contact;

encode 函数将表单数据转换为 URL 编码字符串。它将一个对象（data）作为输入，遍历其键，并对键及其对应的值进行编码。然后用”&”将编码后的键值对连接起来，形成一个 URL 编码字符串。主要功能组件 “Contact” 使用 useState React 钩子来初始化和管理表单数据状态。formData 状态保存了 name, email, 和  message 输入的值。任何输入字段发生变化时，都会调用 handleChange 函数。它会根据之前的状态创建一个新对象，并用新值更新特定字段（姓名、电子邮件或消息），从而更新表单数据状态。

添加成功消息

与 Netlify 重定向页面的静态和无状态 *** 相反，对于有状态组件，为避免重定向错误（即 404 消息），我们创建了 handleSubmit 函数，该函数在表单填写并提交后启动。该函数会阻止默认的表单提交行为，并使用 Fetch API 向服务器发送 POST 请求。它将表单数据编码为 URL 参数发送，并将 form-name 参数设置为  'contact'。如果请求成功，则会显示 “Success!” 提示；否则会显示错误提示。

小结

掌握创建动态的技巧可以大大提高您的 *** 开发技能。Next.js 和 Netlify Forms 的无缝集成不仅简化了流程，还使您能够轻松创建交互式、用户友好的联系表单。通过利用服务器端渲染、无状态和有状态组件的强大功能以及 Netlify 表单的简易性，您可以为网站访问者提供一个流畅且引人入胜的交流渠道。因此，请深入了解 Next.js 和 Netlify 表单，开启一个充满可能性的领域，打造现代、有效的 *** 解决方案，给人留下深刻印象。

相关资源：

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8135.html

分享给朋友：
返回列表

上一篇：如何在React应用中集成YouTube播放器

下一篇：Bun，Node和Deno三者对比分析：谁更加优秀？

“使用Netlify Forms在Next.Js中创建联系表单” 的相关文章

什么是JavaScript？网络上最流行的脚本语言一瞥

什么是JavaScript？网络上最流行的脚本语言一瞥

谁在尝试访问某些网站时没有遇到过更新Java的请求？ 虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。 在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概...

宝塔面板教程之安装及常见问题篇

宝塔面板教程之安装及常见问题篇

宝塔面板现在已经成为国内许多站长必备的服务器管理必备工具。相比直接使用SSH+FTP来管理服务器，宝塔面板可以提供可视化管理，包括文件管理、数据库管理、数据备份、SSL配置等等。 如果你希望更简单高效地管理您的网站及服务器，宝塔面板是不错的选择。下面是一些宝塔面板安装及常见问题：...

宝塔面板教程之FTP管理篇

宝塔面板教程之FTP管理篇

使用宝塔面板，您可以快速地创建一个FTP管理账户，对网站文件进行管理。但有必要提醒大家的是，使用FTP远不如使用SFTP安全，你可以查看文章“”进一步了解两者之间的差异。 此外，宝塔面板的文件管理模块其实已经能够满足站长的大部分文件管理需求。当然，如果你非得要使用FTP管理服务器文件，可以参照以下...

宝塔面板教程之文件管理篇

宝塔面板教程之文件管理篇

宝塔面板其中一个最为便捷的功能之一，无需SFTP或者FTP即可对服务器的文件内容进行上传、下载、编辑及删除等管理操作。 文件管理，用于管理该服务器上的文件内容。 文件的基础操作 文件的基础操作有哪些了，主要有这些方面：复制、粘贴、剪切、删除、重命名、压缩、刷新、新建文件、新建目录。...

2022年PHP开发人员的平均工资统计报告

2022年PHP开发人员的平均工资统计报告

PHP开发：有些人认为它是，另一些人认为它是一种过时的技术，不值得花时间学习。但是这些数字说明了什么，尤其是当您查看PHP开发人员的薪水时？ 虽然肯定有许多更新、更炫、更令人兴奋的语言，但PHP仍然是后端Web开发的可靠主食，也是许多雇主仍在寻找的技能。 有兴趣自己成为PHP开发人员吗？我们...

优化Laravel性能的17种方法

优化Laravel性能的17种方法

您是否正在寻找成功的方法来加快Laravel的性能，同时在您的项目上工作？你来对地方了！ Laravel是一个流行的开源PHP框架，以其强大的安全性和简单而复杂的编码架构而闻名。它是构建能够推动收入和推动业务发展的尖端Web应用程序的绝佳选择。 尽管如此，如果你不使用正确的优化技术，Lara...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第465239名访客 今日有8篇新文章/评论