Hola, estoy creando un tutorial explicativo para que los mas nuevos aprendan a crear algo que hoy en dia es muy utilizado en las aplicaciones online, un formulario de contacto, después veremos como crear cosas mas complejas partiendo de esto.
Es el mismo principio para crear formularios que inserten información en bases de datos o que hagan determinada acción, etc.
Lo que intento realizar aquí es combinar distintos lenguajes de los que he venido publicando tutoriales, entre ellos, php, y javascript, he dividido el tutorial en 6 partes para que sea mas facil y comprensible su lectura.
El orden de los tutoriales es el siguiente (por si alguien anda medio despistado):
- Crear un formulario 2.0 usando CSS y HTML
- Usando Jquery para darle vida a nuestro formulario
- Realizar validaciones con Jquery del lado del cliente
- Hacer uso de la tecnología Ajax para mandar los datos al script PHP sin recargar la pagina
- Realizar validaciones con PHP del lado del servidor
- Finalmente enviar el mensaje a un mail
Dropbox
Descargar formulario bonito hecho con php-jquery-ajax-xhtml-css (Descargan tutorial.zip)
Skydrive
Descargar formulario bonito hecho con php-jquery-ajax-xhtml-css (pueden ver la estructura del proyecto y ahi mismo descargar tutorial.zip)
salu2
[five-star-rating]Tambien te puede interesar:
MUy bueno gracias te felicitoo
De nada Karol, gracias por visitar el blog
Hola Alex, está interesante el material. ¿Ya desarrollaste las partes que indicas allí que están pendientes? Yo podría echarte una mano si lo aceptas.
Hola Leonardo, gracias por visitar el blog, aun no escribo esos post por falta de tiempo, pero ya agende un horario para hacer esas partes que faltan mañana (terminare el tutorial de una vez por todas xD).
salu2
GENIAL. NECESITABA ALGO ASI HACE TIEMPO, LASTIMA QUE NO ENCONTRE TUS POSTS ENTONCES, PERO ME SERVIRAN PARA OTRAS COSAS.
ESTABA CHECANDO TU SITIO Y ME GUSTO EL ESTILO QUE TIENE, SOY PROGRAMADOR WEB Y DIGAMOS SOY BUENO EN ESO, PERO PARA DISEÑAR EL ESTILO VISUAL DE PÁGINAS SOY UN ASCO, PODRIAS RECOMENDARME ALGUNOS TUTORIALES, LIBROS. ETC. QUE CONSIDERES SEAN DE UTILIDAD PARA LLEVAR ACABO TODO EL PROCESO DE DISEÑO?
GRACIAS POR ANTICIPADO.
Hola, en mi opinion el mejor consejo que te puedo dar es que uses la creatividad
, puedes primero realizar el mockup de tu sitio (un dibujo a lapiz si deseas) y despues ya teniendo conocimientos sobre css (hojas de estilo en cascada) y javascript (te recomiendo que aprendas a utilizar alguna libreria como jquery) se sera muy facil comenzar a pasar a codigo tu idea 
, sobre libros y tutoriales te recomiendo los video tutoriales del maestro Jesus Conde que puedes encontrar en http://www.videotutoriales.com
salu2
Felicidades, esta super
Gracias por tu interes amigo
salu2
omarcito
hola alguien lo tendra para que me lo envie esta padrisimo jagr085@gmail.com gracias
Hola compañero, ya te lo envie a tu correo, salu2
Muchas gracias, lo espero, este si que se ve demasiado de bueno! trae el html para insertarlo directo a la plantilla y no insertarlo por frame
Ola amigo una pregunta podras mandarmelo a mi correo es que no puedo descargarlo mi correo es slowepico@gmail.com
porfa quiero estudiar eso que hicste gracias amigo saludos
Hola amigo, gracias por visitar mi blog, decidi subir el formulario de contacto a mi carpeta de DropBox para mayor facilidad, aqui esta el link para que lo descargues, http://dl.dropbox.com/u/47704638/contacto/tutorial.zip
Hola, debido a que el servidor donde estaba almacenado el código del tutorial ya no esta X.X (RIP megaupload) he subido el proyecto a otro servicio para compartir archivos, tienen 2 opciones:
Dropbox
http://dl.dropbox.com/u/47704638/contacto/tutorial.zip (Descargan tutorial.zip)
Skydrive
https://skydrive.live.com/?cid=08814bef055a8755&id=8814BEF055A8755%21399 (pueden ver la estructura del proyecto y ahi mismo descargar tutorial.zip)
salu2
Excelente formulario compa, yo le estoy tirando a la onda ha jquery ya se lo basico,css3 y html 5 creo q me defiendo a la perfeccion pero para diseñar y que se vea Bonito me falta bastante hahahahaha.
una pregunta…
quiero manejar perfectamente ajax con jquery! que libro me recomienda o videotutorial?
graxx por compartir tu codigo voy a ojearlo para ver como trabajas ajax
saludes!
Hola amigo, gracias por visitar mi blog
, te recomiendo el libro de http://www.amazon.com/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857, sobre todo el capitulo de peticion ajax, esta muy bueno, seguro encuentras el pdf en google 
salu2
ffffff
ffffffhhhhh
Que tengo que hacerle para que cuando le den enviar formulario, esa informacion llegue por ejemplo al correo del dominio de mi empresa o al mio personal?
Gracias
Pregunto lo mismo que Fabian, necesito que el mensaje llegue a una casilla de correo, agradezco la respuesta ya que el formulario esta muy bueno
Hola @fabian y @Helen, gracias por su interés en el tutorial, para hacer lo que ustedes quieren es bastante sencillo, tan solo tienen que modificar el archivo mail.php y en la linea donde esta el siguiente código:
mail(“fulano@hotmail.com”, “Comentario desde la Web”, $mensaje, “From: Sitio“);
Deben de modificar fulano@hotmail.com por el correo donde deseen que llegue el mensaje
.
Cualquier duda por favor pónganla en comentarios y tratare de responder a la brevedad posible.
salu2
Gracias por la respuesta, pero sabes que probe subir el formulario tal cual a un dominio y me anda perfecto. Lo probe en la pagina web que estoy desarrollando y no me funciona, puse el php, todos los js, y nada nada, algo me debe estar faltando, hace horas que lo estoy tratando de resolver, lo loco es que se que funciona
Si queres echar un vistazo el formulario esta en http://www.verapelle.com.ar/contacto.html :/
Ya lo solucioné! Yo habia sacado el campo de “sitio web” y me generó este problema, lo deje y anda lo mas bien, no se por que pero todavia no tengo los conocimientos suficientes para adaptarlo con un campo menos. Muchas gracias por compartirlo!
Me alegra mucho que hayas resuelto el problema
, una disculpa que no pude responder antes es que estaba haciendo algunos cambias en la plantilla del blog hehe y tengo que estudiar para un examen de mañana, bueno cualquier duda sabes donde contactarme :3.
salu2
Gracias por el tutorial, me ha despejado de varias dudas que tenia.
Slds y nuevamente gracias!!!!