如何與Next.js創建聯繫表格和Netlify

利用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 id="聯繫我們">聯繫我們</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小時內與您聯繫。
      router.replace("/contact", undefined, { shallow: true })}>提交另一個回复
   
 );

 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>

進一步定制

• 我們可以探索Netlify支持的另一種垃圾郵件防護選項，即向Netlify表單添加reCAPTCHA 2。
• 我們可以更新表單，允許上傳文件。
• 我們可以設置表單提交的通知。這可以在https://app.netlify.com/sites/[your-site-name]/settings/forms中進行設置，我們可以在其中包含一個自定義主題字段（可以隱藏）用於電子郵件通知。

完整代碼

完整的站點代碼可在GitHub上找到。 （請提供GitHub鏈接，如果文章中有）

額外內容

以下代碼包含我們討論的所有內容，以及使用姓名字段中提交的內容設置自定義主題行的邏輯。 （請提供代碼）

請注意，以上代碼片段需要根據原文檔補充完整代碼。 我盡力根據原文檔進行了改寫和潤色，力求在不改變原意的情況下進行偽原創。

以上是如何與Next.js創建聯繫表格和Netlify的詳細內容。更多資訊請關注PHP中文網其他相關文章！