Close Menu Navigation
Categorías abiertas del menú Contactable: Formularios accesibles con jQuery
- 2 abril, 2011 -
- jQuery / JS, Plugins -
- 20 Comentarios
Contactable es un plugin diseñado en jQuery cuya finalidad es la de mostrar un formulario totalmente accesible y siempre visible para el usuario.
El formulario puede implementarse en cualquier página con el mínimo esfuerzo, simulando un efecto de slide y con validación de campos incluída. Vamos a verlo:
1.- Crear el div que contendrá el formulario
Deberemos crear un div con ID único:
<div id="contact"></div>
2.- Referenciar la librería jQuery
Incluiremos, además de la librería jQuery, el validador y el script del plugin Contactable (además de su CSS asociado). La cosa quedaría de la siguiente manera:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script src="jquery.validate.pack.js" type="text/javascript"></script> <script src="jquery.contactable.min.js" type="text/javascript"></script> <link rel="stylesheet" href="http://anygoogle.com/contactable/contactable.css" type="text/css" />
Para, posteriormente, y mediante una función jQuery, inicializar el plugin:
$(function(){ $('#contact').contactable({ subject: 'A Feeback Message' }); });
En el archivo de descarga verás un archivo mail.php. Es importante que lo ubiques en la carpeta superior de tu servidor para que las funciones AJAX funcionen correctamente.
3.- Configuración del fichero mail.php
Abre el fichero mail.php y modifica la línea 12 añadiendo la dirección de correo que recibirá el correo de contacto. Debes reemplazar esta línea:
mail('/*RECIPIENTS EMAIL ADDRESS HERE*/', $subject, $contactMessage);
Por esta otra:
mail(tumail@dominio.com', $subject, $contactMessage);
Configuraciones personalizadas
Existen cantidad de parámetros configurables para el plugin Contactable. Puedes ajustarlos a tu gusto y necesidades de tu página. A partir de la versión 1.2.1 el formulario se oculta por defecto una vez realizado el envío correctamente.
name: 'Name', email: 'Email', message : 'Message', subject : 'Un mensaje a través de Contactable', recievedMsg : 'Gracias por tu mensaje', notRecievedMsg : 'Lo siento, el mail no pudo ser enviado, prueba más tarde', disclaimer: 'Siéntete libre, valoramos tu feedback', hideOnSubmit: true
El código final de tu fichero HTML debería quedar tal que así:
<body> <!--inicio contactable --> <div id="contactable"><!-- contactable html placeholder --></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://anygoogle.com/contactable/jquery.validate.pack.js"></script> <script type="text/javascript" src="http://anygoogle.com/contactable/jquery.contactable.js"></script> <link rel="stylesheet" href="http://anygoogle.com/contactable/contactable.css" type="text/css" /> <script>$(function(){$('#contactable').contactable({subject: 'feedback URL:'+location.href});});</script> <!--fin contactable -->
Puedes ver una demo aquí y descargar el plugin contactable desde aquí
Posts Relacionados: 3 plugins SEO para WP que deberías conocer | 30 sitios donde descargar imágenes gratuitas | Formas de perder el tiempo posicionando webs | Qué hacer si Google te ha penalizado en su ‘last update’ | Menú de subnavegación (CSS+JQuery) | NounProject: Gran colección de iconos vectoriales | Reveal: Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets útiles que deberías conocer | Formulario en varios pasos usando jQuery |
Muy agradable de hecho probablemente voy a descargarlo. Gracias
hola, Chicos, Acabo de añadir a su página web a mis favoritos. Me gusta leer sus mensajes. Gracias!
Hola, Chicos! Recentment em vaig trobar amb el teu blog i he estat llegint al llarg. Jo pensava que anava a deixar el meu primer comentari. No sé què dir, excepte que he gaudit de la lectura. bloc de Niça.
Últimamente he comenzado un blog, los datos que usted proporciona en este sitio web me ha ayudado muchísimo . Gracias por todo su tiempo y trabajo.
Gracias por la gran información! Yo no habría descubierto esto de otra manera!
oigan no se puede enviar el mai ayuda por favor
Podrías ser más específico Juan José?
Hola que tal oye utilice este formulario que me parece excelente solo un inconveniente no envia el correo :s hice todo lo q dice en el post y cambie en el mail.php por mi correo pero no lo envia me da el mensaje de error :S
Hola Diego, has visto que tengas bien configurado tu servidor? Si no consigues solucionarlo envíame un mail y lo intentamos solucionar
te envie un mail graciasss
ya cheque q el mail.php me funciona pero no me conecta la informacion q mando desde el form al mail.php como puedo solucionar eso?
Admin, me ha gustado este jquery y me gustaría implementarlo en mi sitio web que estoy creando, sin embargo al probar el mail.php creo que tengo el mismo problema que Diego.
Este es el código que nos viene en el archivo php tuyo:
<?php
//declare our assets
$name = stripcslashes($_POST['name']);
$emailAddr = stripcslashes($_POST['email']);
$comment = stripcslashes($_POST['message']);
$subject = stripcslashes($_POST['subject']);
$contactMessage =
"Message:
$comment
Name: $name
E-mail: $emailAddr
Sending IP:$_SERVER[REMOTE_ADDR]
Sending Script: $_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]";
//send the email
mail('minombre@dominio.com', $subject, $contactMessage);
Otra cosa, yo no sé nada de php la verdad, pero al abrir el archivo php con dreamweaver, me indica de que en el mismo código hay un error, no sé que sea la verdad, es el mismo que te acabo de colocar arriba. Y por último, en el punto 3 del tutorial creo que te faltó una comilla ( ‘ ) en la parte que dices “por estra otra” al principio del código… viene así:
mail(tumail@dominio.com’, $subject, $contactMessage); (tumail@dominio.com) debe decir (‘tumail@dominio.com)
Según lo que me indicó el dreamweaver amigo… y disculpa por las molestias pero podrías resolver el código ya que como te digo, no sé absolutamente nada de php, solo sigo tus instriucciones.
Saludos cordiales!
Hola Marcos, ya he revisado el fichero y te he enviado la solución al mail que me solicitaste.
Un saludo y gracias por seguir el blog
Hola, muy buen formulario! Tengo el mismo problema que Diego, si me pudieran dar una mano estaría muy agradecido.
Saludos!
Hola Gabriel, recuerda que debes modificar la linea 18 del fichero mail.php para introducir tu dirección de correo. Otra cosa a tener en cuenta es que las variables que recoges se correspondan y que el formulario se envíe por método POST. Has revisado todo eso?
Saludos!
Buenas, tengo un problema he instalado el formulario, pero se puede ver solo en algunos navegadores he probado con IE, GooleChrome y no funciona…me podrian dar alguna solución… gracias…
Hola Felipe, lo has adaptado a tu template modificando el CSS y demás? Has tocado algo del jQuery? Según la web del autor dice ser compatible con todos los navegadores. Te dejo el enlace al plugin por si puede servirte de ayuda:
Un saludo compi
Gracias, Luis, pero el problema es que el formulario queda atras del flash de la pagina…en opera no hay problema, pero en los demas si…¿que se podria hacer en este caso?…saludos.
Hola Felipe, lo que has de hacer es añadir, cuando incluyas el código flash, el siguiente parámetro.
Ya me cuentas, un abrazo
EXELENTE MASTER!!!…. En si el codigo me sirvio para ver los parametros del flash y en uno de los parametros decia:
params. vmode= “windows”
dejandolo en: params. vmode= “transparent”
Gracias….que Dios te bendiga…jejeje