Customize your survey design
Change colors, fonts, backgrounds, and smiley faces on your tablet, link, or widget survey.
- You need admin access to do this. About roles
The Design tab lets you style how your survey looks on an ExpressTabA tablet-based feedback device for longer surveys. Supports branching and multi-question flows. tablet, a Feedback Link, or a Website Widget. It has two modes: Simple (visual controls) and CSS (raw code).
Open the Design Tab
- Go to Admin → Touchpoints in the sidebar.
- Navigate to the Location or Website that holds the Touchpoint.
- Single-click it to open the details panel, then click the pencil icon.
- Go to Step 2 — Touchpoints and click the Touchpoint you want to edit.
- Switch to the Design tab at the top of the modal.
Simple Mode
Visual controls — no code needed. The editor has four sections.
Background
- Upload image — Drag and drop or select a file. Only available on tablets.
- Select your color — A color overlay on top of the background image (or as the sole background on widgets).
- Color overlay transparency — Controls how much of the image shows through.
- Image position — How the image is sized and placed:
| Option | What it does |
|---|---|
| Fill | Covers the entire area, may crop the image |
| Fit | Shows the entire image, may leave empty space |
| Tiled | Repeats the image as a pattern |
| Centered | Places the image at its original size in the center |
Font
Pick a font from the dropdown. 29 options are available (including Google Fonts such as Lato, Roboto, Montserrat, Open Sans, and Poppins). The default is Lato.
Colors
Six color pickers control different parts of the survey:
| Label | What it controls |
|---|---|
| Question and description text color | The main text for questions and descriptions |
| Theme color 1 | Navigation icons, free-text button icons. Hover over the info icon for the full list. |
| Theme color 2 | Active answer button highlight, scrollbar, progress bar. Hover over the info icon for the full list. |
| Answer background color | The background of answer buttons |
| Answer text color | The text on answer buttons |
| Smiley face line color | The outlines, eyes, and mouths of smiley faces |
Smiley Faces
Click any of the five smiley faces to select it, then use the color picker to set its fill color. From left to right: Very Negative, Negative, Neutral, Positive, Very Positive.
The outline color (eyes, mouth, border) is controlled separately by the Smiley face line color picker in the Colors section above.
Advanced CSS Mode
Switch to CSS mode for full control. Write custom CSS directly in the text area.
Advanced CSS is a premium feature. If the tab is disabled, your subscription does not include it. Contact your account manager for upgrade details.
Differences by Touchpoint Type
The Design tab works the same way across all types, with a few exceptions:
- Background image — Tablets support image upload. Links and widgets only support a background color.
- Image position — Only available on tablets (since links and widgets have no image).
- Theme color 1 and 2 — Control slightly different elements depending on the touchpoint type. Hover over the info icon next to each color to see what it affects.
Good to Know
When you change a widget's or link's design, it can take up to 20 minutes for the change to appear. Tablet changes apply on the next sync.