Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo a cuento de una conversación que tuve la semana pasada con un el señor «Ferdinando». El caso es que este hombre está montando una web para un «empresario» que vende ciertos productos, pero por lo que me ha contado, necesitaría un formulario de votación con estrellas para añadir a los productos. Con ello busca conseguir una valoración por parte de los clientes de sus productos (aun que yo ya me hago una idea de la valoración que le harán). Y esto, como suelo recomendar, se puede hacer sin necesidad de plugins.
Tengo que reconocer, que hoy en día, la interactividad y la optimización son clave para proporcionar experiencias atractivas a los usuarios. Por lo que cosas como esta que vamos a ver, hacen las páginas un poco más llamativas para los posibles clientes. En fin, después de pensarlo un poco, y cuando he tenido un poco de tiempo libre, voy a dejar aquí publicado un sencillo formulario de votación estelar utilizando HTML, CSS y JavaScript. Este formulario va a permitir a los usuarios expresar su opinión de una manera visual y rápida.
En principio, lo que vamos a ver será solo la parte «frontal» del sistema de votación. Por lo que si le vale, él tendrá que ver qué hacer con los datos que recoja, y cómo almacenarlos. Además de ver cómo recuperar después la puntuación asociada a cada artículo. Pero bueno, esto es algo que estoy seguro que sabrá hacer.
Un vistazo rápido a este formulario de votación con estrellas
Imaginemos un escenario donde queremos recopilar opiniones de usuarios sobre nuestros productos. Este formulario de votación estelar es una herramienta perfecta para esto, ya que permite a los usuarios otorgar puntuaciones y proporcionar comentarios adicionales, que si almacenamos, podremos examinar más tarde y actuar en consecuencia. Además, con la puntuación total, podremos establecer que elementos son los más valorados por nuestros clientes. Y todo esto sin necesidad de cargar más con plugins nuestra instalación de Wordpress.
El código de la aplicación
HTML
El código HTML define la estructura del formulario. Se ha utilizado un enfoque semántico para organizar el contenido. El formulario incluye una sección de agradecimiento, un botón de edición para realizar cambios y un widget de estrellas para la votación.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Formulario de votación</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="post">
<!-- Sección de agradecimiento por el voto -->
<div class="text">Gracias por tu voto!</div>
<!-- Botón para editar la votación -->
<div class="edit">EDITAR</div>
</div>
<!-- Widget de estrellas para votación -->
<div class="star-widget">
<span id="valoracion">Valoración</span><br/>
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
<!-- Formulario para enviar la votación -->
<form action="#">
<header></header>
<!-- Área de texto para describir la experiencia con el producto -->
<div class="textarea">
<textarea cols="30" placeholder="Describe tu experiencia con el producto..."></textarea>
</div>
<!-- Botón para publicar la votación -->
<div class="btn">
<button type="submit">Publicar</button>
</div>
</form>
</div>
</div>
</body>
</html>CSS
El código CSS no solo se encarga del diseño, sino que también mejora la usabilidad y la legibilidad. Se ha prestado especial atención a los comentarios detallados para explicar cada sección del código. Además, se han añadido estilos para mejorar la experiencia visual del usuario.
/* Reset de márgenes, relleno y modelo de caja */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
/* Estilos para el cuerpo y la etiqueta HTML */
html, body {
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: #7900b1;
}
/* Estilos para el contenedor principal */
.container {
position: relative;
width: 400px;
background: #111111;
padding: 20px 30px;
border: 1px solid #444;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* Estilos para la sección de agradecimiento */
.container .post {
display: none;
}
/* Estilos para el texto de agradecimiento */
.container .text {
font-size: 25px;
color: #666;
font-weight: 500;
}
/* Estilos para el botón de edición */
.container .edit {
position: absolute;
right: 10px;
top: 5px;
font-size: 16px;
color: #666;
font-weight: 500;
cursor: pointer;
}
.container .edit:hover {
text-decoration: underline;
}
/* Estilos para el widget de estrellas */
.container .star-widget input {
display: none;
}
.container .star-widget label {
font-size: 40px;
color: #444;
padding: 10px;
float: right;
transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
color: #fd4;
}
input:checked ~ label {
color: #fd4;
}
input#rate-5:checked ~ label {
color: #fe7;
text-shadow: 0 0 20px #952;
}
/* Estilos para las etiquetas de encabezado según la puntuación */
#rate-1:checked ~ form header:before {
content: "Odio este producto ";
}
#rate-2:checked ~ form header:before {
content: "No me ha gustado ";
}
#rate-3:checked ~ form header:before {
content: "Está bien ";
}
#rate-4:checked ~ form header:before {
content: "Me encanta ";
}
#rate-5:checked ~ form header:before {
content: "Me enloquecen cosas así ";
}
/* Texto valoración*/
#valoracion{
text-align: center;
color: #fff;
font-size: larger;
font-weight: bold;
}
/* Estilos para ocultar y mostrar el formulario según la puntuación seleccionada */
.container form {
display: none;
}
input:checked ~ form {
display: block;
}
/* Estilos para el encabezado del formulario */
form header {
width: 100%;
font-size: 25px;
color: #fe7;
font-weight: 500;
margin: 5px 0 20px 0;
text-align: center;
transition: all 0.2s ease;
}
/* Estilos para el área de texto del formulario */
form .textarea {
height: 100px;
width: 100%;
overflow: hidden;
}
form .textarea textarea {
height: 100%;
width: 100%;
outline: none;
color: #eee;
border: 1px solid #333;
background: #222;
padding: 10px;
font-size: 17px;
resize: none;
}
form .textarea textarea:focus {
border-color: #444;
}
/* Estilos para el botón de enviar del formulario */
form .btn {
height: 45px;
width: 100%;
margin: 15px 0;
}
form .btn button {
height: 100%;
width: 100%;
border: 1px solid #444;
outline: none;
background: #222;
color: #999;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
}
form .btn button:hover {
background: #1b1b1b;
}En el código CSS, como se puede ver, se añadieron mensajes personalizados según la puntuación seleccionada. Esto no solo personaliza la experiencia del usuario, sino que también mejora el SEO al incluir contenido relevante. Además, se ha agregado un texto explicativo sobre la valoración para orientar a los usuarios.
JavaScript
La magia ocurre con JavaScript, donde se gestionan las interacciones del usuario. Al hacer clic en el botón de envío, el widget de estrellas se oculta, y aparece una sección de agradecimiento. El botón de edición permite a los usuarios cambiar su voto, volviendo al widget de estrellas.
Este código se puede almacenar en un archivo aparte con extensión JS, o directamente cogerlo tal cual se muestra a continuación y pegarlo antes del cierre del body en el archivo .HTML.
<script>
// Seleccionar elementos del DOM una sola vez para mejorar el rendimiento
const btn = document.querySelector("button");
const post = document.querySelector(".post");
const widget = document.querySelector(".star-widget");
const editBtn = document.querySelector(".edit");
// Manejar el evento clic del botón
btn.onclick = () => {
// Ocultar el widget de estrellas y mostrar la sección de agradecimiento
widget.style.display = "none";
post.style.display = "block";
// Manejar el evento clic del botón de edición
editBtn.onclick = () => {
// Mostrar el widget de estrellas y ocultar la sección de agradecimiento
widget.style.display = "block";
post.style.display = "none";
}
// Evitar el comportamiento predeterminado del formulario
return false;
}
</script>En resumen, la creación de un formulario de votación estelar va más allá de la simple recopilación de datos. Es una oportunidad para interactuar con los usuarios y ofrecerles una experiencia «diferente», ya que su opinión también cuenta. Al optimizar el código con comentarios claros, espero que este código sea accesible y comprensible para todos.
Si deseas explorar el código fuente de este pequeño proyecto, puedes dirigirte al repositorio en GitHub. Además, si prefieres echarle un vistazo funcionando, puedes hacerlo en la página de ejemplos de este sitio web.
