如何在 WordPress 中使用 CSS 為 Contact Form 7 表單設計樣式

更新於

想令你的 WordPress 表格同網站其他部分一樣吸引？用 Contact Form 7，你可以用 CSS 完全掌控表格外觀。呢篇指南會逐步教你點樣為 Contact Form 7 表格設計樣式，幫你為訪客打造無縫又有品牌感嘅體驗。

點解要為 Contact Form 7 表格設計樣式？

Contact Form 7 係最受歡迎嘅 WordPress 表格外掛之一——但預設外觀比較基本。喺經典 WordPress 主題自訂樣式可以讓你：

  • 配合你網站品牌風格

  • 提升可用性同無障礙

  • 令表格更吸引同專業

步驟 1：識別表格嘅 CSS 選擇器

開始設計前，你要知道邊啲 CSS 選擇器係針對表格元素。

  • 每個 Contact Form 7 表格都包住一個獨特類別：.wpcf7

  • 個別元素如輸入框、多行文字框同送出按鈕會用標準 HTML 標籤

步驟 2：將自訂 CSS 加入你嘅 WordPress 網站

你可以用兩種主要方法加入 CSS：

  • 經由自訂器：
    前往 外觀 > 自訂 > 額外 CSS，然後貼上你的樣式。

注意：如要進階自訂，請將你的 CSS 加入子主題的 style.css 檔案。

步驟 3：撰寫你的自訂 CSS

以下係常見例子，幫你起步，以「text」同「submit」表格元件為例：

為所有 Contact Form 7 表格設計樣式

.wpcf7 input[type="text"],
.wpcf7 textarea {
  border: 2px solid #0073e6;
  padding: 10px;
  width: 100%;
  font-size: 1em;
}

.wpcf7 input[type="submit"] {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background: #005bb5;
}

CSS 裡嘅偽類（pseudo-classes），例如 :hover，可以根據元素狀態或用戶互動去設計樣式。例如 :hover 偽類會喺用戶將滑鼠移到按鈕或欄位上時套用樣式。呢個常用嚟突出按鈕或改變顏色，令表格更有互動感同吸引力。其他有用嘅偽類包括 :focus（當輸入框被選取時）同 :active（當元素被點擊時）。用偽類可以提升用戶體驗，因為訪客互動時會即時有反饋。

針對特定表格設計樣式

每個表格都有獨特 ID，例如 #wpcf7-f123-o1。用呢個 ID 只為該表格設計樣式：

#wpcf7-f123-o1 input[type="text"] {
  background: #f9f9f9;
}
請將 f123-o1 換成你實際表格嘅 ID。你可以喺嵌入 Contact Form 7 表格嘅頁面，右擊表格並選擇「檢查」（或「檢查元素」）搵到表格獨有嘅 ID。搵到 class 為 .wpcf7 嘅 <div>，ID 會係 HTML 代碼中類似 id="wpcf7-f123-o1"。用呢個 ID 喺 CSS 選擇器只針對該表格設計樣式。

步驟 4：使用 Contact Form 7 內建類別

Contact Form 7 會自動為元素加上類別，令針對性設計更方便。例如：

  • .wpcf7-form-control – 所有表格控制項

  • .wpcf7-submit – 送出按鈕

你亦可以喺表格編輯器加自己嘅類別，進一步掌控樣式。

範例

.wpcf7-form-control.wpcf7-text {
  border-radius: 5px;
}

.wpcf7-submit {
  font-weight: bold;
  letter-spacing: 1px;
}

步驟 5：預覽及調整

儲存 CSS 後，請重新整理網站以查看變更。可用瀏覽器檢查工具即時微調樣式，再複製到網站。更改後記得清除網站快取，確保訪客睇到最新樣式。

以下係示範網站表格前後對比例子，我哋用咗步驟 3 嘅 CSS 令每個表格欄位周圍變成藍色。

更好表格樣式嘅小貼士

  • 保持易讀： 確保有良好色彩對比同易讀字體大小

  • 善用間距： 加入內距同外距，令外觀整齊清晰

  • 突出錯誤： 用明顯顏色（如紅色）設計錯誤訊息，幫用戶修正錯誤

  • 手機測試： 確保表格喺所有裝置都靚

疑難排解

如果樣式冇顯示，可以試下以下步驟：

  • 清除瀏覽器及網站快取 – 有時快取檔案會阻止新 CSS 顯示。如果你用快取外掛或託管服務，記得一齊清除快取。

  • 檢查 CSS 優先權問題 – 如果樣式冇套用，可以試下令選擇器更具體，覆蓋現有樣式。

  • 確保編輯正確 CSS 檔案或區域 – 再三檢查你係咪加咗代碼喺正確位置，例如額外 CSS 面板、子主題 style.css 或自訂 CSS 外掛。

  • 檢查 CSS 類別有冇錯字或錯誤 – 留意類別名稱有冇拼錯、多餘空格或用錯類別。亦要確認你針對嘅類別真係存在於表格 HTML。

  • 檢查有冇重複或衝突類別 – 確保你用緊嘅類別冇喺其他地方套用唔同樣式，否則可能會覆蓋你嘅更改。

  • 遵循一般最佳做法 – 用清晰一致嘅類別命名，每條 CSS 規則後加分號，並正確用大括號（}）結束代碼區塊。

細心檢查以上常見問題，可以確保自訂樣式正確顯示喺你網站。

範例：Contact Form 7 表格完整自訂 CSS

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #218838;
}

以下係用上述 CSS 代碼設計嘅表格範例。呢段 CSS 會自訂 Contact Form 7 表格多個主要元素外觀，包括所有文字欄位、電郵欄位同多行文字框，令佢哋有淺灰色邊框、圓角、舒適內距同一致寬度，外觀乾淨現代。

呢段代碼亦會為送出按鈕設計綠色背景、白色字、圓角同粗體易讀字體。當用戶將滑鼠移到送出按鈕時，背景會變深綠色，提供互動反饋。

加入 CSS：經典主題 vs 區塊主題

本指南介紹用 CSS 為 Contact Form 7 表格設計樣式嘅步驟，適用於 WordPress 經典主題。經典主題（如熱門嘅 Astra）會用自訂器，你可以喺「額外 CSS」區域輕鬆加入自訂 CSS，方便設計表格並即時預覽效果。

但如果你嘅網站用區塊主題（有時叫全站編輯或 FSE 主題），步驟會唔同。區塊主題未必有自訂器或「額外 CSS」欄位。你要用網站編輯器（Site Editor）做設計更改。雖然可以調整全局顏色、字體同版面，但唔一定可以直接喺介面加自訂 CSS。

如果你用緊區塊主題應該點做

  • 打開 WordPress 控制台，前往外觀 > 編輯器（網站編輯器）。

  • 喺網站編輯器搵 Styles 面板（半遮蓋圓形圖示）。

  • 部分區塊主題而家會喺 Styles 面板提供「額外 CSS」選項，但要視乎主題同 WordPress 版本。

  • 如果冇得加自訂 CSS，可以用 WPCode 等外掛全站加 CSS。WPCode 易用又適合新手，任何主題都啱用，即使主題唔支援直接編輯 CSS 都可以設計表格。不過要留意，安裝呢個外掛可能會影響網站其他現有表格嘅樣式。

其他資源

為 Contact Form 7 表格設計樣式係簡單但強大嘅方法，可以提升網站用戶體驗。只需幾行 CSS，就可以令表格同品牌風格融為一體。

必須提供有效的電郵地址