頁面區塊 Sections
Contact Section
含表單與微互動的聯絡我們區塊。
含浮動標籤、聚焦底線展開、逐項揭示與送出狀態轉場的聯絡區塊，開箱即用。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/contact-section.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<ContactSection/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/contact-section.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/contact-section 安裝。
使用
import { ContactSection } from "@/components/ui/contact-section";
<ContactSection
title="一起做點什麼"
description="填寫下方表單，或透過任一管道聯絡我們。"
onSubmit={async (values) => {
await fetch("/api/contact", {
method: "POST",
body: JSON.stringify(values),
});
}}
/>未提供 onSubmit 時，元件會以內建的模擬延遲呈現送出→成功的狀態轉場，方便預覽互動。onSubmit 回傳的 Promise 完成後才會切到成功態。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | "一起做點什麼" | 區塊標題 |
description | string | "填寫下方表單…" | 區塊副標描述 |
info | ContactInfoItem[] | 內建三項 | 左側聯絡資訊清單 |
submitLabel | string | "送出訊息" | 送出按鈕文字 |
successLabel | string | "已送出，感謝你！" | 送出成功後顯示的文字 |
onSubmit | (values) => void | Promise<void> | — | 送出處理器；回傳 Promise 會等待其完成 |
className | string | — | 透傳至外層容器 |
其中 ContactInfoItem 形如 { icon: "mail" | "phone" | "map"; label: string; hint?: string }，values 形如 { name: string; email: string; message: string }。
可及性
- 使用者系統開啟「減少動態效果」時，所有進場、浮動標籤與狀態轉場改為即時切換，不做位移或模糊
- 每個輸入欄都有對應的
label（htmlFor綁定id），送出按鈕在loading與success態會停用避免重複送出