使用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中文網其他相關文章！