Tutorial de formulario PHP-JQUERY-AJAX-XHTML-CSS

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):

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
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

Related Posts Plugin for WordPress, Blogger...

Share

alevsk

Escrito por Alevsk

Tengo 21 años, En estos ultimos 6 años he trabajado como Senior Developer en varias empresas y actualmente estoy con Websec. Soy autodidacta, me interesan temas como la ingeniería inversa, el mundo Linux/OSx, las auditorías de seguridad en redes, la seguridad web, las tecnologías inalámbricas, desarrollo web/movil y el underground Informático ... Algunos dicen que soy un Geek frustrado. Sigueme en @Alevsk
Puedes Comentar, o hacer un trackback de tu propio sitio.


31 Comentarios en “Tutorial de formulario PHP-JQUERY-AJAX-XHTML-CSS”

  1. karol dice:
    Google Chrome 10.0.648.205 Windows 7

    MUy bueno gracias te felicitoo

  2. Leonardo dice:
    Google Chrome 14.0.835.186 Windows 7

    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.

    • Alevsk dice:
      Google Chrome 14.0.835.186 Mac OS

      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

  3. J SILVA dice:
    Firefox 6.0.2 GNU/Linux

    GENIAL. NECESITABA ALGO ASI HACE TIEMPO, LASTIMA QUE NO ENCONTRE TUS POSTS ENTONCES, PERO ME SERVIRAN PARA OTRAS COSAS.

  4. J SILVA dice:
    Firefox 6.0.2 GNU/Linux

    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.

    • Alevsk dice:
      Google Chrome 15.0.874.121 Mac OS

      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

  5. elgenuino dice:
    Firefox 7.0.1 Windows XP

    Felicidades, esta super

  6. Alevsk dice:
    Google Chrome 16.0.912.77 Mac OS

    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

  7. GnnSLxndR dice:
    Google Chrome 17.0.963.56 Windows 7

    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!

  8. fabian dice:
    Firefox 11.0 Windows 7

    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

  9. Helen dice:
    Google Chrome 18.0.1025.151 Windows 7

    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

  10. Alevsk dice:
    Google Chrome 18.0.1025.151 Windows 7

    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(“[email protected]”, “Comentario desde la Web”, $mensaje, “From: Sitio[email protected]>“);

    Deben de modificar [email protected] 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

    • Helen dice:
      Google Chrome 18.0.1025.151 Windows 7

      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 :/

      • Helen dice:
        Google Chrome 18.0.1025.151 Windows 7

        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!

        • Alevsk dice:
          Google Chrome 18.0.1025.151 Mac OS

          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

  11. Christopher Ordenes dice:
    Google Chrome 18.0.1025.151 GNU/Linux 64 bits

    Gracias por el tutorial, me ha despejado de varias dudas que tenia.

    Slds y nuevamente gracias!!!!

  12. LalO dice:
    Firefox 12.0 Windows 7

    amigoo podrias mandarme el archivoo de este tuto.. graciazz =)

  13. emerson dice:
    Firefox 17.0 GNU/Linux 64 bits

    hola Alevsk excelente titorial lo he seguido y funciona muy bien pero tengro problemas con campos de tipo select para hacer las validaciones, me podria ayudar diciendome como se hacen en este tipo de formulario. desde ya mil gracias

Escribe un comentario