Formulario de feedback (posición fija)

Si estas pensado en colocar en tu web un formulario para que otros usuarios comenten acerca del contenido, funcionalidad y aspecto de la web, independientemente de los que quieran contactar por otros motivos; como en algunas webs, habrás visto un botón flotante, fijo en la web, que al presionar nos muestra dicho formulario. Esto se puede lograr con un poco de CSS.

Código CSS a implementar:

[CSS]
/* Feedback
================================================== */
.feedback{
position:fixed;
left:20px;
bottom:0;
}
.feedback a {
position: relative;
z-index: 100; /* Debe ser superior al mayor actual de la web */
padding: 10px 20px; /* Padding del contenido */
width:71px; /* Si cambias la palabra sugerencias, deberías cambiar esto */
display:block;
cursor:pointer;

/* Estilo del botón (custom, el que quieras) */
background:#222;
background:-moz-linear-gradient(0% 100% 90deg, #1f1f1f, #292929);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#292929), to(#1f1f1f));
border:1px solid #111;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
-moz-box-shadow:inset 0 1px 0 0 #383838, 0 1px 6px 0 rgba(0,0,0,0.2);
-webkit-box-shadow:inset 0 1px 0 0 #383838, 0 1px 4px 0 rgba(0,0,0,0.2);

/* Fuente */
color:#FFF;
font-weight:bold;
font-size:12px;
text-decoration:none;
}
.feedback .form{
clear: both;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
background: #fff;
padding: 10px;
display: none;
/* z-index puede ser el mismo que el botón, ya que no se solaparán
nunca, pero nunca menor */
z-index: 10000;

position: relative;
}
.feedback .form textarea {
/* Damos formato al textarea que pueda haber dentro
en caso de no haber, este bloque se puede eliminar */
height: 170px;
width: 400px;
padding: 5px;
}
[/CSS]

Código JS a implementar:

[JAVA]
// Feedback button
$(“#feedback_button”).click(function(){
$(‘.form’).slideToggle();
});
[/JAVA]

Código HTML a implementar:

[XML]

[/XML]

Como verán no requiere programación de servidor, por lo que es bastante sencillo. Un pequeño truco que puede darle cache a tu web.

Espero que te haya sido de ayuda.

NOTA: Si cambias los nombres de las clases o ids del código HTML, deberás reflejarlo en el código CSS y JS.