Styles Templates are the primary way that surveys and reports are branded and styled in Checkbox. You can create one or more Style Templates with custom logos, backgrounds, fonts, and colors and apply those templates to one or more surveys or reports. This guide will show you how to create a new Style and apply it (and other appearance configurations) to a survey.
NOTE: Additional customization options are available by editing the css of your survey directly. You can find more information about this option in our Developer Center.
CONTENTS:
- Create New Style
- Configure Style
- Body Styles
- Content Frame
- Fonts and Colors
- Matrix Styles
- Other Styles
- Progress Bar and Buttons
- Header and Footer
- Apply Survey Style to a Survey
- Preview Survey
Create a New Style Template
Style templates are created and modified in the Style Manager. You have the option to import a style from and XML file or create a new style from scratch.
Select +Survey Style to create a new style template.
Name your style and, if desired, select a Base Style to use as a template from the drop-down list of existing styles.
Next, determine whether the style will be Public (available for any Checkbox administrator to use on surveys) and/or Editable (available for any Checkbox administrator to modify from its original configuration). Finally, select Save to begin configuring your new style.
Configure Survey Style
Styles are modified in the Style Editor. You can return to the Style Manager by selecting Cancel or Save at the bottom of the Preview pane. Remember to always save your changes before navigating away from the Style Editor.
The left side of the Style Editor contains your expandable editor toolbars:
- Body Styles
- Content Frame
- Fonts and Colors
- Matrix Styles
- Other Styles
- Progress Bar and Buttons
- Header and Footer
Expand each of these toolbars by clicking the right-facing arrows on the toolbar title.
The right side of the Style Editor is your preview window, which will update automatically as you make changes on the left.
Body Styles
Body Styles settings include:
- Background Color: Set the background color but clicking the color picker.
- Background Image: Select More Options button to add a background image. A window will appear asking you to determine the location of your image and configure image settings.
- Body Font: Select desired font style and size from the drop-down lists provided. You may also change the font color using the color picker. For advanced font settings select More Options.
- Item Spacing: Item spacing is the space between survey items on a page. Change the item spacing by entering a pixel number in the text field provided.
Content Frame
The Content Frame is the area of the screen your survey content will be displayed in.
- Background Color: Set the background color of your content frame using the color picker.
- Frame Border: Set the width, style, and color of your content frame border.
- Content Frame Max Width: The maximum pixel width the content frame will stretch to. Max width must be at least 800px.
- Content Frame Min Width: The minimum pixel width the content frame will shrink too. Min width cannot be less than 800px.
Fonts and Colors
Set desired Fonts and Colors for the various text items in your survey. Select More Options for advanced font settings.
Matrix Styles
The style configurations you set under Matrix Styles will only be visible on surveys that include Matrix Items. Select More Options for advanced font settings.
Other Styles
The style configurations you set under Other Styles will only be visible on surveys that include Matrix Items.
Progress Bar and Buttons
Within this style category, you can configure the size and color of a survey’s Progress Bar. Progress bars give respondents a visual indication of their progress within a survey. The progress bar style configurations you set here will only be visible on surveys that have the progress bar enabled in the Survey Editor (see Appearance section below).
The font and color of surveys’ Navigation Buttons can also be customized here.
Header and Footer
- Select to edit the header or footer
- Insert/Edit image button
- Import file button
Upload a logo, watermark, or insert text to create a header and/or footer. The header and footer display on every page of your survey.
Use the Edit drop-down to move between the Header and Footer editors.
To upload an image, select the File Upload icon from the editor toolbar.
Apply Survey Style to a Survey
From the Survey Manager, select the survey you wish to apply a style to. The survey’s dashboard will expand to the right.
Select Edit Survey.
Select Configure from the Survey Editor, then navigate to the Appearance tab.
Select desired Survey Styles from the drop-down lists. Checkbox’s mobile browser detection will identify the browser/device-type a respondent is using and apply the appropriate default style to the survey.
NOTE: If you have not created (or choose not to apply) a style for Mobile devices, the survey will use the default Web style for all browser types.
While you are on the Appearance tab, you can also configure other appearance options. These settings are specific to the selected survey.
- Display Survey Title: Displays at the top right-hand corner of a content frame on every page of the survey. The title text is configured under the Languages &Text tab.
- Display Progress Bar: Displays at the top right-hand corner of a content frame on every page of the survey. Will fill as respondent moves through survey.
- Display Page Numbers: Displays at top right-hand corner of the content frame as “page_of_” on every page of survey. If Progress Bar is enabled, Page Numbers display below bar.
- Show Item Numbers: Display to the left of survey question label text.
- Auto Adjust Page/Item Numbers: If you have conditional or branching logic in your survey, enabling this option will ensure all pages and item numbers adjust based on which pages/items are shown.
- Randomize Items in Pages: Randomizes the order of questions and items on each survey page.
- Display Javascript Alert: Displays a pop-up alert (in addition to default error text) if a respondent fails to complete a required question or an answer format is invalid.
- Designated Required Items: Displays a red asterisk (*) to the left of question text to indicate a required question.
CHECKBOX TIP: Hover over the blue tool tips for setting details.
Enabled appearance options will save automatically.
Preview Survey
Preview the survey after applying a survey style and appearance options by selecting the Preview button. You can select to view your survey on three types of devices.
