使用NetLify表单和NetLify功能来构建电子邮件注册小部件

建立和维护个人网站具有许多优势，包括您的平台所有权以及探索网络技术的机会。最近，我从自己的网站开始研究无服务器功能。本文分享了我的经验和学习，使您能够建立自己的经验和学习！

快速介绍无服务器功能

无服务器功能（也称为lambda功能或云功能）是您可以独立编写，主机执行和执行的独立代码段，独立于您的网站，应用程序或其他代码。当它们在服务器上运行时，您不管理服务器基础架构。这简化了强大的可扩展应用程序的开发。

为了获得更深入的理解，CSS-Tricks的指南“无服务器前端开发人员的力量”是一个很好的资源。

项目目标：简单的电子邮件注册表格

我的项目专注于创建具有特定约束的电子邮件注册表格：

• 无JavaScript功能：表单应仅使用CSS和HTML功能，从而允许进行渐进的增强功能。
• 没有外部依赖性：目标是自己编写所有代码。
• 无服务器功能集成：电子邮件数据处理将发生服务器端，而不是客户端。

技术堆栈：11ty，Netlify和Buttondown

我的网站使用11ty，这是一个静态站点生成器，允许创建HTML模板。 NetLify处理部署，对于无服务器功能至关重要，提供：

• 自动化的GitHub部署：简化开发工作流程。
• NetLify表格：管理表单提交，而没有自定义代码。
• NetLify函数：基于表单数据启用服务器端操作。

Buttondown用作电子邮件列表管理服务。重要的是，对于个人站点，这三个服务都提供免费层。

表格的HTML

我的电子邮件订阅表的HTML简洁，利用NetLify表单属性：

您的电子邮件地址 订阅

data-netlify="true"指示NetLify处理表单。 bot-field输入充当蜜罐来检测机器人，自动从用户隐藏。 Netlify的Akismet集成进一步保护了垃圾邮件。 email输入使用浏览器验证来增强用户体验。

JavaScript进行逐步增强

虽然Netlify表单提供自动重定向，但我更喜欢将用户保留在页面上。 JavaScript函数增强了表单的功能：

 const processForm = form => {
  // ...（提取API代码而不重定向提交表单）...
};

该功能是由提交事件侦听器触发的，可以逐步增强表单，即使禁用JavaScript，也可以确保功能。

无服务器功能

NETLIFY函数位于functions/submission-created.js中，进程表格提交：

 // ...（使用Node-fetch和环境变量来将数据发送到buttondown）... ...

该函数检索电子邮件地址，使用node-fetch通过其API将其发送到Buttondown，并记录调试结果。环境变量安全地存储了Buttondown API键。

部署和本地测试

编写函数，配置netlify.toml和设置环境变量后，通过NetLify的GitHub集成，部署是简单的。可以使用NetLify Dev（ npm i netlify -g ，然后是netlify dev ）进行本地测试，尽管表单提交测试需要预览构建。

未来的改进

未来的增强功能可能包括向用户提供实时反馈，例如指示是否已经订阅了电子邮件地址。

结论

使用大约50行代码，我创建了一个功能齐全的电子邮件注册表格。 HTML，CSS，JavaScript和NetLify的无服务器功能的组合导致了抗垃圾邮件，用户友好的表单，无论JavaScript可用性如何，都可以使用。

以上是使用NetLify表单和NetLify功能来构建电子邮件注册小部件的详细内容。更多信息请关注PHP中文网其他相关文章！