<!DOCTYPE html>
<html>
<head>
<style>
.star-rating {
direction: rtl;
display: inline-block;
padding: 20px;
}
.star-rating input {
display: none;
}
.star-rating label {
color: #bbb;
font-size: 18px;
padding: 0;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.star-rating input:checked ~ label,
.star-rating input:hover ~ label {
color: #f2b600;
}
</style>
</head>
<body>
<script runat="server">
Platform.Load("core", "1.1.1");
var submitted = Request.GetFormField("submitted");
if (submitted == "true") {
var email = Request.GetFormField("email");
var feedback = Request.GetFormField("feedback");
var rating = Request.GetFormField("rating");
var currentDate = TreatAsContent("%%=FormatDate(Now(), 'MMMM d, yyyy')=%%");
if (email && feedback && rating) {
// Prepare the data for insertion
var data = {
Email: email,
Feedback: feedback,
Rating: rating,
SubmissionDate: currentDate
};
// Code to insert data into the Data Extension or handle it as needed
/*
Write("<p>Thank you for submitting your details.</p>");
Write("Email: " + email + "<br/>");
Write("Feedback: " + feedback + "<br/>");
Write("Rating: " + rating + "<br/>");
Write("Date: " + currentDate + "<br/>");
*/
try {
var de = DataExtension.Init("SurveyFeedback");
var status = de.Rows.Add(data);
if (status) {
Write("Thank you for your feedback.");
} else {
Write("Failed to store feedback data.");
}
} catch (e) {
Write("An error occurred while storing feedback: " + e.message);
}
} else {
Write("All fields are required.");
}
} else {
var pageURL = Request.GetQueryStringParameter("PAGEURL");
var formHtml = '<form action="' + pageURL + '" method="post" onsubmit="return validateForm()">' +
'<label for="email">Email:</label>' +
'<input type="email" id="email" name="email" required><br><br>' +
'<label for="feedback">Feedback:</label><br>' +
'<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>' +
'<label for="rating">Rating:</label>' +
'<div class="star-rating">' +
'<input type="radio" id="5-stars" name="rating" value="5" />' +
'<label for="5-stars" class="star">★</label>' +
'<input type="radio" id="4-stars" name="rating" value="4" />' +
'<label for="4-stars" class="star">★</label>' +
'<input type="radio" id="3-stars" name="rating" value="3" />' +
'<label for="3-stars" class="star">★</label>' +
'<input type="radio" id="2-stars" name="rating" value="2" />' +
'<label for="2-stars" class="star">★</label>' +
'<input type="radio" id="1-stars" name="rating" value="1" />' +
'<label for="1-stars" class="star">★</label>' +
'</div><br><br>' +
'<input name="submitted" type="hidden" value="true" />' +
'<input type="submit" value="Submit">' +
'</form>';
Write(formHtml);
}
</script>
<script>
function validateForm() {
var email = document.getElementById('email').value;
var feedback = document.getElementById('feedback').value;
var rating = document.querySelector('input[name="rating"]:checked');
if (!email || !feedback || !rating) {
alert("All fields are required.");
return false;
}
return true;
}
</script>
</body>
</html>