Using the CSS Editor in the Survey Builder you can customise the standard survey layout to your preferred style. Some of the layout features you can edit are background image or colour, logo positioning, typeface (font, colour, size), button styles/colour and more.

The editor is located in a separate tab of the Survey Builder. You can create multiple CSS templates, and decide for each survey group which of these templates you want to use by clicking on the CSS symbol (which looks a little like a mirrored 'E').

Please find below a screenshot of the CSS Editor. Using the drop down at the top left you can either select and edit an existing CSS template or create a new template - don't forget to save any edits! The system will automatically number your custom CSS templates.

Using CSS templates, you can either have a separate layout for each of your surveys, or instead reuse the same layout for multiple surveys.

Please find attached two examples of CSS code used by our customers. We have also attached a gallery of images from some recent work showing the diversity of branding supported by our system.

Please note: although applying different CSS templates to your surveys with the dropdown option is simple, actually creating CSS templates requires CSS expertise. Your CSS template should work well on different types of devices and in different browsers. If you don't have anyone with CSS expertise available in-house, we are happy to connect you with a designer.

Survey CSS Look and Feel Cook Book

Here are some handy CSS codes to change the look and feel of your CustomerGauge survey. 

Add these to your customer CSS for the survey.

1. Submit button and Score block colours

To change these elements add this to your CSS file for the survey:

.form-group, .form-group .btn-info:active {

    background-color: #75b81b;

    border: 0 none;

    color: #fff;

    margin-top: 1px;

    transform: scale(1.1);


.btn-primary {

    background-image: linear-gradient(to bottom, #468522 0px, #62a61f 100%);

    background-repeat: repeat-x;

    border-color: #75b81b;




 background-color: #62a61f;


Change this "#75b81b" to be the colour you want to buttons to be. You can/should also adjust the other colours if you want.

2. Question Look and feel

To change the look and feel of the questions add this and adjust the properties as you wish.:

 h2 {



Also see

Survey Builder

Customized Invitation Emails - Gallery