如何在 Google Forms 中用 CSS 修改樣式
"能把兩個以上的欄位放在同一行，以節省空間"- Google Docs Editors Community
有人請您讓表單符合組織的設計，但 Google Forms 的主題選項只能做到某個程度。您可以變更頁首圖片、顏色和字型，但問題只能維持單欄，標題列和間距也只能照 Google 的設定。把表單嵌入網站也沒有用，因為網站的 CSS 無法作用到 iframe 裡面。使用 Formfacade，您可以把表單切換成兩欄、設定顏色，其餘部分再加入您自己的 CSS。
以下是變更 Google Form 外觀的三種方法，以及各自的不足之處。
需求：
在 COVID-19 危機期間，Centre of Small & Medium Enterprises 定期舉辦線上培訓課程，協助中小企業和員工為重新營業時的安全措施做好準備。這個中心希望打造一份像這樣簡潔俐落的培訓報名表單。
1. 在 Google Forms 中自訂主題
Google Forms 讓您選擇頁首圖片、主題顏色、背景顏色和字型。不足之處：問題只能維持單欄，您也無法單獨變更標題列、間距或按鈕。如果您把表單嵌入網站，網站的 CSS 也無法作用到 iframe 裡面。
2. 自己建立 HTML 表單
在您的網站上撰寫一個 HTML 表單，用每個問題的 entry ID 把每個答案送到您的 Google Form。
不足之處：您得找出每個 entry ID，每次表單變動就更新程式碼，還得自己處理錯誤。
3. 使用 Formfacade 和您自己的 CSS
Formfacade 幫助他們把上面的 Google Form 設計成他們想要的樣子。
我會用詳細的逐步指南，帶您走過這份表單的改造過程。跟著我一起自訂表單元素並加入 CSS，讓它符合想要的樣式。
步驟 1：準備要自訂的表單
- 點選 建立您的表單，為表單命名，點選 Build form，再點選 Proceed。
- 點選「Preview」分頁
2. 點選側邊欄的「LAYOUT」分頁，選取「Comfortable」將版面改為 2 欄。點選「Apply to this form」。
3. 在同一個側邊欄中，點選「THEME」分頁變更表單的顏色。「Apply to all forms」按鈕會把這些顏色套用到您所有的表單。
4. 看看您的表單經 Formfacade 改頭換面後的樣子，並和範例表單比較一下。
快完成了，對吧？但先等等！
標題還有一些小地方需要調整
- 標題必須是緋紅色：十六進位碼 #DC143C 或 rgb(220,20,60)
- 標題需要白色長條背景，並從一端延伸到另一端。
- 說明必須維持黑色。並且置中。
- 各處的內距都需要調整。
5. 讓我們用「Inspect element」看看哪些 CSS 適合。
6. 我在「Inspect element」中做了這些調整，得出下面這段 CSS 程式碼。
.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}7. 現在讓我把程式碼加到表單中。我點選「EDIT」，點選表單標題，再點選 ⚙️ 圖示，然後點選「Advanced」分頁，把程式碼加到「Custom CSS」中。點選「Save」。
8. 觀看下面的影片，看看我逐一加入程式碼時，表單如何變化。
這就是最終的表單。看起來很棒，對吧？
您覺得這樣的自訂如何？讓我們看看您的設計，請寫信到 support@formfacade.com。
額外收穫！
以下是比較 Google Forms 和 Formfacade 能做哪些自訂的表格。
1. 從這張表中找出您的表單或欄位想要的自訂項目。
2. 點選連結的文章，查看達成您想要之設計的詳細逐步教學。
讓您的 Google Form 在網站上好看又出色。祝您設計愉快！
| 表單 | Google Forms | Formfacade |
|---|---|---|
| 版面配置 | 標準單欄 | 多欄 |
| 背景/主題顏色 | 是 | 是 |
| 按鈕顏色 | 否 | 是 |
| 表單欄位 | 否 | 是 |
| 變更字型設定 | ||
| 字型顏色 | ? | 否 |
| 字型樣式 | 是 | 是 |
| 進階 CSS 樣式 | 否 | 是 |
| 欄位 | ||
| 變更預留位置文字 | 否 | 是 |
| 外觀（隱藏/唯讀） | 否 | 是 |
| 變更問題名稱 | 否 | 是 |
| 預先填寫 | 是 | 是 |
| 計算欄位 | 否 | 是 |
| 進階自訂（文字格式：粗體、斜體） | 否 | 是 |
| 轉換追蹤 | 否 | 是 |
| Hotjar 整合 | 否 | 是 |
| 檔案上傳 | Drive，需要登入 | 是 |
摘要
最後更新：