Survey style

Your survey doesn’t have to look generic. You can customise its appearance with your brand logo, colours, and even custom CSS—so it feels like a natural extension of your brand rather than a third-party form.

---

Add logo to survey

Here’s how to add a logo to the header of each survey page:

Survey Editor (Legacy)

1. Upload the image to the survey Resources folder

   • Click on Resources
   • Click Upload
   • In the Upload Resources dialog box, make sure the Resources folder is selected as the upload location, and click Upload
   • Locate and select the logo to be uploaded, then click Open
   • The uploaded logo will be displayed in the Resources list — click on it to preview the file (click Refresh to refresh the list if required)
   • Close the Manage Resources dialog box

2. Add the logo to the survey template

   • Click on Properties
   • Click on the Style tab
   • In the Desktop Logo dropdown, select the uploaded logo file
   • Click OK

3. Save the survey

Survey Editor (Beta)

1. Upload the image (see Upload a file to Resources)

2. Add the logo to the survey template

   • Click More editor actions (⋮) > Properties
   • Click on the Style tab
   • In the Logo dropdown, select the uploaded logo file. Only PNG, JPG and GIF files are listed.
   • Click SAVE

3. Save the survey

---

Upload a file to Resources

Each survey has its own Resources: the images, stylesheets and other files it uses. In Survey Editor (Beta):

1. Click the Resources icon in the header. The Manage Resources dialog opens.
2. Click Upload
3. In Choose location, select Resources folder (or Skins folder for stylesheets, or Data folder for data files such as CSV)
4. Choose the files to upload. You can upload several at once.
5. Click Upload, then Close

Each file can be up to 50 MB. If you upload a file with the same name as an existing one, it replaces it. To replace a file, you can also click its Re-upload file icon in the list. To delete a file, click its Delete file icon and confirm.

Uploads, replacements and deletions show straight away in the resource list, the Logo drop-down in Properties and Choose a project resource in the rich text editor. You don’t need to refresh the page.

Get a file’s web address

In Survey Editor (Beta), click a file in the Manage Resources list. Below its preview (or contents, for a text file such as a stylesheet), you’ll see the file’s full web address, the same one the live survey uses. Click the Copy link icon to copy it, or Open in new tab to view the file. Anyone with the link can open the file.

---

Change colours

The colour of survey elements such as buttons and the progress bar are controlled via Cascading Style Sheets (CSS). The quickest way to brand your survey is to swap out the default accent colour.

1. Click on Resources (the Resources icon in the header in Survey Editor (Beta))
2. Click on skin/skin.surveyspa.css in the Resources list — this opens the CSS file in the Contents window on the right
3. Locate the default accent colour #44ac80 (a green) and replace it with the hex code for your brand colour. The easiest approach is to copy the entire CSS into an external text editor, do a find-and-replace, then paste it back into the Resources Content window
4. Click Save, then close the Resources window

Skin style resets your changes

In Survey Editor (Beta), the project properties have a Skin style setting. Choosing Default or Accessible replaces skin.surveyspa.css straight away, and any changes you’ve made to it are lost. You’re asked to confirm first. Copy your CSS somewhere safe before changing the skin style.

Pro tip

Use your browser’s colour picker or a tool like Google’s colour picker to grab the exact hex code for your brand colour.

---

Understanding the CSS skin files

Each survey has its own set of CSS skin files stored in the skin/ folder within the survey’s resources:

File	Purpose
skin/skin.surveyspa.css	The main skin file — controls colours and styling for all survey elements
skin/skin.desktop.css	Desktop-specific layout
skin/skin.mobile.css	Mobile-optimised layout
skin/skin.tablet.css	Tablet-optimised layout
skin/skin.flat.css	Alternative flat design layout

The skin.surveyspa.css file is the one you’ll edit most often — it’s where the accent colour, button styles, form controls, and all the visual branding lives.

Where to find the skin files

Open Resources and expand the skin folder to see and edit these files.

Survey Editor (Beta) only lists skin.surveyspa.css. The other skin files aren’t used by the survey, so it hides them.

---

CSS reference for survey elements

Here’s a breakdown of the key CSS selectors in skin.surveyspa.css. Think of this as your cheat sheet — knowing what controls what saves you a lot of trial and error.

Page layout and container

Selector	What it controls
body	Overall page background colour (default: #eee)
.se-survey-container	The main survey container (background colour, width — default 800px)
.se-survey-header	The survey header area (background colour)
.se-survey-container-header	The container header wrapper
.se-survey-content	The survey body/content area (background colour)
.SurveyFooter	The survey footer (background colour)

Buttons and navigation

Selector	What it controls
.mat-raised-button.mat-primary:not(:disabled)	The Next button (background colour, border-radius)
span.mat-button-wrapper	Button text (text-transform for uppercase)

Progress bar

Selector	What it controls
.mat-progress-bar	The progress bar container (height)
.mat-progress-bar.se-survey-percentagecomplete .mat-progress-bar-fill::after	The filled portion of the progress bar (colour)
.mat-progress-bar-background	The unfilled background pattern
.mat-progress-bar-buffer	The buffer/background colour behind the fill

Error messages

Selector	What it controls
.mat-error	Inline field validation errors (colour)
.se-page-error	Page-level error messages (colour, padding)

Radio buttons (Single Response)

Selector	What it controls
.mat-radio-outer-circle	The outer ring of radio buttons (border width)
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle	The outer ring when selected (border colour)
.mat-radio-button.mat-accent .mat-radio-inner-circle	The filled inner circle when selected (colour)
.mat-radio-group > div.se-vertical-radio-answer	Individual answer row borders and spacing

Checkboxes (Multi Response)

Selector	What it controls
.mat-checkbox-frame	Checkbox border (width, colour, border-radius)
.mat-checkbox-checked.mat-accent .mat-checkbox-background	Checked state fill colour
.mat-checkbox-layout .mat-checkbox-label	Label text line height
div.se-multi-checkbox-formgroup>div	Answer row borders and spacing

Grid questions

Selector	What it controls
.mat-radio-group.se-horizontal-radio-grid-table-row:nth-child(even)	Even row background colour
.mat-radio-group.se-horizontal-radio-grid-table-row:nth-child(odd)	Odd row background colour
.se-horizontal-radio-grid-table-row	Row border styling
.se-horizontal-radio-grid-table-row-head	Column header text (font weight, size, alignment)
.se-horizontal-radio-grid-start-anchor, .se-horizontal-radio-grid-end-anchor	Grid scale anchor labels (text-transform, font size)
.se-horizontal-radio-grid-table-cell.se-col-99	The “N/A” or extra column separator border

Grid questions (mobile view)

Selector	What it controls
.se-slider-grid-subquestion .se-subquestion-label	Sub-question label (font weight, font size)
.se-slider-grid-startanchor, .se-slider-grid-middleanchor, .se-slider-grid-endanchor	Scale anchor labels (font size, text-transform)
.se-slider-grid-anchors	Anchor container padding

Slider questions

Selector	What it controls
.mat-primary .mat-slider-thumb	The draggable thumb (colour)
.mat-primary .mat-slider-thumb-label	The value label above the thumb (colour)
.mat-primary .mat-slider-thumb-label-text	The text inside the thumb label (font size, colour)
.mat-primary .mat-slider-track-fill	The filled portion of the slider track (colour)
.mat-slider-track-background	The unfilled portion of the slider track

Stacked slider questions

Selector	What it controls
.se-stacked-slider-anchors	Anchor text (text-transform)
.se-stacked-slider-startanchor, .se-stacked-slider-middleanchor, .se-stacked-slider-endanchor	Individual anchor labels (font size)

Rating bar (0-10 scale)

Selector	What it controls
.mat-button-toggle-checked	Selected toggle button (background colour)
.mat-button-toggle-checked .mat-button-toggle-label-content>*	Selected toggle text colour
.mat-button-toggle	Individual toggle button borders
.mat-button-toggle-group	The toggle group container background
.se-single-horizontal-anchors	Scale anchor labels (text-transform)

Dropdown questions

Selector	What it controls
.mat-form-field.mat-focused.mat-primary .mat-select-arrow	The dropdown arrow when focused (colour)
.mat-option.mat-active	The highlighted option in the dropdown (background and text colour)
.se-single-dropdown .mat-form-field-infix	The dropdown field border
.se-dropdown-grid-subquestion .se-subquestion-label	Sub-question label in dropdown grids (font weight)

Verbatim (text input) questions

Selector	What it controls
.se-single-verbatim .mat-form-field-flex	Single verbatim input border
.se-multi-verbatim .mat-form-field-flex	Multi verbatim input border
.mat-form-field-ripple	The underline animation colour on focus
.mat-focused .mat-form-field-label	The floating label colour on focus
.mat-input-element	The text cursor (caret) colour

Numerical grid questions

Selector	What it controls
.se-numerical-grid-table-row-head	Row header text (font weight)
.se-numerical-grid-table-cell .mat-form-field-infix	Input cell border
.se-numerical-grid .se-numerical-grid-table-cell.row-total	Row total background colour
.se-numerical-grid .se-numerical-grid-table-cell.column-total	Column total background colour
.se-numerical-grid .se-numerical-grid-table-cell.total	Grand total cell (background colour — uses accent by default)

Multi-response numerical questions

Selector	What it controls
.se-multi-numerical .mat-form-field-infix	Input cell border
.se-multi-numerical-total .se-multi-numerical-total-text	Total display box (text colour, background colour)
span.se-multi-numerical-total-label	Total label text colour

Verbatim grid questions

Selector	What it controls
.se-verbatim-grid-table-row-head	Row header text (font weight)
.se-verbatim-grid .mat-form-field-infix	Input cell border

Date questions

Selector	What it controls
.se-date-dropdown .mat-form-field-infix	Date dropdown field border
.se-date-dropdown .mat-form-field-label	Date label font size
.se-datetime-dropdown .mat-form-field-infix	Date-time dropdown field border
.mat-datepicker-toggle-default-icon	Calendar icon colour
.mat-calendar-body-selected	Selected date background colour

Ranking questions

Selector	What it controls
button.se-ranking-clear-button.mat-raised-button.mat-primary	The clear/reset button (background colour)
.se-ranking-dropdown .mat-form-field-infix	Ranking dropdown border
.se-ranking-ranked-item-number	The rank number colour

EVE (conversational) questions

Selector	What it controls
.se-eve-probes-probe div	EVE prompt text colour
.se-eve-probes-response div	User response text (font weight, colour)
.se-eve-probes-probe img	EVE avatar icon size
.se-eve-progress-bar	EVE progress bar height
.se-eve-progress-bar.mat-progress-bar .mat-progress-bar-fill::after	EVE progress bar colour
.mat-mini-fab.mat-primary	EVE send button (border-radius, background colour)
.se-eve-input	Space between input and progress bar

Clickable image / heatmap questions

Selector	What it controls
button.se-clickable-image-reset-button.mat-raised-button.mat-primary	The reset button (background colour)
button.se-clickable-image-zoom-button.mat-raised-button.mat-primary	The zoom button (background colour)

---

Common CSS customisations

Here are some popular changes to get you started. All edits go in skin/skin.surveyspa.css.

Change the page background colour

body {
    background-color: #f5f5f5 !important;
}

Change the survey container width

By default, the survey content area is 800px wide:

.se-survey-container {
    width: 900px;
}

Change the Next button style

Make the button rounded instead of square, or change its colour:

.mat-raised-button.mat-primary:not(:disabled) {
    background: #your-brand-colour !important;
    border-radius: 4px !important;
}

Change the progress bar colour

.mat-progress-bar.se-survey-percentagecomplete .mat-progress-bar-fill::after {
    background: #your-brand-colour !important;
}

Change grid row colours

.mat-radio-group.se-horizontal-radio-grid-table-row:nth-child(even) {
    background-color: #f0f4ff !important;
}
.mat-radio-group.se-horizontal-radio-grid-table-row:nth-child(odd) {
    background-color: #ffffff !important;
}

Change the font

body {
    font-family: 'Your Font', Arial, sans-serif;
}

Change form field border colours

By default, input fields use the accent colour for their borders. To change it across all input types:

.se-single-verbatim .mat-form-field-flex,
.se-multi-verbatim .mat-form-field-flex {
    border: 1px solid #your-brand-colour !important;
}

.se-single-dropdown .mat-form-field-infix,
.se-dropdown-grid-subquestion .mat-form-field-infix {
    border: 1px solid #your-brand-colour !important;
}

Make the rating bar selected colour match your brand

.mat-button-toggle-checked {
    background: #your-brand-colour !important;
}

The quick way

For most branding, a simple find-and-replace of #44ac80 with your brand hex code across the entire skin.surveyspa.css file will get you 90% of the way there. The reference tables above are for when you want to fine-tune individual elements.

---

Preview your changes

After editing the CSS, preview the survey to see your changes in action. The preview loads the skin file with a cache-busting timestamp, so you’ll always see the latest version — no need to clear your browser cache.

1. Save the CSS changes in the Resources window
2. Click Preview to open the survey preview
3. Check the styling across different question types to make sure everything looks right

---

Frequently Asked Questions

What file types can I upload to survey resources?

You can upload images (PNG, JPG, JPEG, GIF), CSS files, HTML, video (MP4, M4V, OGV, WebM, FLV), audio (MP3), documents (PDF, XLSX, XLS, DOC, DOCX), JavaScript, and CSV files. Each file can be up to 50 MB.

What’s the difference between skin.surveyspa.css and the other skin files?

The skin.surveyspa.css file controls the visual branding — colours, borders, button styles, and form controls for all question types. The other files (skin.desktop.css, skin.mobile.css, skin.tablet.css) handle device-specific layout concerns like container widths and spacing.

I changed the CSS but my preview still looks the same — what’s going on?

Make sure you clicked Save in the Resources window before previewing. The preview uses a cache-busting timestamp so it should always load the latest version. If you’re still seeing old styles, try a hard refresh in your browser (Ctrl+Shift+R).

What’s the default accent colour?

The default accent colour is #44ac80 (a medium green). It appears 30+ times across the skin file — in buttons, radio buttons, checkboxes, sliders, progress bars, form borders, dropdowns, date pickers, ranking numbers, and EVE elements. A find-and-replace is the fastest way to swap it out.

Why do all the CSS rules use !important?

The survey engine uses Angular Material components, which come with their own default styles. The !important flag ensures your customisations override those built-in defaults. It’s not the prettiest CSS, but it’s necessary here — don’t remove it.

Can I use web fonts in my survey?

Yes — you can import web fonts (like Google Fonts) using a standard CSS @import rule at the top of your skin file, then reference the font family in your body or other element styles.

Will my CSS changes carry over when I create a new version of the survey?

Survey resources including CSS files are stored per version. When you create a new version, check that your skin files have been carried over and make any adjustments needed.

How do I reset the CSS back to the default?

If you’ve made changes that aren’t working out, you can replace the content of the skin file with the original default CSS. It’s a good idea to keep a backup copy of the original skin before making changes.

What’s the difference between the Style tab in Properties and editing the CSS directly?

The Style tab in Properties gives you high-level settings like the logo (Desktop Logo in Survey Editor (Legacy), Logo in Survey Editor (Beta)) and, in Survey Editor (Beta), the skin style. For detailed visual customisation — colours, fonts, spacing, borders — you’ll need to edit the CSS skin files directly through Resources.

Can I style EVE questions differently from regular questions?

Yes — EVE questions have their own set of CSS classes prefixed with .se-eve-. You can change the prompt text colour, response text style, avatar size, progress bar, and send button independently from the rest of the survey.

---

Common Issues and Solutions

”My logo is too large and breaks the layout”

Logos aren’t automatically resized by the survey template. If your logo is oversized, it can push the content area out of shape.

1. Resize the image before uploading — aim for a height of around 60-80px for header logos
2. Re-upload the resized logo via Resources
3. Preview to confirm it fits neatly in the header

”I changed the accent colour but some elements still show green”

The accent colour #44ac80 appears in many places across skin.surveyspa.css. If you missed a few instances, some elements will still show the old green.

1. Copy the entire CSS into an external text editor
2. Use find-and-replace to swap every instance of #44ac80 with your brand colour — make sure the search is case-insensitive, as some instances may use different casing
3. Paste it back into the Resources Content window and Save

”The Next button and other buttons look different”

The clear/reset buttons on Ranking and Clickable Image questions are intentionally styled differently (dark grey #4d4d4d) to distinguish them from the main Next button. If you want them all the same colour, update their selectors separately:

button.se-ranking-clear-button.mat-raised-button.mat-primary,
button.se-clickable-image-reset-button.mat-raised-button.mat-primary,
button.se-clickable-image-zoom-button.mat-raised-button.mat-primary {
    background-color: #your-brand-colour !important;
}

For further information about CSS, see W3Schools CSS Reference.