SummArg | Cursos y recursos para webmasters

10/07/2011

Formulario de contacto desplegable animado con Contactable

Contactable es un plugin para jQuery que nos permite colocar un formulario de contacto práctico. Al cargar por primera vez la página, el formulario de contacto está oculto y sólo se ve la pestaña en uno de los laterales (en el caso del ejemplo es “Feedback“). Al ser clickeada la misma, el formulario se desliza suavemente hacia el centro hasta ser completamente visible. Al clickear nuevamente sobre la pestaña, el formulario vuelve a ocultarse.

El plugin se hace cargo de gran parte del trabajo y veremos que su implementación es simple. En donde queramos el formulario simplemente coloquemos:
<div id="contact">
</div>

Entre etiquetas <head> debemos llamar al framework, al plugin de validación y a contactable.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.pack.js"></script> <script type="text/javascript" src="jquery.contactable.min.js"></script>
Iniciamos el script:
$(function(){ $('#contact').contactable({ subject: 'A Feeback Message' }); });
Abrimos el archivo mail.php y editamos la línea 12 para añadir la casilla de correo a donde llegarán los datos del formulario:
mail('/*mail del destinatario*/', $subject, $contactMessage);
Demo | Descarga

Dejar un comentario