Surveys help you uncover the intentions, motivation and apprehensions of your visitors through pop-up surveys on your website.

There are various factors that determine the response rates. Appearance is one of them. A survey should be attractive enough to draw a visitors attention. But having a survey that doesn’t match the theme of your website creates a bad user experience. Hence it is imperative that a survey should match the theme of your website.

VWO On-page Surveys has 10 in-built themes which you can use. It also allows a user to customize the appearance of a survey entirely to match the website’s design language. Today, we’ll be creating a customized survey design to match a website as a case study in survey customization.

We’ll be taking the example of Coach, the provider of luxury product for women and men as an example website and create a survey and customize it to match Coach’s website.

Coach Homepage

Attention!

Since a theme is composed of styling for all the elements in a survey, it is recommended that before you create a custom theme on an actual survey, you create a sample survey with questions of each question type, welcome screen, thank you screen and “Ask your visitor for their email address” screen. This will enable you to test and verify any customization to the appearance of the survey.

I’ve created a sample survey with the 8 following questions, Welcome Screen, Thank you Screen and “Ask your visitor for their email address” screen:

Welcome Message:

<p>Welcome to this survey!</p> <p>Complete this survey to get a $50 Amazon gift card.</p> 

Displaying the welcome screen

Questions:

      1. How did you find out about Coach? – Single Line Text Box
      2. What do you expect from the maker of luxury goods? – Multiline Text Box
      3. You are looking to buy products for? – Radio Button
        • Women
        • Men
        • Other
      4. What kind of products are you looking to purchase? – Checkbox
        • Bags
        • Shoes
        • Wallets/Purses
        • Other
      5. How much are you willing to spend today? – Dropdown
        • Less than $1000
        • $1,000 – $4,999
        • $5,000 – $9,999
        • Other
      6. Which of the following luxury brands do you like? – Multi-select List
        • Coach
        • Louis Vuitton
        • Gucci
        • Other
      7. How would you rate the products of Coach? – Rating
      8. How likely are you to recommend Coach to a friend or colleague? – Net Promoter Score

Thank you message:

<p>Thank you for taking this survey!</p> 
<p>Your gift card would be emailed to you on your email</p> 

“Ask your visitor for their email address” option has been enabled.

You’ll notice, I’ve created a question of each question type, viz. single line text box, dropdown, radio button, etc. This will help me verify once I customize the styling for all those elements.

Now in the options screen, select “Position” as “Right”. Now select the “Theme” as “New Theme”. This will open two code boxes with the CSS for the Dark theme loaded. The top code box (Container CSS) has the CSS code for the survey window. The bottom code box (Content CSS) has the CSS code for all the elements inside the survey. We will now start customizing this theme.

The “Dark” theme has a dark and solid background. Coach is a maker of luxury goods and the survey should communicate the idea of luxury. So let’s replace the dark solid background with a classic pattern. You can download patterns for use from here.  Look for the following lines of code in the top code box (Container CSS):

#vwo-frame-wrapper iframe, #vwo-frame-wrapper .minimized-survey { /* To edit styling of survey container and its minimized state */ border-color: #c3cad3; background-color: #393939; } 

If you want to simply change the background color, you can change the background color property to whichever color you like. But since we want to display a classic pattern in the background, we’ll comment out the background-color property and add the following line of code.

background-image: url('//example.com/resources/images/symphony.png'); 

Attention

The image link in the CSS line above has to be an absolute link and not a relative link and should include the original domain. So..

background-image: url('//resources/images/symphony.png'); is wrong (  ) 
background-image: url('//example.com/resources/images/symphony.png'); is correct ( ✔︎ ) 

We’ll also change the border color to match the dark color of the website.

So the new CSS code will be:

#vwo-frame-wrapper iframe, #vwo-frame-wrapper .minimized-survey { /* To edit styling of survey container and its minimized state */ border-color: #dddddd; /* #c3cad3 */ background-image: url('//example.com/resources/images/symphony.png'); /* New CSS added */ /* background-color: #393939; */ } 

Tip

It’s always a good idea to keep the original values as commented code. This will help you in case you need to revert any changes to the original values.

After adding the background pattern, you’ll notice that the text is not visible. So let’s change the color of the text to make it more visible. Look for the following lines of code in the bottom code box (Content CSS):

/* To edit styling of survey header and 'main' question box */ #main, #header { color: #eeeeee; } 

Let’s change the color property to something more dark and close to gold color. After editing, the code would look like.

/* To edit styling of survey header and 'main' question box */ #main, #header { color: #A59984; /* #eeeeee */ } 

Attention!

After every change, don’t forget to save the changes by clicking on “Update Theme” and then clicking on “Update”.

Now let’s change the color of the “Next’ button. Since the “Next” button is part of the content inside the survey just like the text was, we would need to edit in the bottom code box (Content CSS). Look for the following lines of code in the bottom code box (Content CSS).

/* To edit styling of button inputs in content and footer */ #main input[type="button"], #footer input { -webkit-box-shadow: 0 3px 0 #737b85; -moz-box-shadow: 0 3px 0 #737b85; -ms-box-shadow: 0 3px 0 #737b85; -o-box-shadow: 0 3px 0 #737b85; box-shadow: 0 3px 0 #737b85; background: #ababab; } 

Let’s change the background color of the button to a slightly darker color. Since the button has an even darker shadow, even this needs to be changed. If you don’t want the shadows, simply comment the code.

We will keep the shadow, but reduce it slightly to make it less prominent. Remember that the shadow color has to be darker than the button background color. So the new code would be as follows:

/* To edit styling of button inputs in content and footer */ #main input[type="button"], #footer input { -webkit-box-shadow: 0 2px 0 #897C65; /* 0 3px 0 #737b85 */ -moz-box-shadow: 0 2px 0 #897C65; /* 0 3px 0 #737b85 */ -ms-box-shadow: 0 2px 0 #897C65; /* 0 3px 0 #737b85 */ -o-box-shadow: 0 2px 0 #897C65; /* 0 3px 0 #737b85 */ box-shadow: 0 2px 0 #897C65; /* 0 3px 0 #737b85 */ background: #A59984; /* #ababab */ } 

Now in the preview, just click on the “Next” button. This will display the first question. You’ll notice that the single line text box needs to be made more visible. This can be done by adding a dark border. Look for the following lines of code in the bottom code box (Content CSS).

#main input, #main textarea, #main #dropdown-select-box, #main li.nps-choice { /* To edit border and background of textarea, input, dropdown-select-box and nps-choice options */ border: none; background: #fafafa; } 

The border is not visible since the border property has been set to none. Let’s change that to the following:

#main input, #main textarea, #main #dropdown-select-box, #main li.nps-choice { /* To edit border and background of textarea, input, dropdown-select-box and nps-choice options */ border: 2px solid #dddddd; /* none */ background: #fafafa; } 

Now all questions in a survey are mandatory. If a mandatory question is not filled and a visitor tries to go to the next question, the survey will display a validation error. We now need to customize the color of this error message as well. So look for the following lines of code in the bottom code box (Content CSS).

/* To edit styling of error message shown in case of any error */ #error-msg { padding: 0 15px; font-size: 12px; color: #f2784b; margin-top: -5px; } 

After changing the color property, the code will be as follows:

/* To edit styling of error message shown in case of any error */ #error-msg { padding: 0 15px; font-size: 12px; color: #A59984; /* #f2784b */ margin-top: -5px; } 

We also need to change the color of the text a visitor will be entering in the single line text box. So look for the following lines of code in the bottom code box (Content CSS).

 #main textarea, #main input { /* To edit the styling of text input element */ width: 100%; cursor: text; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; padding: 6px 8px; outline: 0; font-size: 13px; color: #4a4a4a; } 

Change the color property to #897C65. The updated code will look as follows:

#main textarea, #main input { /* To edit the styling of text input element */ width: 100%; cursor: text; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; padding: 6px 8px; outline: 0; font-size: 13px; color: #897C65; /* #4a4a4a */ } 

Inserting the text box

Now click on the “Next” button to see the second question. Since a multi-line text box is simply a larger version of the single line text box, any styling changes made to the single line text box will also apply to the multi-line text box, except for the following properties:

 #main textarea { /* To edit styling of multiline text box */ font-family: Lato, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; height: 75px; resize: none; } 

Displaying the multiline text box

Since we don’t need to change the height of the multi-line text box nor do we want the visitor to be able to resize the multi-line text box, we‘ll keep the default values as is and not make any changes. Click on “Next” to see the 3rd question. The 3rd question is a radio button type question. Look for the following lines of code in the bottom code box (Content CSS).

 #main .question input[type="radio"], #main .question input[type="checkbox"] { /* To edit styling the radio and checkbox type inputs */ height: auto; width: auto; float: left; visibility: hidden; } 

The default styling for radio buttons and checkboxes is combined as shown in the following code. To be able to style radio-buttons and checkboxes, we need to separate the following CSS into CSS classes specific to radio-buttons and checkboxes.

#main .question input[type="radio"] + label.choice:before, #main .question input[type="checkbox"] + label.choice:before { margin-left: -25px; margin-right: 10px; font-size: 15px; position: relative; top: 2px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #main .question input[type="radio"]:checked + label.choice, #main .question input[type="checkbox"]:checked + label.choice { font-weight: bold; } #main .question label { cursor: pointer; font-size: 13px; } 

The classes specific to radio buttons are as follows:

#main .question input[type="radio"] + label.choice:before margin-left: -25px; margin-right: 10px; font-size: 15px; position: relative; top: 2px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #main .question input[type="radio"]:checked + label.choice { font-weight: bold; } 

We now need to introduce another class for the checked state of the radio button. You can use the following CSS code.

#main .question input[type="radio"]:checked + label.choice:before { content: "\2022"; /* Bullet */ color:white; font-size:20px; text-align:center; vertical-align: middle; line-height:14px; } 

After editing the unchecked state CSS of the radio buttons, the CSS specific to both states (unchecked and checked) of the radio button is as follows:

#main .question input[type="radio"] + label.choice:before content: ""; /* New CSS */ display: inline-block; /* New CSS */ width: 20px; /* New CSS */ height: 20px; /* New CSS */ vertical-align:middle; /* New CSS */ text-align: center; /* New CSS */ background-color: #A59984; /* New CSS */ border-radius: 15px; /* New CSS */ margin-left: -25px; margin-right: 10px; font-size: 20px; /* 15px */ line-height:16px; /* New CSS */ position: relative; top: 0px; /* 2px */ -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #main .question input[type="radio"]:checked + label.choice { font-weight: bold; } #main .question input[type="radio"]:checked + label.choice:before { content: "\25CF"; /* Bullet */ color:white; font-size:16px; text-align:center; vertical-align: middle; line-height:16px; } 

Creating radio buttons

Clicking on the “Next” button will take you to the 4th question. The 4th question is a checkbox type question. We now need to introduce another class for the checked state of the checkbox. You can use the following CSS code. The classes specific to checkboxes are as follows:

#main .question input[type="checkbox"] + label.choice:before { margin-left: -25px; margin-right: 10px; font-size: 15px; position: relative; top: 2px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #main .question input[type="checkbox"]:checked + label.choice { font-weight: bold; } #main .question input[type="checkbox"]:checked + label.choice:before { content: "\2714"; /* Tick */ color:white; font-size:20px; text-align:center; vertical-align: middle; line-height:16px; } 

After editing the unchecked state CSS of the checkboxes, the CSS specific to both states (unchecked and checked) of the checkboxes is as follows:

#main .question input[type="checkbox"] + label.choice:before content: ""; /* New CSS */ display: inline-block; /* New CSS */ width: 20px; /* New CSS */ height: 20px; /* New CSS */ vertical-align:middle; /* New CSS */ text-align: center; /* New CSS */ background-color: #A59984; /* New CSS */ border-radius: 3px; /* New CSS */ margin-left: -25px; margin-right: 10px; font-size: 15px; line-height:16px; /* New CSS */ position: relative; top: 0px; /* 2px */ -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #main .question input[type="checkbox"]:checked + label.choice { font-weight: bold; } #main .question input[type="checkbox"]:checked + label.choice:before { content: "\2714"; /* Tick */ color:white; font-size:14px; text-align:center; vertical-align: middle; line-height:18px; } 

Inserting checkboxes in a survey

Clicking on the “Next” button will take you to the 5th question. The 5th question is a dropdown type question. Look for the following lines of code in the bottom code box (Content CSS).

#main #dropdown-select-box { /* To edit the styling of 'dropdown-select-box' input */ cursor: pointer; color: #4a4a4a; font-size: 13px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; max-height: 75px; overflow-y: auto; } 

Change the color property to better match the text color to the rest of the survey colors. The updated code is as follows:

#main #dropdown-select-box { /* To edit the styling of 'dropdown-select-box' input */ cursor: pointer; color:#897C65; /* #4a4a4a */ font-size: 13px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; max-height: 75px; overflow-y: auto; } 

Creating a dropdown list

Click on the “Next” button to see the 6th question. The 6th question is a multi-sect list type of question. Since the styling for dropdowns and multi-select list boxes is exactly the same, there is no additional code or changes required here.

Inserting multi-select list

Now clicking on the “Next” button will display the 7th question. The 7th question is a Rating type of questions. Look for the following lines of code in the bottom code box (Content CSS).

#main .rating > span { display: inline-block; width: 22px; height: 22px; background: url('//dev.visualwebsiteoptimizer.com/static/0.2/survey/images/blankstar-c5eb369f3dabf5cb9ba451a32e789134.png') center no-repeat; } #main .rating > span.selected, #main .rating > span.selected ~ span, #main .rating > span:hover, #main .rating > span:hover ~ span { background-image: url('//dev.visualwebsiteoptimizer.com/static/0.2/survey/images/filledstar-eb277ac60abd394a67b9a04ad767ec6d.png'); } 

To change the default star icons, change the background property. Put the links to your own custom icons for the background property.

Attention

The image link in the CSS line above has to be an absolute link and not a relative link and should include the original domain. So..

background-image: url('//resources/images/empty.png'); is wrong (  ) 
background-image: url('//example.com/resources/images/empty.png'); is correct ( ✔︎ ) 

So the new CSS would be as follows:

#main .rating > span { display: inline-block; width: 22px; height: 22px; background: url('//example.com/resources/images/empty.png') center no-repeat; } #main .rating > span.selected, #main .rating > span.selected ~ span, #main .rating > span:hover, #main .rating > span:hover ~ span { background-image: url('//example.com/resources/images/filled.png'); } 

Inserting a rating system

Click on the “Next” button to see the 8th question. The 8th question is a Net Promoter Score (NPS) type question. Look for the following lines of code in the bottom code box (Content CSS).