Skip to content

Instantly share code, notes, and snippets.

@detain

detain/Interactive Customer Feedback Form (For a pet store).markdown

Created January 9, 2016 01:42
Show Gist options
  • Save detain/84e073ae5e44180b9287 to your computer and use it in GitHub Desktop.
Save detain/84e073ae5e44180b9287 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Customer Feedback Form (For a pet store)
Raw
index.html
.loader
.loader_inner
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l1.png'}
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw2.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l2.png'}
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l3.png'}
.div Loading feedback form...
.tut
.tut_inner
%h2 Drag the characters mouths to reflect your satisfaction
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Dec_31,_2015_22:28.gif'}
%p Ok
.question
%p ?
.feedbackform
.feedbackform_slide.first.active_slide
%img.sb.monkey{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
.grad.monkey
.feedbackform_slide__inner
%h1.question_s
%h2 Drag the cheeky monkeys mouth up or down to reflect your satisfaction!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/monkey.svg'}
.character_smile
.smiler_input
%input.monkey{:max => "20", :min => "0", :type => "range"}
%svg.smile.monkey{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.monkey
%span Average
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
.feedbackform_slide
%img.sb.rabbit{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/circback.svg"}
.grad.rabbit
.feedbackform_slide__inner
%h1.question_s
%h2 Drag the fluffy rabbits mouth up or down to reflect your satisfaction!
.character.rabbit
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rabbit.svg'}
.character_smile
.smiler_input
%input.rabbit{:max => "20", :min => "0", :type => "range"}
%svg.smile.rabbit{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.rabbit
%span Average
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
%img.sb.panda{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/hexback.svg"}
.grad.panda
.feedbackform_slide__inner
%h1.question_s
%h2 Drag the shy pandas mouth up or down to reflect your satisfaction!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/panda.svg'}
.character_smile
.smiler_input
%input.panda{:max => "20", :min => "0", :type => "range"}
%svg.smile.panda{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.panda
%span Average
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
%img.sb.lion{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
.grad.lion
.feedbackform_slide__inner
%h1.question_s
%h2 Drag the lions mouth up or down to reflect your satisfaction!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lion.svg'}
.character_smile
.smiler_input
%input.lion{:max => "20", :min => "0", :type => "range"}
%svg.smile.lion{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.lion
%span Average
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
.feedbackform_slide__inner
.col_left
%img.board{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/resultboard.png'}
.summary
.col_right
.rating.end
%span Thankyou!
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
%a{:href => 'http://codepen.io/jcoulterdesign/',:target => '_blank'} Follow me on Codepen for more cool stuff!
Raw
Interactive Customer Feedback Form (For a pet store).markdown
Raw
script.js
/* ======================================
Super Fresh Customer Feedback Concept
Author: Jamie Coulter
Date: 01.01.2016
Version: 1.0
========================================= */
// Preloader
var preload_time = 3000; // How long preload is shown
var preload_fade_speed = 400; // Preload fadeout speed
setTimeout(function() {
$('.loader').fadeOut(preload_fade_speed); // Fade out preloader
open_modal(); // Open tutorial
}, preload_time);
// End preloader
// Tutorial modal
function open_modal() {
$('.tut').addClass('poptut'); // Remove
$('.question').fadeOut(400); // Fadeout
}
function close_modal() {
$('.question').fadeIn(400); // Fadeout
$('.tut').removeClass('poptut'); // Remove
$('h1,h2').addClass('popone'); // Intro
$('.character').addClass('poptwo'); // Intro
$('.rating').addClass('popthree'); // Intro
$('.next,.prev').addClass('popfour'); // Intro
}
$('.tut p').click(function() {
close_modal(); // Close modal
});
$('.question p').click(function() {
open_modal(); // Open modal
})
// End tutorial modal
// Page slider
var slide_amount = $('.feedbackform_slide').length; // Slide count
var window_width = $(window).width(); // Init window width
var current_x = 0; // Current x value of slides
var current_position = 0; // Current position
$('.feedbackform').css('width', window_width * slide_amount + 'px'); // Set up the slides
$('.feedbackform_slide').css('width', window_width + 'px'); // Set up the slides
$('.next').click(function() {
update_answers();
var window_width = $(window).width(); // Re assess window width
if (current_position < slide_amount - 1) {
current_position++;
current_x = current_position * window_width;
$('.feedbackform_slide').css('right', current_x);
$('.active_slide').removeClass('active_slide').next().addClass('active_slide');
setTimeout(function() {
$('.active_slide').find('.popone').removeClass('popone'); // Reset animations
$('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
$('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
$('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
}, 10)
setTimeout(function() {
$('h1,h2').addClass('popone'); // Reset animations
$('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
$('.rating').addClass('popthree'); // Reset animations
$('.next,.prev').addClass('popfour'); // Reset animations
}, 410)
}
});
$('.prev').click(function() {
update_answers();
var window_width = $(window).width();
if (current_position > 0) {
current_position--;
current_x = current_position * window_width;
$('.feedbackform_slide').css('right', current_x);
$('.active_slide').removeClass('active_slide').prev().addClass('active_slide');
setTimeout(function() {
$('.active_slide').find('.popone').removeClass('popone'); // Reset animations
$('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
$('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
$('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
}, 10)
setTimeout(function() {
$('h1,h2').addClass('popone'); // Reset animations
$('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
$('.rating').addClass('popthree'); // Reset animations
$('.next,.prev').addClass('popfour'); // Reset animations
}, 410)
}
});
$(window).resize(function() { // Responisivity
var window_width = $(window).width(); // Window width
$('.feedbackform').css('width', window_width * slide_amount + 'px'); // Re jig slide sizes
$('.feedbackform_slide').css('width', window_width + 'px'); // Re jig slide sizes
current_position = 0; // Reset
current_x = current_position * window_width; // Reset
$('.feedbackform_slide').css('right', current_x); // Reset
$('.active_slide').removeClass('active_slide')
$('.first').addClass('active_slide');
});
// End page slider
// Questions
var questions = ['How satisfied are you with our services?', 'How satisfied are you with your pet?', 'How was our staff?', 'How was the cleanliness of our store?']
var q = 0;
$('.question_s').each(function() {
$(this).html(questions[q])
q++;
})
// Summary
var answers = []
var animals = ['monkey', 'rabbit', 'panda', 'lion']
for (i = 0; i < animals.length; i++) {
answers[animals[i]] = ['Average']
}
function update_answers() {
$('.summary').html('');
for (i = 0; i < questions.length; i++) {
$('.summary').append('<p>' + questions[i] + '</p><p class="answer_p">' + answers[animals[i]][0] + '</p>')
}
}
// Messages
var monkey_messages = ['terrible', 'bad', 'not great', 'average', 'good', 'excellent', 'amazing']; // Monkey array
var rabbit_messages = ['dissapointed', 'unhappy', 'not great', 'average', 'pleased', 'happy', 'super happy']; // Rabbit array
var panda_messages = ['terrible', 'bad', 'not great', 'average', 'good', 'excellent', 'amazing']; // Panda array
var lion_messages = ['very dirty', 'dirty', 'needs work', 'average', 'clean', 'very clean', 'Superb']; // Lion array
// The smile
$('input').mousedown(function() {
$('input').css('cursor', '-webkit-grabbing'); // Change cursor
$('input').css('cursor', '-moz-grabbing'); // Change cursor
});
$('input').mouseup(function() {
$('input').css('cursor', '-webkit-grab'); // Change cursor
$('input').css('cursor', '-moz-grab'); // Change cursor
});
var smile_value;
$('input').mousedown(function() {
var active_smile = $(this).attr('class').split(' ').pop(); // Get active smile
s = setInterval(function() {
// Change smile svg coords
smile_value = $('input.' + active_smile).val(); // Get the value
$('.smile.' + active_smile + ' path').attr('d', 'M10 10 C 20 ' + smile_value + ', 40 ' + smile_value + ', 50 10');
// Select relevant array
if (active_smile == 'monkey') {
var active_array = monkey_messages; // Monkey array
} else if (active_smile == 'rabbit') {
var active_array = rabbit_messages; // Rabbit array
} else if (active_smile == 'panda') {
var active_array = panda_messages; // Panda array
} else if (active_smile == 'lion') {
var active_array = lion_messages; // Lion array
}
answers[active_smile] = [$('.rating.' + active_smile + ' span').html()]; // Push to answers
$('.sb.' + active_smile).css('opacity', (smile_value / 60)); // Pattern opacity
$('.grad.' + active_smile).css('opacity', (smile_value / 40)); // Gradient opacity
if (smile_value == 0) {
// Worst
$('.rating.' + active_smile + ' span').html(active_array[0]); // Set message
} else if (smile_value < 10 && smile_value > 5) {
// Bad
$('.rating.' + active_smile + ' span').html(active_array[1]); // Set message
} else if (smile_value < 5 && smile_value > 0) {
// Not good
$('.rating.' + active_smile + ' span').html(active_array[2]); // Set message
} else if (smile_value == 10) {
// Average
$('.rating.' + active_smile + ' span').html(active_array[3]); // Set message
} else if (smile_value > 10 && smile_value < 15) {
// Good
$('.rating.' + active_smile + ' span').html(active_array[4]); // Set message
} else if (smile_value > 15 && smile_value < 20) {
// Very good
$('.rating.' + active_smile + ' span').html(active_array[5]); // Set message
} else if (smile_value == 20) {
// Amazing
$('.rating.' + active_smile + ' span').html(active_array[6]); // Set message
}
}, 10)
});
// Clear interval
$('input').mouseup(function() {
clearInterval(s); // Clear intervals
});
// To do
// Code tidy
// CBT CDT
// Finish last slide
// Would be nice
// Things appear on the board, banans etc
// summary page?
// Eyes follow you?
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
// Fonts
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Crete+Round);
//Styles
.question{
position:absolute;
top:20px;
right:20px;
z-index:3;
display:none;
p{font-size:40px;color:white;cursor:pointer;margin:0;}
}
.tut{
background:white;
padding:0px;
width:760px;
margin:auto;
transition:all .3s;
//display:none;
border-radius:7px;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%) scale(0);
left:0;
right:0;
z-index:3;
h2{
font-size: 20px;
color: #C39681;
width: 370px;
margin: 50px auto 30px auto;
}
p{
color: #C39681;
border-top: 1px solid #FCF1EC;
border-bottom-right-radius: 7px;
padding-top: 30px;
border-bottom-left-radius: 7px;
background: #FFF3ED;
transition:all .3s;
cursor: pointer;
margin: 20px 0px 0px 0px;
padding-bottom: 30px;
&:hover{
background:#7B6358;
color:white;
}
}
}
.loader{
position:fixed;
z-index:3;
width:100%;
height:100%;
background:#c39681;
&_inner{
text-align:center;
position:absolute;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
margin:auto;
div{
color: rgba(255, 255, 255, 0.52);
font-size: 16px;
margin-top: 40px;
opacity:0;
animation:load .6s .3s forwards
}
.pawone{
top:-10px;
}
.pawtwo{}
img{
margin-right:17px;
width:30px;
position:relative;
opacity:0;
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
animation: load 1s (0.4s + $i/3) linear forwards;
}
}
@keyframes load{
0%{opacity:0}
100%{opacity:1}
}
}
}
}
body{
font-family: 'Varela Round', sans-serif;
padding:0;
margin:0;
overflow:hidden;
.feedbackform{
.end{
width: 400px !important;
height: 75px;
img{
top: 42px !important;
}
}
&_slide{
overflow:hidden;
float:left;
height:100vh;
right:0;
position:relative;
background:rgb(195,150,129);
transition:all .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
.sb{
width:200px;
height:200px;
position:absolute;
left:0;
top:50%;
transform:scale(12);
right:0;
opacity:0.166667;
transition:all .3s;
animation:spin 40s linear infinite;
margin:auto;
transform-origin: center;
}
.grad.monkey{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.rabbit{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.panda{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.lion{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
&__inner{
position:absolute;
top:50%;
left:0;
right:0;
width:780px;
margin:auto;
text-align:center;
transform:translateY(-50%);
h1{
margin:0;
font-size:22px;
color:white;
margin-bottom:6px;
transform:scale(0)
}
h2{
margin:0;
color: rgba(0, 0, 0, 0.42);
transform:scale(0);
font-size:14px;
}
.rating{
transform:scale(0);
img{
position: absolute;
transition:all .3s;
right: -10px;
top: 19px;
cursor: pointer;
width: 50px;
&:hover{
right:-14px;
}
}
.prev{
left:-10px;
&:hover{
left:-14px;
}
}
.prev,.next{
transform:scale(0);
}
font-family: 'Crete Round', serif;
color:#745226;
position:relative;
left:0px;
font-size:26px;
border-radius:4px;
width:260px;
padding:30px;
background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/board.png');
background-size:cover;
margin:0 auto;
text-transform:uppercase;
}
.character.rabbit{
width: 156px;
} .character{
width:180px;
transform:scale(0);
margin:0px auto -40px auto;
margin-top:30px;
position:relative;
&_smile{
position:absolute;
z-index:2;
top:0;
.smile.monkey{
position: absolute;
top: 119px;
left: 61px;
}
.smile.panda{
position: absolute;
top: 129px;
left: 63px;
}
.smile.lion{
position: absolute;
top: 122px;
left: 60px;
}
.smile.rabbit{
position: absolute;
top: 164px;
left: 49px;
}
input{
}
@-moz-document url-prefix() {
input.monkey{
transform: rotate(90deg) !important;
width: 96px !important;
top: 121px !important;
cursor: grab !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 35px !important;
}
input.rabbit{
transform: rotate(90deg) !important;
width: 96px !important;
top: 165px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 22px !important;
}
input.panda{
transform: rotate(90deg) !important;
width: 96px !important;
top: 131px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 36px !important;
}
input.lion{
transform: rotate(90deg) !important;
width: 96px !important;
top: 124px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 33px!important;
}
}
input.monkey{
transform:rotate(90deg);
width:96px;
top: 30px;
cursor: -webkit-grab; cursor: -moz-grab;
position:relative;
z-index:1;
opacity:0;
}
input.rabbit{
transform:rotate(90deg);
width:96px;
top: 78px;
position:relative;
z-index:1;
opacity:0;
}
input.panda{
transform:rotate(90deg);
width:96px;
top: 42px;
position:relative;
z-index:1;
opacity:0;
}
input.lion{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
width: 96px;
top: 36px;
position: relative;
z-index: 1;
opacity: 0;
}
input[type=range]::-webkit-slider-runnable-track {
width:80px;
height: 190px;
//cursor: grab;
box-shadow: none;
background: transparent;
border-radius: 1.3px;
border: none;
}
input[type=range]::-moz-range-track{
width:80px;
height: 190px;
box-shadow: none;
background: transparent;
border-radius: 1.3px;
border: none;
}
}
}
}
}
}
}
// Animations
.poptut{
animation: poptut 1s .4s forwards;
}
.popone{
animation: pop 1s .4s forwards;
}
.poptwo{
animation: pop 1s .6s forwards;
}
.popthree{
animation: pop 1s .8s forwards;
}
.popfour{
animation: pop 1s 1s forwards;
}
@keyframes pop{
0%{transform:scale(0);}
25%{transform:scale(1.2);}
50%{transform:scale(.9);}
75%{transform:scale(1.1);}
100%{transform:scale(1);}
}
@keyframes poptut{
0%{transform:translateY(-50%) scale(0);}
25%{transform:translateY(-50%) scale(1.2);}
50%{transform:translateY(-50%) scale(.9);}
75%{transform:translateY(-50%) scale(1.1);}
100%{transform:translateY(-50%) scale(1);}
}
a.follow{
background: #4BE8AC !important;
box-shadow: 0px 3px 0px #39BF8C !important;
}
a.download,a.follow{ transform:scale(0);
&:hover{
background: #88614F;
}
text-align: center;
margin-top: 80px;
width: 200px;
float: left;
display: inline-block;
padding: 26px 30px;
background: #845E4C;
box-shadow: 0px 3px 0px #744A37;
color: white;
font-weight: 900;
font-family: 'nunito';
text-decoration: none;
border-radius: 4px;
margin-left: 22px;}
// summary
.summary{
position: relative;
padding: 0px 50px;
margin-top: 78px;
}
.col_left{
width: 400px;
position: relative;
height: 510px;
padding: 9px 0px 0px 0px;
margin: 0 auto;
text-align: left;
font-family: 'Crete Round', serif;
color: white;
font-size: 19px;
.board{
position:absolute;
top:0;
left:0;
width:100%;
}
p{
margin:0;
}
margin:0 auto;
text-align: left;
font-family: 'Crete Round', serif;
color: white;
font-size: 19px;
.answer_p{
font-size:28px; font-size: 19px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 9px;
margin-bottom: 6px !important;
color: #4BE8AC;
}
}
.col_right{
width: 453px;
position: absolute;
bottom: -27px;
left: 159px;
margin: 0 auto;
a{
color: white;
font-size: 14px;
display: block;
margin: 14px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment