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

33 pensamientos en “Tutorial de formulario PHP-JQUERY-AJAX-XHTML-CSS

    1. Alevsk Autor
      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

      Responder
  1. J SILVA
    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.

    Responder
    1. Alevsk Autor
      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

      Responder
  2. Javier
    Firefox 9.0.1 Windows XP

    hola alguien lo tendra para que me lo envie esta padrisimo [email protected] gracias

    Responder
      1. Javier
        Firefox 9.0.1 Windows XP

        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

        Responder
  3. andres
    Firefox 10.0 Windows 7

    Ola amigo una pregunta podras mandarmelo a mi correo es que no puedo descargarlo mi correo es [email protected]
    porfa quiero estudiar eso que hicste gracias amigo saludos

    Responder
  4. GnnSLxndR
    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!

    Responder
  5. fabian
    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

    Responder
  6. Helen
    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

    Responder
  7. Alevsk Autor
    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“);

    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

    Responder
    1. Helen
      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 :/

      Responder
      1. Helen
        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!

        Responder
        1. Alevsk Autor
          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

          Responder
  8. Christopher Ordenes
    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!!!!

    Responder
  9. emerson
    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

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>