把網站表單串接到ForeverLove
不用自己架設表單後端。只要在 ForeverLove 後台取得兩組代碼，再登記網站來源，GitHub Pages、自訂網域與一般靜態網站都能接收 RSVP 回覆。
回到婚禮表單後台一個已開通婚禮表單功能的 ForeverLove 會員帳號、要接收回覆的網站網址，以及可以修改網站檔案的權限。目前後台只開放給指定會員；登入後若看不到入口，代表帳號尚未開通。
在後台建立一個表單串接
登入 ForeverLove，開啟「婚禮表單後台」，填寫網站名稱、公開網址與「允許來源」。建立完成後，系統會自動建立第一張 RSVP 表單，並顯示串接所需的兩組代碼。
| 欄位 | ForeverLove 模板 | GitHub Pages | 本機測試 |
|---|---|---|---|
| 公開網址 | https://template-01.foreverlove.com.tw/ | https://帳號.github.io/專案/ | http://127.0.0.1:4173/ |
| 允許來源 | https://template-01.foreverlove.com.tw | https://帳號.github.io | http://127.0.0.1:4173 |
它是被允許送出表單的網站身分，也就是網址中的「http 或 https＋網域＋必要的 port」。不要填頁面路徑、網址參數或結尾斜線。
先保存 Form key 與 Publishable key
這兩組代碼用途不同，網站送出表單時缺一不可。完整 Publishable key 只在建立或重設時顯示一次，請立即複製到網站設定；Form key 則用來指定回覆要進入哪一張表單。
| 名稱 | 用途 | 是否能放在公開網站 |
|---|---|---|
| Publishable key | 辨認是哪一個網站在送出資料。程式會把它放在 X-ForeverLove-Key。 | 可以。它不是後台密碼，但仍要限制允許來源。 |
| Form key | 指定回覆要進入哪一張表單，會放在 API 網址中。 | 可以。 |
Form key 和 Publishable key 可以放在網站中；ForeverLove 登入密碼、JWT、資料庫密碼及任何後台管理憑證絕對不可以，也不能提交到 GitHub。
登記哪些網站可以送出表單
ForeverLove 會比對瀏覽器送出的網站來源（Origin）。內容必須完全一致，包含 http 或 https；本機測試還要包含 port。若同時使用正式網址、GitHub Pages 和本機預覽，請一行填一個。
https://template-01.foreverlove.com.tw
https://amattsuyolo.github.io
http://127.0.0.1:4173- GitHub Pages 即使網址含有 repository 路徑，Origin 仍只填
https://帳號.github.io。 http://localhost:4173與http://127.0.0.1:4173是不同來源。- 正式網站請使用 HTTPS 網址，不要用萬用字元。
把兩組代碼放進網站
使用 ForeverLove wedding-template
如果使用 ForeverLove 公開婚禮模板，打開專案根目錄的 form-config.js，啟用串接並貼上兩組 key。正式網站使用 ForeverLove API；本機測試使用本機 API。
window.FOREVERLOVE_RSVP = Object.freeze({
enabled: true,
apiBaseUrl: "https://foreverlove.com.tw/api/v1",
formKey: "貼上 Form key",
publishableKey: "貼上 Publishable key"
});使用一般 HTML／JavaScript 網站
如果沒有使用公開模板，也可以保留自己的表單外觀，只加入送出程式。以下是最小可用範例；其中 attendance 必須是 attending（出席）或 not-attending（無法出席）。
<form id="rsvp-form">
<label>姓名 <input name="name" required maxlength="100"></label>
<label>Email <input name="email" type="email" maxlength="254"></label>
<label>是否出席
<select name="attendance" required>
<option value="attending">會出席</option>
<option value="not-attending">無法出席</option>
</select>
</label>
<label>留言 <textarea name="message" maxlength="1000"></textarea></label>
<input name="company" tabindex="-1" autocomplete="off" hidden>
<button type="submit">送出回覆</button>
<p id="rsvp-status" role="status"></p>
</form>const apiBaseUrl = "https://foreverlove.com.tw/api/v1";
const formKey = "貼上 Form key";
const publishableKey = "貼上 Publishable key";
const form = document.querySelector("#rsvp-form");
const status = document.querySelector("#rsvp-status");
form.addEventListener("submit", async (event) => {
event.preventDefault();
const submit = form.querySelector('[type="submit"]');
const values = Object.fromEntries(new FormData(form));
submit.disabled = true;
status.textContent = "送出中…";
try {
const response = await fetch(
`${apiBaseUrl}/public/forms/${encodeURIComponent(formKey)}/responses`,
{
method: "POST",
credentials: "omit",
headers: {
"Content-Type": "application/json",
"X-ForeverLove-Key": publishableKey
},
body: JSON.stringify(values)
}
);
const result = await response.json();
if (!response.ok) throw new Error(result.message || "送出失敗");
form.reset();
status.textContent = result.message;
} catch (error) {
status.textContent = `${error.message}，請稍後再試。`;
} finally {
submit.disabled = false;
}
});送一筆測試，確認前台和後台都有資料
- 確認目前開啟網站的 Origin 已加入允許來源。
- 使用真正的網站網址開啟表單；不要直接雙擊 HTML 形成
file://頁面。 - 用容易辨認的測試姓名送出一次 RSVP。
- 回到婚禮表單後台，選擇相同表單並確認回覆出現。
- 下載 CSV，確認中文、Email、出席狀態與留言正常。
- 送出時按鈕會停用並顯示處理中狀態。
- 成功後有明確訊息，且後台看得到同一筆資料。
- 必填未填、Email 格式錯誤時不會產生不完整回覆。
- 手機版可完成整個填寫與送出流程。
送不出去時，先看錯誤代碼
401Publishable key 錯誤、已停用或已經重設。回後台重新確認或輪替 key。
403目前網站的 Origin 不在允許來源中。檢查協定、網域、port 與結尾斜線。
404Form key 不存在或表單已暫停。確認貼的是 Form key，不是 Publishable key。
422送出欄位驗證失敗。確認姓名、出席狀態、Email 格式及文字長度。
429短時間送出次數過多。稍後再測試，不要在前端自動重複送出。
先檢查後台允許來源，再確認頁面的實際 Origin。不要用關閉瀏覽器安全限制的方式掩蓋設定問題。