Salut à tous,
Je suis actuellement en train de travailler sur une stratégie de marketing pour mon entreprise. Nous cherchons à mieux comprendre les préférences de nos clients pour améliorer nos produits et services. Pour ce faire, nous pensons à mettre en place des enquêtes et des sondages interactifs.
Nous pensons que cela nous permettrait d’obtenir des feedbacks en temps réel et de comprendre les tendances du marché plus rapidement. C’est là que j’ai besoin de votre aide. Avez-vous des conseils ou des recommandations sur la manière de mettre en place et de gérer efficacement ces enquêtes et ces sondages?
Toutes les suggestions et les idées sont les bienvenues. Merci d’avance pour votre aide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="email"],
input[type="text"],
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.stars {
display: inline-block;
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 30px;
}
.stars:hover,
.stars:hover ~ .star {
color: #ffcc00;
}
.star {
display: inline-block;
color: #c5c5c5;
font-size: 30px;
transition: color 0.25s ease-out;
}
textarea {
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<h2>Feedback Form</h2>
<form id="feedbackForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="name">First Name:</label>
<input type="text" id="name" name="name" required>
<label for="rating">Rating:</label>
<div class="stars">
<span class="star" onclick="setRating(1)">★</span>
<span class="star" onclick="setRating(2)">★</span>
<span class="star" onclick="setRating(3)">★</span>
<span class="star" onclick="setRating(4)">★</span>
<span class="star" onclick="setRating(5)">★</span>
</div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
<script>
function setRating(rating) {
document.getElementById('rating').value = rating;
// Mettre en surbrillance les étoiles sélectionnées
var stars = document.getElementsByClassName('star');
for (var i = 0; i < stars.length; i++) {
if (i < rating) {
stars[i].style.color = '#ffcc00';
} else {
stars[i].style.color = '#c5c5c5';
}
}
}
document.getElementById('feedbackForm').addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'WEBHOOK_URL');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('Feedback submitted successfully!');
// Réinitialiser le formulaire après soumission réussie
document.getElementById('feedbackForm').reset();
// Réinitialiser la notation en étoiles
setRating(0);
} else {
alert('Failed to submit feedback. Please try again later.');
}
}
};
xhr.send(formData);
});
</script>
</body>
</html>