Survey CSS Gallery : Helpdesk

Survey CSS Gallery

Modified on: Wed, 8 Jul, 2020 at 11:41 AM

Use these examples to spice up your Surveys to be in line with your branding or campaign-specific styles.

Grab the one you like and let us know your thoughts. You can combine multiple of these CSS on the survey to stylish it the way you'd like.

Gallery

Please click on the image of your choice to be able to download the corresponding CSS.

Hover Effects

 /********************************  Scale Effect Hover Effect *******************************/

form-group .btn-info:focus, .form-group .btn-info:hover {
    background-color: #936273;
}


.form-group .btn-info.active, .form-group .btn-info:active {
    background-color: #936273;
}


/*************************************  Next Btton Hover Effect *****************************/
.buttons>div .btn-primary {
   
    vertical-align: inherit !important;
}

.btn-primary:focus, .btn-primary:hover {
    background-color: #936273 !important;
    background-position: 0 -15px;
    background-image: none;
    outline: none;
    border:none;
    outline: none !important;
    box-shadow: 0px 0px 10px 0px #936273 !important;
    
}

.btn-primary.active, .btn-primary:active {
    background-color: #936273;
    border-color: #936273;
    background-image: none;
    outline: none;
    border:none;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none !important;

    box-shadow: 0px 0px 10px 0px #936273 !important;


}

/**************************** Back Button Hover Effect *****************************/

.btn-default:focus, .btn-default:hover {
    background-color: #936273;
    background-position: 0 -15px;
    color : #fff;
    border:none;
    outline: none !important;
    box-shadow: 0px 0px 10px 0px #936273 !important;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none !important;
    box-shadow: 0px 0px 10px 0px #936273 !important;

    }

https://support.customergauge.com/helpdesk/attachments/5122107938

Round Buttons

 
/********************************* Scale Button Round Shape **************************************/
.scale .btn-info {
    border-radius: 24px !important;
    padding: 11px 0px !important;

}
.scale {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-spacing: 11px;
}

/********************************** Next Button Round Shape ************************************/
.buttons>div .btn-primary {
    border-radius: 20px;
}


/**************************** Back Button  Round Shape*******************************************/
input.btn.btn-default {
    border-radius: 20px;
    
}

https://support.customergauge.com/helpdesk/attachments/5122080170

Buttons Colors

 /******************  scale Color********************/

label.btn.btn-info {
    background-color: #CCCCCC;
}



/********************** Next Page Button Color**********************/

input.btn.btn-primary.submit {
    background: #936273;
    border-color: #936273;
}



/************************** First Name /Full Name Button Color ****************************/


.form-group .btn-info.active, .form-group .btn-info:active {
    background-color: #936273;
    border-color: #f2f2f2;
    color: #000;
    border: 1px solid #d8d8d8;
}



.form-group .btn-info {
    background-image: none;
    border-color: #f2f2f2;
    background-color: #936273;
    color: #000;
    border: 1px solid #d8d8d8;
}





/****************************   Back Button Color *******************************/

input.btn.btn-default{
    background-color: #936273;
    color:#fff;

}

https://support.customergauge.com/helpdesk/attachments/5122080164

Background Image

 
/********************** Background Image *******************************/

body
{
	
    background: url(https://d28mr3w8dh05np.cloudfront.net/CACE/20200219062041_5e4cd3b90ac01.jpeg) no-repeat fixed !important;
    background-size: cover !important;
}
.container {
   
    background-color:#ffffff !important;
}

https://support.customergauge.com/helpdesk/attachments/5122080163

Background Color

 
/****************** Body Background Color **********************/

body{

    background: #CCCCCC !important;
    background-color: #CCCCCC !important;
}
.container {
   
    background-color:#ffffff !important;
}

https://support.customergauge.com/helpdesk/attachments/5122080162

Survey Rounded Corners

 /*********************** Round Survey Background**********************/
.container {
    border-radius: 10px;
  
    }

https://support.customergauge.com/helpdesk/attachments/5122080169

Survey Spacing

 /**** Space At Top Of Survey*****/
.container {
    margin-top: 60px;
}
â€‹

 /**** Space At Bottom Of Survey********/

.footerimage img{
margin-bottom:0px !important;
}

.container {
    margin-bottom:60px;
}



/************** For Spacing On All Sides **********************/
.container {
   padding:34px;
}

https://support.customergauge.com/helpdesk/attachments/5122080168

Change Flag

 /*
|--------------------------------------------------------------------------
|
| To replace the flags, change the language code at `src` (e.g. src*="/de")
| to the desired language code. Then, change the `url` filename to one
| of the provided files. You may find all flags at the end of this file.
|
*/

/*************************** US Flag ***********************/
.language.text-right a img[src*="/en"]
{ background: rgba(0, 0, 0, 0) url(https://customergauge-static.s3-eu-west-1.amazonaws.com/css_template_flags/usa.png) no-repeat scroll 0 0 !important; height: 16px; padding-left: 16px; vertical-align: bottom; width: 16px;}

/*************************** Argentina Flag ***********************/
.language.text-right a img[src*="/es"]
{ background: rgba(0, 0, 0, 0) url(https://customergauge-static.s3-eu-west-1.amazonaws.com/css_template_flags/argentina.png) no-repeat scroll 0 0; height: 16px; padding-left: 16px; vertical-align: bottom; width: 16px;}

/*************************** Belgium Flag ***********************/
.language.text-right a img[src*="/nl"]
{ background: rgba(0, 0, 0, 0) url(https://customergauge-static.s3-eu-west-1.amazonaws.com/css_template_flags/belgium.png) no-repeat scroll 0 0;  height: 16px; padding-left: 16px; vertical-align: bottom; width: 16px;}

/*
|--------------------------------------------------------------------------
| List of Flags
|--------------------------------------------------------------------------
|
| afghanistan.png
| albania.png
| algeria.png
| andorra.png
| angola.png
| antarctica.png
| antigua-and-barbuda.png
| argentina.png
| armenia.png
| aruba.png
| australia.png
| austria.png
| azerbaijan.png
| bahrain.png
| bangladesh.png
| barbados.png
| belarus.png
| belgium.png
| belize.png
| benin.png
| bhutan.png
| bolivia.png
| bosnia-and-herzegovina.png
| botswana.png
| brazil.png
| brunei.png
| bulgaria.png
| burkina-faso.png
| cambodia.png
| cameroon.png
| canada.png
| cape-verde.png
| chad.png
| chile.png
| china.png
| colombia.png
| congo.png
| costa-rica.png
| croatia.png
| cuba.png
| cyprus.png
| czech-republic.png
| denmark.png
| dominican-republic.png
| ecuador.png
| egypt.png
| el-salvador.png
| england.png
| estonia.png
| ethiopia.png
| european-union.png
| finland.png
| france.png
| gabon.png
| gambia.png
| georgia.png
| germany.png
| ghana.png
| greece.png
| guatemala.png
| guinea-bissau.png
| guinea.png
| guyana.png
| honduras.png
| hong-kong.png
| hungary.png
| iceland.png
| india.png
| indonesia.png
| iran.png
| iraq.png
| ireland.png
| israel.png
| italy.png
| ivory-coast.png
| jamaica.png
| japan.png
| jordan.png
| latvia.png
| lebanon.png
| liberia.png
| luxembourg.png
| mexico.png
| montenegro.png
| morocco.png
| mozambique.png
| new-zealand.png
| nicaragua.png
| niger.png
| nigeria.png
| north-korea.png
| norway.png
| pakistan.png
| palestine.png
| paraguay.png
| peru.png
| philippines.png
| poland.png
| portugal.png
| puerto-rico.png
| romania.png
| russia.png
| rwanda.png
| saudi-arabia.png
| scotland.png
| senegal.png
| serbia.png
| sierra-leone.png
| singapore.png
| slovakia.png
| slovenia.png
| somalia.png
| south-africa.png
| south-korea.png
| spain.png
| sudan.png
| suriname.png
| sweden.png
| switzerland.png
| syria.png
| taiwan.png
| tanzania.png
| thailand.png
| the-netherlands.png
| thebahamas.png
| togo.png
| trinidad-and-tobago.png
| tunisia.png
| turkey.png
| ukraine.png
| united-arab-emirates.png
| united-kingdom.png
| uruguay.png
| usa.png
| venezuela.png
| vietnam.png
| wales.png
| yemen.png
| zambia.png
| zimbabwe.png
|
*/

https://support.customergauge.com/helpdesk/attachments/5122110926

Change Flag to Text

/****************** The flags need to be in the order they are enabled *******************/

/********************  First flag - English *******************/
a[href*='lang='] img
{ display: none; }
a[href*='lang=']:first-child:after
{ content: 'EN'; }

/********************  Second flag - Spanish *******************/
a[href*='lang=']:nth-child(2):after
{ content: 'ES'; }

/********************  Third flag - French *******************/
a[href*='lang=']:nth-child(3):after
{ content: 'FR'; }

/********************  Fourth flag - Dutch *******************/
a[href*='lang=']:nth-child(4):after
{ content: 'NL'; }

/********************  Last flag - Portuguese *******************/
a[href*='lang=']:last-child:after
{ content: 'PT'; }

https://support.customergauge.com/helpdesk/attachments/5122110928

Change Font Family and Color

body {
    font-family: fantasy;
    font-weight:bold;
    color: #2e2e2e;
    font-size: 17px;
}

/********************** HTML widget Text ***********************/
 b {
    font-size: 20px;
    font-family: cursive;
    font-weight: normal;
}

/********************* Questions *************************/
h2 {
    font-size: 20px;
    font-family: fantasy;
    color: #506ea1;
    font-weight: normal;
}

/************************ Scale labels text ****************************/

.labels small {
    color: black;
    font-family: italian;
    font-size: 20px;
    font-weight: normal;
}


/************************* Next/Back Page Button Text **********************/
.btn-primary {
    font-family: cursive;
    font-size: 20px;
    font-weight: normal;
}

.btn-default {
    font-family: cursive;
    font-size: 20px;
    font-weight: normal;
}

/************************* Footer Text ***************************/
footer p {
    color: #61b2c2;
    font-size: 10px;
    font-family: italian;
    font-weight: normal;
    }

/************************ Footer Links **********************/
footer p a {
    color: #b692d4;
    font-size: 10px;
    font-family: italian;
    font-weight: normal;
}

/************************ Checkbox Labels ***********************/
.checkbox label, .radio label {
    color: #b692d4;
    font-size: 10px;
    font-family: italian;
    font-weight: normal;
}


/******************** Forms and Scales text *******************/
.form-group .btn-info{
    color: #61b2c2;
    font-size: 10px;
    font-family: italian;
    font-weight: normal;
}

.form-group>label{
    color: #61b2c2;
    font-size: 10px;
    font-family: italian;
    font-weight: normal;
}

https://support.customergauge.com/helpdesk/attachments/5124771876

Did you find it helpful? Yes No

Survey CSS Gallery

Gallery

Related Articles