Skip to content

Instantly share code, notes, and snippets.

@lepastiche

lepastiche/CFF_Javascript.js

Created May 20, 2021 14:28
Show Gist options
  • Save lepastiche/1503e709911029e1bc05643286b77595 to your computer and use it in GitHub Desktop.
Save lepastiche/1503e709911029e1bc05643286b77595 to your computer and use it in GitHub Desktop.
Download ZIP
Feedback Form
Raw
CFF_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="CFF_stylesheet.css">
<title>CFF Sample</title>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col">
<div class="d-grid gap-2">
<button id="myBtn" class="btn btn-dark">Open Feedback Form</button>
</div>
</div>
<div class="col"></div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close fas fa-times"></span>
<h3>Client Feedback Form</h3>
<div class="widget-container">
<div class="container">
<div class="row">
<div class="col">
<h6>Content</h6>
</div>
<div class="col star-widget" id="Q1">
<fieldset class="Question1">
<input type="radio" name="Q1_rate" id="Q1_rate-5">
<label for="Q1_rate-5" class="fas fa-star"></label>
<input type="radio" name="Q1_rate" id="Q1_rate-4">
<label for="Q1_rate-4" class="fas fa-star"></label>
<input type="radio" name="Q1_rate" id="Q1_rate-3">
<label for="Q1_rate-3" class="fas fa-star"></label>
<input type="radio" name="Q1_rate" id="Q1_rate-2">
<label for="Q1_rate-2" class="fas fa-star"></label>
<input type="radio" name="Q1_rate" id="Q1_rate-1">
<label for="Q1_rate-1" class="fas fa-star"></label>
</fieldset>
</div>
</div>
<!--End of Row 1-->
<div class="row">
<div class="col">
<h6>Usefulness / Significance</h6>
</div>
<div class="col star-widget" id="Q2">
<fieldset class="Qeustion2">
<input type="radio" name="Q2_rate" id="Q2_rate-5">
<label for="Q2_rate-5" class="fas fa-star"></label>
<input type="radio" name="Q2_rate" id="Q2_rate-4">
<label for="Q2_rate-4" class="fas fa-star"></label>
<input type="radio" name="Q2_rate" id="Q2_rate-3">
<label for="Q2_rate-3" class="fas fa-star"></label>
<input type="radio" name="Q2_rate" id="Q2_rate-2">
<label for="Q2_rate-2" class="fas fa-star"></label>
<input type="radio" name="Q2_rate" id="Q2_rate-1">
<label for="Q2_rate-1" class="fas fa-star"></label>
</fieldset>
</div>
</div>
<!--End of row 2-->
<div class="row">
<div class="col">
<h6>Overall Layout / Design</h6>
</div>
<div class="col star-widget" id="Q3">
<fieldset class="Question3">
<input type="radio" name="Q3_rate" id="Q3_rate-5">
<label for="Q3_rate-5" class="fas fa-star"></label>
<input type="radio" name="Q3_rate" id="Q3_rate-4">
<label for="Q3_rate-4" class="fas fa-star"></label>
<input type="radio" name="Q3_rate" id="Q3_rate-3">
<label for="Q3_rate-3" class="fas fa-star"></label>
<input type="radio" name="Q3_rate" id="Q3_rate-2">
<label for="Q3_rate-2" class="fas fa-star"></label>
<input type="radio" name="Q3_rate" id="Q3_rate-1">
<label for="Q3_rate-1" class="fas fa-star"></label>
</fieldset>
</div>
</div> <!-- End of Row 3-->
<div class="row">
<div class="col">
<h6>Response / Delivery Time</h6>
</div>
<div class="col star-widget" id="Q4">
<fieldset class="Question4">
<input type="radio" name="Q4_rate" id="Q4_rate-5">
<label for="Q4_rate-5" class="fas fa-star"></label>
<input type="radio" name="Q4_rate" id="Q4_rate-4">
<label for="Q4_rate-4" class="fas fa-star"></label>
<input type="radio" name="Q4_rate" id="Q4_rate-3">
<label for="Q4_rate-3" class="fas fa-star"></label>
<input type="radio" name="Q4_rate" id="Q4_rate-2">
<label for="Q4_rate-2" class="fas fa-star"></label>
<input type="radio" name="Q4_rate" id="Q4_rate-1">
<label for="Q4_rate-1" class="fas fa-star"></label>
</fieldset>
</div>
</div>
<!--End of row 4-->
</div>
<br>
<form action="#">
<div class="row">
<textarea placeholder="Help us improve. Give us a comment or suggestion." name="ComAndSug" class="textarea" rows="5" cols="50"></textarea>
</div>
<br>
<div class="emoticons-widget-container">
<div class="row">
<h6 style="text-align: center;">How was your overall experience?</h6>
</div>
<div class="row emoticons-widget" id="Q5">
<fieldset class="Question5">
<input type="radio" name="Q5_rate" id="Q5_rate-5">
<label for="Q5_rate-5" class="fas fa-grin-stars"></label>
<input type="radio" name="Q5_rate" id="Q5_rate-4">
<label for="Q5_rate-4" class="fas fa-smile"></label>
<input type="radio" name="Q5_rate" id="Q5_rate-3">
<label for="Q5_rate-3" class="fas fa-meh"></label>
<input type="radio" name="Q5_rate" id="Q5_rate-2">
<label for="Q5_rate-2" class="fas fa-frown"></label>
<input type="radio" name="Q5_rate" id="Q5_rate-1">
<label for="Q5_rate-1" class="fas fa-sad-tear"></label>
</fieldset>
</div>
</div>
<br>
<button class="subCom btn btn-dark">Submit</button>
</form>
</div>
<!--End of widget-container-->
</div>
<!--End of Modal Content-->
</div>
<!--End of Modal-->
<script src="CFF_javascript.js"></script>
<script src="https://kit.fontawesome.com/88e6922c24.js" crossorigin="anonymous"></script>
</body>
</html>
Raw
CFF_Javascript.js
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Raw
CFF_stylesheet.css
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
margin-right: 5%;
margin-left: 95%;
font-size: 28px;
font-weight: bold;
}
.fas .fa-times{
float: right;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.widget-container{
background: rgb(255, 255, 255);
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.emoticons-widget-container{
background: rgb(255, 255, 255);
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.widget-container .star-widget input{
display: none;
}
.star-widget label{
font: size 40px;
color:rgb(124, 124, 124);
padding: 10px;
float: right;
transition: all 0.2s ease;
}
.emoticons-widget label{
font: size 70px;
color:rgb(124, 124, 124);
padding: 10px;
margin:auto;
transition: all 0.2s ease;
}
.emoticons-widget-container .emoticons-widget input{
display: none;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
color: #fd4;
}
input:checked ~ label{
color: #fd4;
}
/* 5 star effect for Questions 1 - 4 */
input#Q1_rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 1px 5px rgb(0, 0, 0);
}
input#Q2_rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 1px 5px rgb(0, 0, 0);
}
input#Q3_rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 1px 5px rgb(0, 0, 0);
}
input#Q4_rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 1px 5px rgb(0, 0, 0);
}
input#Q5_rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 1px 5px rgb(0, 0, 0);
}
form .textarea{
width: 100%;
height: 100%;
outline: none;
border: 1px solid #888;
font-size: 17px;
padding: 10px;
resize: none;
overflow: hidden;
}
.subCom{
color: #fd4;
display: flex;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment