Formulario de Contacto Modal con jQuery
jQuery me sorprende cada días más, por diferentes motivos, su facilidad en la implementación, la simplicidad a la hora de codificar y por la comunidad que cada día crece más y más. Por recomendación de mi compañero Adrian me encontre con el Blog de Eric Martin, en el cual nos muestra una forma diferente de hacer un formulario de contacto estilo Modal. Acá la Demo
Su implementación es muy simple, solo debemos tener en cuenta las siguientes lineas de código:
- Recordar que siempre que trabajamos con jQuery debemos importar la librería y el plugins desarrollado por Eric en la página donde pondremos el enlace, de esta manera:
//inclusion de las librerías <script src='js/jquery.js' type='text/javascript'></script> <script src='js/jquery.simplemodal.js' type='text/javascript'></script>
Lo siguiente es respetar el div contenedor y la clase del mismo, como asi tambien el enlace con su clase de esta forma:
<!--Formulario de contacto--> <div id='contactForm'><h2>Micodigobeta - Formulario de Contacto</h2> <p>Demo del uso de SimpelModal para desarrollar un formulario de contacto</p> <a href='#' class='contact'>.:: Contactanos ::.</a>
Hasta acá trabajamos en el archivo index.html donde estará el enlace. Las siguientes líneas que debemos modificar será los datos donde se enviará el formulario de contacto, para lo cual tenemos que ir al archivo contact.php dentro de la carpeta data y modificar estas líneas de código:
// Datos de contacto $to = "walter@micodigobeta.com.ar"; $subject = "Contacto desde SimpleModal"; // Incluir en estas lineas cc, ip y uasuario si lo desea, sino lo ponemos en false // false = do not include $extra = array( "form_subject" => true, "form_cc" => true, "ip" => true, "user_agent" => true );
El código creo que está mas que entendible, primero modificar el asunto y el correo donde se enviará el formulario, luego tenemos el array donde esta la configuración de datos opcionales como son; con copia la ip y el usuario que nos envió, con solo cambiarlos a false ese dato no figurará en el envío.
Para adaptar el formulario al estilo de su sitio, solo deben modificar el estilo del mismo, contact.css.
Espero les haya sido de utilidad. Ante cualquier duda o sugerencia, adjuntar en los comentarios. Como siempre les dejo la descarga del ejemplo
Saludos Cordiales.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Hola Walter, feliz año y gracias por contestar, el tema es que el html tiene la palabra contactame o algo así con el link al evento, si le doy click no hace nada, ningún mensaje de error ni nada, me extraña el “link ref” del index que esta dirigido al simbolo numeral que por lo general se utiliza para ejemplificar el vinculo sin especificarlo o sea que uno tiene que cambiarlo de acuerdo a su código…no se…por lo general utilizo jquery sin problemas, este simplemodal no se ejecuta. Es como si faltara algún archivo. Bueno…te agradezco tu interés y tu molestia, yo sigo buscando una solución porque querá usarlo.
Un abrazo.
Hola Walter, perdoná mi insistencia, pero me fui a la pagina de Eric Martin, bajé los demos de Contact Form y Basic demo, pues bien el basic demo funciona perfectamente pero el formulario de contacto no, te cuento que en el firefox 3.5 al hacer click en los botones en la pantalla me aparece el codigo fuente y el el IE no aparece nada. Pensé que esra algo de la configuración, pero al funcionar el basic demo la cosa pasa por otro lado, complicado para empezar el año no?
Saludos.
Hola Walter, exelente post, me funciono de inmediato, pero tengo un solo problema…
Tengo también un efecto de jquery (acordion) y no funciona cuando agrego el mail de contacto… al parecer funciona el ultimo script de javascript, osea cuando dejo al ultimo, antes del body, ese script funciona.
Hola Buenas todo funciona muy bien pero al momento de enviar el mail no deja aparece este mensaje
¡Gracias!
Lamentablemente el servidor no pudo entregar su mensaje.
Me funcionó perfecto…pero una ayuda porfavor como puedo hacer que me aparezca el mail de quien envío el correo??? por que al mail solo llega el nombre, mensaje, ip y navegador del usuario. me gustaria que apareciera tb para poder responder a esa persona….gracias..fantastico tutorial
ya lo solucioné solo agregué en el contact.php agregue “email” en el siguiente código..
“$extra = array(
“form_subject” => true,
“form_cc” => true,
“ip” => true,
“user_agent” => true,
“email” => true
);”
“// Envia el correo
@mail($to, $subject,$email, $body, $headers) “
Favor no tomar en cuenta mis comentarios anteriores… porq en los códigos que modifique cometí errores… para poder ver en el correo quien envío solo se debe agregar lo siguiente:”$body .= “Correo del solicitante: $email”;”
// Establecer y wordwrap cuerpo del mensaje
$body = “De: $name\n\n”;
$body .= “Mensaje: $message\n\n”;
$body .= “Correo del solicitante: $email”;
$body = wordwrap($body, 70);
pido las disculpas del caso
Hola qué posibilidad hay, de mandar una variable desde el archivo HTML al archivo contact.php y como se haría
Hola tengo el formulario implementado pero no me envía los mensajes.
me aparece “Lamentablemente el servidor no pudo entregar su mensaje.”
busque como arreglarlo pero no encuentro sera que me falta inlcuir algun archivo????
gracias
Hola a todos, he descargado el archivo y lo he probado con mucho éxito. También he leido los comentarios de todos y me llaman mucho la atención los que dicen que no han podido hacer que funcione el formulario, no se si saben que para probarlo deben subir los archivos al servidor de su página web, sólo desde ahí se pueden probar ya que contiene código PHP y estos no se visualizan en servidores locales, por lo demás quiero felicitar a Walter por compartir este post y a todos los que con sus aportes colaboraron para implementar mejoras al formulario…. Que Grandes che!!!
Hola Walter, he estado revisando el formulario, como te dije me funciona muy bien, pero tengo una duda, he hecho las pruebas del formulario y le he cambiado la dirección a la que debe dirigir los mensajes, solo para comprobar que en todas las direcciones que utilicé, siempre aparece en la bandeja de entrada esto: “Nobody”, y no el correo de la persona que envía el mensaje, como puedo modificar el PHP para obtener el correo del usuario del formulario para que aparézca como remitente de su mensaje y no la palabra “Nobody”..? Todo lo demás funciona perfectamente.
Desde ya te mando un abrazo, gracias por tu tiempo.
Hola excelente post, muchas gracias por compartirlo, lo estoy tratando de implementar, aparentemente funciona pues me dice que se envio el mail pero no me llegan los e-mail, podrias ayudarme
y nuevamente gracias por tu tiempo
hola
esta muy interesante este ejemplo, solo que a la hora de ponerlo en mi web, cuando le doy send me saca el siguiente error,
Unfortunately, a server issue prevented delivery of your message.
ojala me puedas ayuda
muchas gracias
Hola, he subido mi pagina a un servidor gratuito y me sale el siguiente error: Lamentablemente el servidor no pudo entregar su mensaje.
Porfavor estoy desesperado!!!!!!!!
Gracias!!!!!!!!
Hola Walter, descargué tu ejemplo de formulario de contacto con simplemodal.js y no funciona, tengo que modificar algo en el código para que ande ? no me doy cuenta qué es lo que pasa.Dame alguna pista. Saludos