En el día de hoy les traemos un pequeño tutorial sobre como hacer un formulario de contacto en el cual exista un limite para la cantidad de caracteres que pueden ser enviados a través de el mismo por los usuarios de nuestro sitio web.
Paso #1: Creamos un formulario en HTML
Para comenzar tenemos que crear un pequeño formulario con una área de texto en lenguaje HTML para que los usuarios puedan poner su texto allí, ademas de un botón de enviar para que dicho texto pueda ser enviado por este script directamente a una base de datos o a nuestro correo electrónico. También debajo de ella debe aparecer el contador de caracteres que nos quedan o tenemos que borrar para poder mandarlo.
<html>
<head>
<title>Formulario de Contacto</title>
<link href=”css/disenoestilos.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”scripts/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”scripts/funciones.js”></script>
</head>
<body>
<div id=”container”>
<strong>Dinos tus comentarios</strong>
<form name=”areatexto” id=”areatexto” method=”post”>
<label for=”mensaje”>Mensaje:</label>
<textarea name=”mensaje” id=”mensaje” rows=”10″ cols=”50″></textarea>
<p><input type=”submit” name=”publicar” id=”publicar” value=”Publicar” />
</p>
</form>
<div id=”contador”>
</div>
</body>
</html>
Paso #2: Creamos una función de jQuery para contador de caracteres en el area de texto
Ahora tenemos que crear una función en jQuery, la cual se debe encargar de contar los caracteres que van siendo escritos en el área de texto que creamos en el anterior paso. Ademas nos dice cuantos caracteres nos quedan y si tenemos que borrar algunos para poder enviar el mensaje.
$(function(){ var valor, contador, parrafo; $(‘<p>Te quedan 250 caracteres</p>’).appendTo(‘#contador’); $(‘#comentarios’).keydown(function(){ contador = 250; $(‘.advertencia’).remove(); $(‘.indicador’).remove(); valor = $(‘#comentarios’).val().length; contador = contador – valor; if(contador < 0) { parrafo = ‘<p>’; } else { parrafo = ‘<p>’; } $(‘#contador’).append(parrafo + ‘Te ‘ + ‘quedan’ + contador + ‘ caracteres</p>’); }); });
Paso #3: Creamos un estilo CSS para nuestro formulario
Una vez ya hemos hecho todos los anteriores pasos, se puede decir que casi hemos terminado nuestro formulario, pero este paso es totalmente opcional, ya que el mismo tiene como finalidad agregarle un poco de diseño a dicho formulario con una hoja de estilos en cascada o CSS.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}h1 {
font-size: 22px;
}label {
display: block;
}#comentario {
padding: 6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;}
#publicar {
border: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #999999;
padding: 11px;
font-weight: italic;
color: white;
}#publicar:hover {
background: #666666;
cursor: pointer;
}.advertencia {
color: red;
}.indicador {
color: green;
}
