|
<html> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.rate { |
|
float: left; |
|
height: 46px; |
|
padding: 0 10px; |
|
} |
|
|
|
.rate:not(:checked)>input { |
|
position: absolute; |
|
top: -9999px; |
|
} |
|
|
|
.rate:not(:checked)>label { |
|
float: right; |
|
width: 1em; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
font-size: 30px; |
|
color: #ccc; |
|
} |
|
|
|
.rate:not(:checked)>label:before { |
|
content: '★ '; |
|
} |
|
|
|
.rate>input:checked~label { |
|
color: #ffc700; |
|
} |
|
|
|
.rate:not(:checked)>label:hover, |
|
.rate:not(:checked)>label:hover~label { |
|
color: #deb217; |
|
} |
|
|
|
.rate>input:checked+label:hover, |
|
.rate>input:checked+label:hover~label, |
|
.rate>input:checked~label:hover, |
|
.rate>input:checked~label:hover~label, |
|
.rate>label:hover~input:checked~label { |
|
color: #c59b08; |
|
} |
|
|
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
<form method="POST" |
|
action="https://script.google.com/macros/s/AKfycbz_3RbhDT53-rXK6LMk1CoABUtvkRc5e5QVvrVmG0inKmTdR1I0G6QZ6hoONvh3eYM9/exec"> |
|
<div class="rate"> |
|
<input type="radio" id="star5" name="Rating" value="5" /> |
|
<label for="star5" title="text">5 stars</label> |
|
<input type="radio" id="star4" name="Rating" value="4" /> |
|
<label for="star4" title="text">4 stars</label> |
|
<input type="radio" id="star3" name="Rating" value="3" /> |
|
<label for="star3" title="text">3 stars</label> |
|
<input type="radio" id="star2" name="Rating" value="2" /> |
|
<label for="star2" title="text">2 stars</label> |
|
<input type="radio" id="star1" name="Rating" value="1" /> |
|
<label for="star1" title="text">1 star</label> |
|
</div> |
|
<textarea name="Feedback" cols="30" rows="5" placeholder="Where could we improve?..."></textarea> |
|
<div class="btn-group"> |
|
<button type="submit" class="btn submit" onClick={this.onClickButton}>Submit</button> |
|
</div> |
|
<input type="hidden" id="firstname" name="Name" value="" /> |
|
<input type="hidden" name="Asset" value="Temp" /> |
|
</form> |
|
<script>document.getElementById("firstname").setAttribute('value', window.circleUser.firstName); |
|
</script> |
|
</body> |
|
|
|
</html> |
