SurveyMonkey
使用 CSS 設計調查問卷樣式
Enterprise 功能：如果您有興趣，請聯絡銷售人員。如果您已有 Enterprise 帳戶，請聯絡您的客戶成功經理。
Enterprise 主要管理員可以新增 CSS，建立自訂調查問卷佈景主題，為您的調查問卷外觀設計品牌。
建立自訂 CSS 佈景主題
主要管理員能為自訂調查問卷佈景主題新增 CSS，使其符合您的視覺資產、字型、色彩和樣式偏好設定。
在資源庫中新增自訂佈景主題：
- 從主導覽中選取「我的團隊」並選取「資源庫」。
- 選取「+ 新增項目」(新增項目)。
- 選擇 CSS 佈景主題。
- 在您偏好的 CSS 編輯工具中選取複製代碼並貼上。
- 自訂程式碼，將程式碼新增至自訂佈景主題下的方塊，並選取產生預覽來預覽。
- 選取「儲存」。
提示！在傳送調查問卷之前，請先預覽您的自訂 CSS 佈景主題。
- 使用調查問卷預覽檢視您的 CSS 自訂佈景主題
更新自訂 CSS 佈景主題
儲存自訂 CSS 佈景主題後，就只有主要管理員才能編輯或變更頁面元素。
編輯自訂佈景主題：
- 從主導覽中選取「我的團隊」並選取「資源庫」。
- 選擇 ... 並按一下更新。
- 選擇 CSS 佈景主題。
- 在您偏好的 CSS 編輯工具中選取複製代碼並貼上。
- 自訂程式碼，將程式碼新增至自訂佈景主題下的方塊，並選取產生預覽來預覽。
- 選取「儲存」。
團隊成員無法變更或編輯套用自訂 CSS 佈景主題的調查問卷的個別元素。
自訂頁面元素
一般屬性
| CSS 屬性 | 字串值 |
| 字型體系 | 您的組織可能有偏好的字型體系。您也可以查看 CSS 網路安全字型，瞭解更多創意。 |
| 字型大小 | 數字，例如 32px |
| 色彩 | 使用色彩挑選器產生您所用色彩的 RGBA 值。 |
| 背景色彩 | 可以是 HEX 代碼或 RGBA 值。 |
頁面標題
您可以新增頁面標題至調查問卷的不同頁面，使其看起來整體美觀。
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
- 變更字型樣式
- 變更字型粗細
- 變更文字裝飾
調查問卷標題
除非您選擇隱藏標題，否則當受訪者填寫調查問卷時，調查問卷標題便會出現在每個調查問卷頁面頂端。
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- 變更字型樣式
- 變更字型粗細
- 變更文字裝飾
調查問卷頁面
顯示在調查問卷問題後面的背景顏色。只有在您未新增背景影像時，調查問卷背景色彩才會顯示。
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
提示！使用色彩挑選器產生您所用色彩的 RGBA 值。
問題標題
您可以自訂問題文字在各種問題類型中的顯示效果。
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- 變更字型樣式
- 變更字型粗細
- 變更文字裝飾
問題內文
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- 變更字型樣式
- 變更字型粗細
- 變更文字裝飾
按鈕
調查問卷受訪者可使用這些按鈕來瀏覽調查問卷。當受訪者按下調查問卷每一頁上的下一頁或完成按鈕時，系統便會儲存回覆並提交。
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- 變更字型粗細
錯誤
如果受訪者將必答問題留空，或其答案不在要求的範圍或限制內，系統便會向受訪者顯示錯誤訊息。
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- 變更字型樣式
- 變更字型粗細
- 變更文字裝飾
結束連結
離開連結會顯示在每個頁面的右上角，方便受訪者在不儲存目前頁面上輸入的回覆的情況下離開調查問卷。
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- 變更字型粗細
頁面版面配置
您可以使用頁面版面配置來選擇背景色彩或影像的顯示方式和位置。
#pageLayout {
layout: banner;
opacity: 0.0;
}
提示！將不透明度設定為 100，可顯示純色背景。