今天的挑戰聚焦在 Contact 區塊，除了排版之外，也開始進入表單設計。版面配置延續整體風格：電腦版使用 雙欄式，手機版則轉為 單欄垂直排列，確保在不同裝置上都有良好的閱讀體驗。

最下方加上聯絡我 CTA，預期點擊按鈕後，會跳出 dialog 邀請使用者填寫資料。

表單規劃

1. 必要欄位必填驗證：像是「姓名」與「Email」是聯繫的基礎，因此在前端設計時必須檢查，若未填寫就阻擋送出，並顯示清楚的提示訊息。
2. 非必要欄位不影響流程：例如訊息主題或公司名稱等，可以是選填，避免增加填寫阻力。
3. 送出後的互動設計：點擊「送出」後，不僅要觸發 email 通知，也要即時回饋給使用者（例如「已成功送出！」的訊息），確保操作有被回應。

元件狀態設計

1. 輸入框
   • Default：基礎狀態，邊框與背景顏色保持中性，顯示 placeholder。
   • Focus：使用者點擊或輸入時，邊框高亮或變色，增加輸入專注感。
   • Required：若必填欄位未輸入，顯示紅色提示文字或邊框，避免送出。
   • Disabled：不可編輯，背景變淺灰，游標無法點選，避免誤操作。
   • Hover (非必要)：滑鼠懸停時，邊框或陰影微強調，提示可互動性。注意：在手機上點按是無法有hover效果的。
2. 按鈕
   • Primary：主要按鈕，使用品牌主色，吸引用戶視覺焦點。
   • Secondary：次要按鈕，顏色較低調，支援輔助操作。
   • Disabled：停用狀態，按鈕顏色淡化、不可點擊，避免誤觸。
   • Icon：按鈕可加上 icon（例如信封、箭頭），提升功能辨識度與引導性。

進階挑戰方向

1. 串接 Google Sheet
   • 當表單送出後，使用 Google Apps Script 或現成 API，把資料自動寫入 Google 試算表，方便集中管理與追蹤聯絡紀錄。
   • 好處是免後端、免費，適合作品集展示。
2. Email 自動通知
   • 除了寄通知給自己，也可以寄一封「已收到您的訊息」給填表人，提升專業感。
   • 可透過 SMTP、第三方服務（SendGrid、Resend、EmailJS）實現。
3. 前端 UX 微互動
   • 表單送出後，可以用 動畫或對話框 告知使用者狀態，例如小小的「Loading → Success」過場，讓體驗更流暢。

接下來，就會以程式碼實作元件邏輯設計，將規劃的流程套用在此表單上，並在互動上貼近使用者需求。