SurveyMonkey

使用 CSS 設計調查問卷樣式


Enterprise 功能:如果您有興趣,請聯絡銷售人員。如果您已有 Enterprise 帳戶,請聯絡您的客戶成功經理。

您可以建立自訂佈景主題,進行整體樣式變更。此外,您可以使用文字格式工具列,變更特定調查問卷問題的樣式。

Enterprise 主要管理員可以新增 CSS,建立自訂調查問卷佈景主題,為您的調查問卷外觀設計品牌。

主要管理員能為自訂調查問卷佈景主題新增 CSS,使其符合您的視覺資產、字型、色彩和樣式偏好設定。

在資源庫中新增自訂佈景主題:

  1. 從主導覽中選取「我的團隊」並選取「資源庫」。 
  2. 選取「+ 新增項目」(新增項目)。 
  3. 選擇 CSS 佈景主題。
  4. 在您偏好的 CSS 編輯工具中選取複製代碼並貼上。
  5. 自訂程式碼,將程式碼新增至自訂佈景主題下的方塊,並選取產生預覽來預覽。
  6. 選取「儲存」。

提示!在傳送調查問卷之前,請先預覽您的自訂 CSS 佈景主題。

  • 使用調查問卷預覽檢視您的 CSS 自訂佈景主題

儲存自訂 CSS 佈景主題後,就只有主要管理員才能編輯或變更頁面元素。

編輯自訂佈景主題:

  1. 從主導覽中選取「我的團隊」並選取「資源庫」。 
  2. 選擇 ... 並按一下更新
  3. 選擇 CSS 佈景主題。
  4. 在您偏好的 CSS 編輯工具中選取複製代碼並貼上。
  5. 自訂程式碼,將程式碼新增至自訂佈景主題下的方塊,並選取產生預覽來預覽。
  6. 選取「儲存」。
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;
}

提示!使用色彩挑選器產生色彩的 RBBA 值HEX 代碼

  • 變更字型樣式
  • 變更字型粗細
  • 變更文字裝飾
顯示調查問卷標題外觀的影像。

除非您選擇隱藏標題,否則當受訪者填寫調查問卷時,調查問卷標題便會出現在每個調查問卷頁面頂端。

#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,可顯示純色背景。