使用 svelte 教學建立表單

使用 Fabform.io 簡化 Svelte 表單提交

建立 Web 表單通常涉及複雜的後端管理 - 資料庫、伺服器、電子郵件處理。 Fabform.io 提供了更簡單的解決方案，無需進行大量後端開發。 本教學示範如何將 Fabform.io 整合到您的 Svelte 應用程式中以實現無縫表單提交。

使用 Fabform.io 的主要優點：

1. 無後端：不需要伺服器端程式碼。
2. 安全可靠： Fabform.io 安全可靠地進行資料處理。
3. 輕鬆整合：輕鬆與 Google Sheets、Zapier、自訂電子郵件服務等整合。
4. 快速設定：只需一個 URL 和基本表單結構即可在幾分鐘內開始使用。

讓我們將 Fabform.io 整合到 Svelte 應用程式中：

---

第 1 步：設定您的 Svelte 項目

1. 建立一個新的 Svelte 專案：

<code class="language-bash">npx degit sveltejs/template svelte-fabform
cd svelte-fabform
npm install
npm run dev</code>

第 2 步：建立 Fabform 表單

1. 註冊/登入 Fabform.io。
2. 建立一個新表單。 Fabform.io 將提供唯一的操作 URL，例如：https://fabform.io/f/your-form-id.

第 3 步：將表單整合到 Svelte

將表單的 action 屬性替換為您的 Fabform.io 操作 URL。 這是一個 Svelte 表單範例：

<code class="language-svelte"><script>
  let formData = {
    name: '',
    email: '',
    message: ''
  };
</script>

<main>
  <h1>Contact Form</h1>
  <form method="POST" action="https://fabform.io/f/your-form-id" on:submit|preventDefault>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" bind:value={formData.name} name="name">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" bind:value={formData.email} name="email">
    </div>
    <div>
      <label for="message">Message:</label>
      <textarea id="message" bind:value={formData.message} name="message"></textarea>
    </div>
    <button type="submit">Submit</button>
  </form>
</main>

<style>
/* Add your CSS styling here */
</style></code>

重要注意事項：

• 操作 URL： 將 "https://fabform.io/f/your-form-id" 替換為您實際的 Fabform.io 操作 URL。
• 欄位名稱： 確保 name 屬性（name、email、message）與您的 Fabform.io 表單欄位名稱相符。
• 重定向（可選）：新增隱藏的<input type="hidden" name="redirect_to" value="your-redirect-url">以在提交後指定重定向URL。

第 4 步：測試您的表單

1. 運行您的 Svelte 應用程式 (npm run dev)。
2. 在瀏覽器中存取http://localhost:5000。
3. 提交表格。 Fabform.io 將處理提交並重定向（如果指定）或顯示確認。

Fabform.io 透過提供安全、易於使用的後端替代方案來簡化 Svelte 表單處理。 其整合增強了資料管理和工作流程。

以上是使用 svelte 教學建立表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！