simple NPS survey with Insight Stash

Creating Simple NPS Survey

May 19 2017

Insight Stash gives you a full creative freedom in how your survey functions and looks. It is very easy to get lost in the functionality available and build a longer survey than required. Let's try to focus on a single important question to ask visitors on the site. Perfect question type for an unobtrusive survey is NPS Score. Our question for the survey will be "How likely are you to recommend Insight Stash?". Do a little brainstorming with your team to identify the most important question for you to ask. It could be a question about site functionality, product feature or service quality.

It is important to stick with the question until you get enough response volume. Once your survey has gained critical response mass you should relaunch survey with the next question. This continuous loop of feedback <-> improvement will allow you to be ahead of the curve.

What is Net Promote Score?

Net Promoter Score survey measures how likely are your customers to recommend a feature or a service you are inquiring about. NPS score measures willingness on a scale from 0 to 10. 0-6 are detractors and would not recommend your service to others. 7-8 are passives. 9-10 are promoters and are very likely to recommend your business. NPS is measured by subtracting % of detractors from % of promoters. In other words, if out of 10 customers 6 are promoters, and 2 are detractors you NPS score is: 60% - 20% = 40%.

This is a very short description of what Net Promoter Score is. Read up about NPS score online there are tons of articles available.

Net Promoter Score

Design Considerations

Remember, we are building a seamless, unobtrusive 1 question survey for the site. For this implementation, it is better to step away from standard "Form" type surveys that popup in the center of the page, in favor of a "slide in" type of a survey. Our recommendation is to design a "slide in" survey at bottom right corner of the page, or center right at the same location as feedback button. We are going to design a survey that shows up once a user scrolls past 50% of the page, and it will appear in the lower right corner.

We will also need to consider mobile users and design survey form accordingly. For purpose of this article we are going to exclude this survey for mobile audience using Insight Stash "Target" addon. If you would like to show this survey to mobile users also we would recommend full page display design for mobile screen.

Requirements

We are planning to heavily customize the appearance of our NPS Survey, make sure you have "Custom CSS" addon enabled for your account. If you are also planning to not display this survey for mobile devices - "Targeting" addon is recommended.

Building the Survey Form

Let's start by building a survey using the standard default theme. At this point the look does not matter, what matters is the structure. We decided to have a very simple header "Have a minute?". Nothing more is required. It is a perfect, subtle attention request for a survey. You can also completely disable header section using custom CSS styles for this survey.

We have settled on a question in the previous section. Select "NPS Score" survey from the menu, and type in your question.

Decide if you need additional helper text for the question and optional message for the survey. If not blank both of those fields out.

It is important to allow an opportunity to explain provided rating to your visitors. In order to implement this, we will add step #2 which will only include textbox with a simple message "Leave a comment". We suggest not setting any of the fields as mandatory to improve survey conversions.

Remember Insight Stash is flexible, and visitors that do not want to leave text feedback can submit a survey on page 1 without ever going to page #2.

Here is what our survey looks like with default theme:

Survey Structure

PERFECT! That is it, the structure for your survey is prepared.

Modifying the design

Now on to the most important section. We need to modify survey CSS file to match our needs. We can start with default CSS survey, and modify it to our liking. You can download default CSS style from "CSS Files" section in the control panel.

Download Default CSS Theme

Setting survey size

Since we are building a "slide in" survey which will not be centered on the page, we are going to keep survey dialog small. 300px by 250px should be enough for a simple 1 question NPS survey. Modify the below portion of the css file to include new dialogue sizes:

/* Survey container Desktop*/
@media (min-width: 768px)
{
  #stash.stash-modal {
    width: 300px;
    height: 250px;
    position: fixed;
Display Location

Our survey needs to appear in the lower right corner of the window. So let's align it using "bottom", "right" and "margin-right" css rules.

/* Survey container Desktop*/
@media (min-width: 768px)
{
  #stash.stash-modal {
    width: 300px;
    height: 250px;
    position: fixed;
    margin-left: auto;
    margin-right: 100px;
    left: 0;
    bottom: -220px;
    right: 0;
  }
}

Above CSS theme will give us a small square survey in the bottom right corner, with only 30px sticking out. This is exactly what we were looking for. Now we need to customize other elements of survey to fit into new survey dimensions.

Header

Almost all survey elements need to become smaller. Let's redefine survey global parameters like below snippet.

/* Global parameters */
#stash {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  color: #333;
  line-height: 20px;
  text-transform: none;

}

Now let's adjust header to have smaller margins

/* Survey header */
#stash .stash-modal-header {
  padding: 8px;
  border-bottom: 1px solid #f4f4f4;
  line-height: 20px;
  overflow: hidden;
  clear: both;
}
Survey Title
/* Title */
#stash .stash-modal-header h3 {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 16px;
  color: #333;
  text-transform: none;
}
Buttons

Default theme buttons are pretty bulky. We are going to remove any styling from continue and cancel buttons, and only leave style for submit button.

/* Buttons */
#stash .stash-btn {
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  height: auto;
  letter-spacing: normal;
  margin-bottom: 0;
  margin-right: auto;
  min-width: auto;
  padding: 4px;
  text-align: center;
  text-transform: capitalize;
  vertical-align: middle;
  white-space: nowrap;
}

/* Cancel button */
#stash .stash-btn-cancel {
  float: left !important;
}

#stash .stash-btn-cancel:hover {
  color: #e7e7e7;
}

/* Submit button */
#stash .stash-btn-submit {
  background-color: #00a65a;
  color: #fff;
  margin-left: 7px;
}
#stash .stash-btn-submit:hover {
  background-color: #008d4c;
}

#stash .stash-btn-continue:hover {
  color: #367fa9;
}
NPS Score field

Surely we need to adjust NPS Score field to look sexy in the new survey. NPS score field will always have class: "stash-scale-rating". Below is the code that was modified from original Default theme.

/* NPS Score */
#stash .stash-scale-rating {
  font-size: 0;
  white-space: nowrap;
  display: block;
  width: 100%;
  height: 30px;
  overflow: hidden;
  position: relative;
}

#stash .stash-scale-rating span {
  opacity: 1;
  font-size: 18px;
  text-align: center;
  position: absolute;
  display: inline-block;
  width: 9%;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  border-radius: 5%;
  z-index: 1;
  color: #b5bbc8;
  background: #eee;
}

#stash .stash-scale-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  opacity: 0;
  width: 9%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
  cursor: pointer;
}
Miscellaneous

And finally let's adjust margins on body and form fields.

/* Survey body */
#stash .stash-modal-body {
  position: relative;
  padding: 8px;
  line-height: 20px;
}

/* Survey footer */
#stash .stash-modal-footer {
  padding: 8px;
  margin-top: 8px;
  text-align: right;
  border-top: 1px solid #f4f4f4;
}

/* All form groups */
#stash .stash-form-group {
  position: relative;
  margin-bottom: 3px;
  margin-top: 3px;
}

Design adjustments results

Let's check how our simple NPS survey looks like now. Upload final CSS file, and apply the theme to our survey.

Simple NPS Survey Form Slide In

As you can see new survey is much more compact, with smaller sections. This is exactly what we were looking for. But there is something else that is missing.

Display Rules

We have talked in the beginning, that this survey is going to be displayed automatically on half page scroll. Let's set correct options for that right now.

Simple NPS Survey Options

Set correct:

  • CSS Theme
  • Fire Rule - After scrolling to the middle
  • Disable Load Animation

Final touches

Perfect. Our survey currently loads, but does not actualy show up. Well at least not completely, only the header is visible like so:

Not complete NPS Survey

Which looks cool, but completely unusable. What we need to do, is modify our CSS theme to ensure survey will slide out when visitors hover over it. We need to implement final CSS modification - transition:

/* Survey container Desktop*/
@media (min-width: 768px)
{
  #stash.stash-modal {
    width: 300px;
    height: 250px;
    position: fixed;
    margin-left: auto;
    margin-right: 100px;
    left: 0;
    bottom: -220px;
    right: 0;
    transition: bottom 0.8s ease;
  }

  #stash.stash-modal:hover {
    bottom: 0;
  }
}

As you can see in the above css code, we have added new style for "hover" state, with "bottom: 0". This will ensure that survey slides out once visitor hovers over it. To make transition smooth, we have added "transition" rule to the #stash.stash-modal element.

Result

And here is how the new NPS survey looks like. Pay attention to the lower right corner of the window.

Other thoughts

Insight Stash is a very flexible platform which will allow you to build Survey and Feedback forms that match your site style and business requirements. With little adjustments, you can make survey forms look the way you need them to look.

You can download CSS file used for this blog post here. Remember only NPS and Textbox questions are adjusted to look correctly in the small survey in this css file.