I'm posting my solution for developing a Likert Scale in Caspio.
Important:
Set table field datatype to Number ; otherwise, the script will add a "," to the end of each value
Form returns values 1-5 depending on "star" selection
Disable HTML Editor
You will need to include each of the survey questions in your datapage, and set the form element to "Hidden"
This scale was created as a "Single Record Update" to receive customer feedback. However, any Datapage type should work.
My submit button is an additional block of code, which I did not include in the solution.
You will need to alter the names of the fields referenced in each question and javascript to best match yours, ex:
<input type="text" maxlength="255" name="EditRecordHow_Satisfied" id="EditRecordHow_Satisfied" value="" class="cbFormTextField" size="25" hidden>
later in the Javascript section:
// Question 1
document.querySelectorAll('input[name="likert1"]').forEach(function(radio) {
radio.addEventListener('change', function() {
var selectedValue = document.querySelector('input[name="likert1"]:checked').value;
document.getElementById('EditRecordHow_Satisfied').value = selectedValue;
Below is the code used to create this. Simply paste in a HTML block with "HTML Editor" disabled. Keep in mind, Caspio HTML blocks are truncated at 10,000 characters.
For some reason, I have to paste this into word before pasting into Caspio, because it loses its formatting. I'm not sure why.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Satisfaction Survey</title>
<style>
/* General form styling */
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f4f8;
padding: 20px;
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
font-size: 4em;
color: #1e88e5;
margin-bottom: 40px;
font-weight: 600;
}
.form-group {
margin-bottom: 50px;
}
.form-group label {
font-size: 1.2em;
display: block;
margin-bottom: 20px;
color: #3f51b5;
font-weight: 600; /* Bold for standout */
}
/* Likert scale styling */
.likert-scale {
display: flex;
justify-content: space-around;
align-items: center;
}
.likert-scale div {
flex: 1;
margin: 0 20px;
text-align: center;
}
.likert-scale input[type="radio"] {
display: none;
}
/* Star icon with 3D shadow */
.likert-scale label {
font-size: 2.5em;
color: #ccc;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 3D shadow */
}
.likert-scale label:hover {
color: #FFD700;
transform: scale(1.2);
}
/* Selected effect */
.likert-scale input[type="radio"]:checked + label {
color: #FFD700;
transform: scale(1.3);
}
/* Description styling */
.likert-description {
font-size: 1em;
margin-top: 10px;
color: #555;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
/* Button styling */
button {
background: linear-gradient(135deg, #1e88e5, #42a5f5);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
button:hover {
background: linear-gradient(135deg, #42a5f5, #1e88e5);
transform: translateY(-3px);
}
</style>
</head>
<body>
<div class="container">
<img src="https://cdn-bkknn.nitrocdn.com/fGcPNFYNoLNWGSllWzgDxtBAbrFDaIYE/assets/images/source/rev-a5c1a10/www.caspio.com/wp-content/uploads/2015/06/logo.svg" alt="Caspio Logo" style="width: 300px; height: auto; margin-bottom: 30px;">
<div class="container">
<h2>Satisfaction Survey</h2><br></br>
<form id="likertForm" method="post">
<!-- Question 1: Overall, how satisfied are you with us? -->
<div class="form-group">
<label>Overall, how satisfied are you with us?</label>
<div class="likert-scale">
<div>
<input type="radio" name="likert1" id="likert1_1" value="1">
<label for="likert1_1">★</label> <!-- Directly using star -->
<span class="likert-description">Very Dissatisfied</span>
</div>
<div>
<input type="radio" name="likert1" id="likert1_2" value="2">
<label for="likert1_2">★</label>
<span class="likert-description">Dissatisfied</span>
</div>
<div>
<input type="radio" name="likert1" id="likert1_3" value="3">
<label for="likert1_3">★</label>
<span class="likert-description">Neutral</span>
</div>
<div>
<input type="radio" name="likert1" id="likert1_4" value="4">
<label for="likert1_4">★</label>
<span class="likert-description">Satisfied</span>
</div>
<div>
<input type="radio" name="likert1" id="likert1_5" value="5">
<label for="likert1_5">★</label>
<span class="likert-description">Very Satisfied</span>
</div>
</div>
<input type="text" maxlength="255" name="EditRecordHow_Satisfied" id="EditRecordHow_Satisfied" value="" class="cbFormTextField" size="25" hidden>
</div>
<!-- Question 2: How likely would you be to recommend us? -->
<div class="form-group">
<label>How likely would you be to recommend us?</label>
<div class="likert-scale">
<div>
<input type="radio" name="likert2" id="likert2_1" value="1">
<label for="likert2_1">★</label>
<span class="likert-description">Very Unlikely</span>
</div>
<div>
<input type="radio" name="likert2" id="likert2_2" value="2">
<label for="likert2_2">★</label>
<span class="likert-description">Unlikely</span>
</div>
<div>
<input type="radio" name="likert2" id="likert2_3" value="3">
<label for="likert2_3">★</label>
<span class="likert-description">Neutral</span>
</div>
<div>
<input type="radio" name="likert2" id="likert2_4" value="4">
<label for="likert2_4">★</label>
<span class="likert-description">Likely</span>
</div>
<div>
<input type="radio" name="likert2" id="likert2_5" value="5">
<label for="likert2_5">★</label>
<span class="likert-description">Very Likely</span>
</div>
</div>
<input type="text" maxlength="255" name="EditRecordHow_Likely" id="EditRecordHow_Likely" value="" class="cbFormTextField" size="25" hidden>
</div>
<!-- Question 3: How fast or timely was your experience? -->
<div class="form-group">
<label>How fast or timely was your experience?</label>
<div class="likert-scale">
<div>
<input type="radio" name="likert3" id="likert3_1" value="1">
<label for="likert3_1">★</label>
<span class="likert-description">Very Slow</span>
</div>
<div>
<input type="radio" name="likert3" id="likert3_2" value="2">
<label for="likert3_2">★</label>
<span class="likert-description">Slow</span>
</div>
<div>
<input type="radio" name="likert3" id="likert3_3" value="3">
<label for="likert3_3">★</label>
<span class="likert-description">Neutral</span>
</div>
<div>
<input type="radio" name="likert3" id="likert3_4" value="4">
<label for="likert3_4">★</label>
<span class="likert-description">Fast</span>
</div>
<div>
<input type="radio" name="likert3" id="likert3_5" value="5">
<label for="likert3_5">★</label>
<span class="likert-description">Very Fast</span>
</div>
</div>
<input type="text" maxlength="255" name="EditRecordHow_Fast" id="EditRecordHow_Fast" value="" class="cbFormTextField" size="25" hidden>
</div>
<!-- Question 4: How was your experience today or your last interaction with us? -->
<div class="form-group">
<label>How was your experience today or your last interaction with us?</label>
<div class="likert-scale">
<div>
<input type="radio" name="likert4" id="likert4_1" value="1">
<label for="likert4_1">★</label>
<span class="likert-description">Very Negative</span>
</div>
<div>
<input type="radio" name="likert4" id="likert4_2" value="2">
<label for="likert4_2">★</label>
<span class="likert-description">Negative</span>
</div>
<div>
<input type="radio" name="likert4" id="likert4_3" value="3">
<label for="likert4_3">★</label>
<span class="likert-description">Neutral</span>
</div>
<div>
<input type="radio" name="likert4" id="likert4_4" value="4">
<label for="likert4_4">★</label>
<span class="likert-description">Positive</span>
</div>
<div>
<input type="radio" name="likert4" id="likert4_5" value="5">
<label for="likert4_5">★</label>
<span class="likert-description">Very Positive</span>
</div>
</div>
<input type="text" maxlength="255" name="EditRecordLast_Experience" id="EditRecordLast_Experience" value="" class="cbFormTextField" size="25" hidden>
</div>
<!-- Submit Button -->
<div style="text-align: center;">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script>
// JavaScript to capture Likert values for all questions
// Question 1
document.querySelectorAll('input[name="likert1"]').forEach(function(radio) {
radio.addEventListener('change', function() {
var selectedValue = document.querySelector('input[name="likert1"]:checked').value;
document.getElementById('EditRecordHow_Satisfied').value = selectedValue;
});
});
// Question 2
document.querySelectorAll('input[name="likert2"]').forEach(function(radio) {
radio.addEventListener('change', function() {
var selectedValue = document.querySelector('input[name="likert2"]:checked').value;
document.getElementById('EditRecordHow_Likely').value = selectedValue;
});
});
// Question 3
document.querySelectorAll('input[name="likert3"]').forEach(function(radio) {
radio.addEventListener('change', function() {
var selectedValue = document.querySelector('input[name="likert3"]:checked').value;
document.getElementById('EditRecordHow_Fast').value = selectedValue;
});
});
// Question 4
document.querySelectorAll('input[name="likert4"]').forEach(function(radio) {
radio.addEventListener('change', function() {
var selectedValue = document.querySelector('input[name="likert4"]:checked').value;
document.getElementById('EditRecordLast_Experience').value = selectedValue;
});
});
</script>
</body>
</html>
