網站的設計、目的和複雜程度各不相同，但一般分為靜態和動態兩種。靜態網站預先渲染，向所有訪問者提供相同的內容。它們結構簡單，通常易於管理，載入速度快。另一方面，動態網站使用伺服器端程式語言即時生成內容。
靜態網站不支援表單等互動元素，因為它們需要伺服器端處理功能，如資料儲存。但這並不理想：表單是與使用者溝通的渠道。它們可以幫助你通過建議或詢問收集有價值的反饋，這樣你就可以通過定製內容來改善使用者體驗。
本指南將引導您完成以下步驟：為靜態網站建立表單、新增表單處理服務，以及在靜態網站託管服務的幫助下部署網站。
選擇表單處理服務
表單處理服務是為靜態網站收集和處理表單資料的第三方。它們提供處理表單提交所需的伺服器端基礎設施，在保持靜態網站優勢的同時增強網站的功能和互動性。
當使用者提交表單時，資料會被髮送到表單處理服務的端點。然後，服務會對資料進行處理、安全儲存，並向相應的接收者傳送通知。
表單處理服務有很多。讓我們來了解一下最流行的表單處理服務。
1. Formspree
Formspree 是一款使用者友好型表單處理服務，可簡化靜態網站中新增表單和管理表單提交的工作。它提供具有基本功能（如每月 50 次表單提交）的免費計劃，以及具有更高階功能（包括安全列表和垃圾郵件保護）的付費計劃。
2. Formbucket
FormBucket 通過將表單儲存到 “bucket” 中，為收集和管理表單提交提供了一種便捷的方式，每個 “bucket” 都有一個唯一的 URL。你可以通過 Formbucket 使用者友好的儀表板頁面為表單定義欄位和設定驗證規則，使其與你的網站品牌相一致。
3. Getform
Getform 是一個表單後端平臺，為處理表單提交提供了一種簡單而安全的方式。Getform 提供直觀的使用者介面，用於管理表單提交、電子郵件通知以及與 Slack 和 Google Sheets 等流行服務的整合。
比較 Formspree、Formbucket 和 Getform 服務
為了便於比較，下面的表格對上述三種服務及其主要功能進行了比較：
| 特徵 | Formspree | Formbucket | Getform |
| 價格 | 免費計劃和根據使用量和儲存量定價的付費計劃 | 14 天免費試用，付費計劃根據使用量和儲存量定價 | 免費計劃和根據使用量和儲存量定價的付費計劃 |
| 包括提交的表格數量 | 視所選定價計劃而定 | 視所選定價計劃而定 | 視所選定價計劃而定 |
| 自定義品牌 | Yes | Yes | Yes |
| 垃圾郵件防護 | Yes | Yes | Yes |
| 檔案上傳 | Yes, 需通過付費計劃 | No | Yes |
| 第三方整合 | Zapier、webhooks、Google Sheets、MailChimp 等 | Webhooks | Zapier、Slack、Google Sheets、Airtable、Mailchimp、Twilio 等等 |
在選擇表單處理服務時，您必須考慮整合的難易程度、所需的特性和功能、價格以及與託管平臺的相容性。評估表單的具體要求，比較每種表單處理服務，找到最適合您需求的服務。
使用 Getform 設定表單處理服務
使用 Getform 等表單處理服務可以大大簡化網站上的表單提交管理。當使用者提交表單時，Getform 會接管整個過程，無需使用後臺 API 來處理和儲存這些提交。
通過這種無縫整合，您可以在專用的訊息收件箱中有效地管理所有回覆。要開始使用，請確保您對 HTML、CSS 和 JavaScript 有基本的瞭解，並按照以下步驟操作：
1. 註冊 Getform 賬戶。
2. 導航至 Getform 帳戶儀表板，點選 + Create 按鈕。
3. 在出現的對話方塊中，確保選擇了 Form。提供一個描述性的端點名稱，並選擇適當的時區。然後點選 Create。
Getform 的表單提交端點 URL 建立對話方塊
Getform 將生成表單提交端點 URL，您必須將其新增到表單元素的 action 屬性中。
使用 HTML 和 CSS 建立表格
設定好表單處理服務後，就可以使用 HTML、CSS 和 JavaScript 建立表格了。
1. 在終端中建立名為 forms 的專案資料夾，並將當前目錄更改為專案目錄：
mkdir forms cd forms
2. 新增以下專案檔案：
#unix-based systems touch index.html styles.css script.js #windows echo. > index.html & echo. > styles.css & echo. > script.js
3. 接下來，建立一個 HTML 表單。在本指南中，下面提供的程式碼將幫助你建立一個表單，其中包括姓名和電子郵件地址輸入框、資訊文字區和提交按鈕。您可以將此程式碼新增到您的 index.html 檔案中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Form</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1 class="form-title">Contact Us</h1> <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST"> <div class="input-group"> <label for="name" class="form-label">Name:</label> <input type="text" id="name" name="name" class="form-input" required> <label for="email" class="form-label">Email:</label> <input type="email" id="email" name="email" class="form-input" required> <label for="message" class="form-label">Message:</label> <textarea id="message" name="message" class="form-textarea" rows="4" required> </textarea> </div> <div class="form-control"> <button type="submit" id="submitBtn" class="form-submit">Submit</button> </div> </form> </div> <script src="script.js"></script> </body> </html>
3. 導航至 Getform 面板並複製端點 URL。然後，將此 URL 貼上到 HTML 程式碼中表單開頭標記內的 action 屬性中。
4. 最後，在 styles.css 檔案中新增 CSS 樣式，自定義表單的設計和外觀。
使用 JavaScript 實施資料驗證
在處理或儲存使用者輸入之前，資料驗證會檢查使用者輸入是否符合特定條件和驗證規則。
執行資料驗證有助於避擴音交錯誤或惡意資料，為使用者提供輸入錯誤的即時反饋，並確保只有有效資料才能得到進一步處理。它在維護資料完整性和準確性方面起著至關重要的作用。
實現資料驗證有幾種方法，包括使用 JavaScript 執行客戶端驗證、伺服器端驗證或兩種方法的結合。在本指南中，讓我們為聯絡表單實施客戶端驗證，以確保使用者不會提交空欄位，並確保所提供的電子郵件格式正確。
1. 首先，在 script.js 檔案中新增以下程式碼，定義驗證函式：
function validateForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
if (name.trim() === '' || message.trim() === '') {
alert('Please fill out all fields.');
return false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return false;
}
return true;
}
validateForm() 函式有兩個作用：首先，它檢查姓名和資訊欄位是否為空，然後使用正規表示式驗證電子郵件欄位，並檢查電子郵件地址是否為有效格式。
如果欄位為空或電子郵件格式無效，函式將觸發並顯示一條警報資訊。反之，如果所有表單欄位都通過了這些驗證檢查，則函式返回 true，表單提交。
您還可以新增其他驗證規則，以確保提交資料的準確性和完整性。例如，您可以驗證使用者輸入的長度，或限制使用者在資訊中提交某些字元，從而幫助防止潛在的安全漏洞（如注入攻擊）。
2. 接下來，呼叫上面的函式，使用click 事件監聽器回撥啟用驗證。每次使用者點選 submit 按鈕時，該回撥都會觸發函式。要呼叫該函式，請在 script.js 檔案中新增以下程式碼：
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');
if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault();
if (validateForm()) {
document.forms['contactForm'].submit();
resetFormAfterSubmission();
}
return false;
});
}
});
function resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset();
}, 500);
}
請注意，程式碼中包含 preventDefault() 函式，用於阻止預設表單提交操作。這樣，您就可以在向 Getform 提交資訊之前驗證表單。
此外，在成功驗證和提交後，會觸發 resetFormAfterSubmission() 函式，在半秒延遲後重置表單，以便允許更多提交。
部署您的靜態網站至伺服器
以Kinsta為例，Kinsta 提供託管解決方案，允許您託管不同的網站專案和資料庫。使用其免費計劃，你可以直接從 GitHub、GitLab 或 Bitbucket 託管多達 100 個靜態網站。
要在 Kinsta 上部署靜態網站，首先要將程式碼推送到首選的 Git 提供商。然後，按照以下步驟操作：
- 登入 MyKinsta 面板。
- 在儀表板上單擊 “Add Service” 下拉選單並選擇 “Static Site“。
- 如果您是第一次使用 Kinsta 託管專案，請選擇並啟用您偏好的 Git 服務提供商。
- 選擇專案倉庫。
- 選擇要部署的分支，並提供唯一的站點名稱。
- 通過新增 period 指定包含 HTML 檔案和資產的釋出目錄的根路徑，以便部署。
- 最後，單擊 Create site。
幾秒鐘內，MyKinsta 就會部署您的網站。
注：不同伺服器提供商所提供的靜態網站部署方式不盡相同，這裡僅供參考。
要將表單無縫整合到現有網站中，請將表單的 HTML 直接複製並貼上到網站的所需部分。確保包含相關的 CSS 屬性和 JavaScript 程式碼，以確保樣式和功能的一致性。
或者，由於你已經單獨部署了表單，你可以向使用者提供 URL（超連結或按鈕），讓他們點選訪問表單。
要測試實時網站的功能，請單擊提供的網站 URL。鍵入所需的表單輸入，確保表單按預期執行。確認表單驗證了使用者輸入，在適當的時候顯示錯誤提示，併成功提交有效資料供進一步處理。
提交表單後，Getform 會將您重定向到確認或感謝頁面，說明提交成功。
Getform 的表單提交確認頁面
要檢視錶單回覆，請導航到您的 Getform 面板，然後在提供的訊息收件箱中檢視提交情況。
小結
現在，您已經成功實施了表單，有無數機會可以對其進行自定義。例如，您可以使用 CSS 或您喜歡的前處理器語言進一步設計表單樣式，並實施高階驗證技術，從而增強表單的設計和功能。
評論留言