Ya tenemos hecho nuestro formulario con PHP, con AJAX y comprobación de errores. Pero no lo hemos visto en acción:

Demo Descarga

Si os descargáis el archivo, recordad cambiar en el archivo post.php mi e-mail por el vuestro.

Si tenéis problemas con la llegada de los mensajes (probad un par de veces insertando en el formulario emails distintos), echadle un ojo a este comentario.

Formulario con errores
Formulario con errores
Formulario relleno correctamente
Formulario relleno correctamente
Formulario enviado correctamente
Formulario enviado correctamente
Formulario recibido en la bandeja de entrada
Mensaje en la bandeja de entrada de GMail
Mensaje recibido y abierto

Toda la serie:

51 pensamientos en “Crear un formulario con PHP y Javascript [6]: Resultado y demostración

  1. Imagen de AnonymousAnonymous el dijo:

    hola q tal amigo espero que me puedas ayudar aun soy novato con PHP … veras estoy haciendo un sistema colegio en php… bueno veras hize un mantenedor simple editar, registrar,eliminar …tambien le agregue un menu y que las paginas se carguen con AJAX … … ahora quiero que enviee desde un formulario por AJAX …pero no sale

    osea desde el menu … (por ejemplo )cargo con AJAX la pagina de registrar docente .. se carga el formulario en un DIV de ajax (llamado desde el menu) ….luego desde ese form quiero enviar usando AJAX tambien pero no me funciona … si guarda en la base datos pero igual se dirige a otra pagina..cosa que con el ajax no deberia pasar

    si me pudieras proporcionar algun ejemplo …me ayudarias un monton gracias :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      No sé cómo es tu código, pero seguramente estés usando el evento "onsubmit" al enviar el formulario. Para que no se redirija tienes que usar el método preventDefault del evento. Es decir:
      function onSubmit(e){//Función cuando se envía el formulario
      // la variable e es el evento, que en IE es global, así que las igualamos
      e = e || window.event;

      //Aquí envías el formulario con ajax
      enviarForm();

      //Aquí dices que no quieres que se redirija, con la forma estándar (preventDefault), o con la forma de IE (returnValue)

      if( typeof e.preventDefault === 'function' )
      e.preventDefault();
      else e.returnValue = false

      return false
      }

  2. Imagen de AnonymousAnonymous el dijo:

    Buen formulario, master! Pero tambien me envia el mensaje: "Hubo un error al enviar el formulario", siendo que el correo se envia correctamente.

    Como dato, no hice ningun cambio mas que al css y al index, solo para corregir la posicion dentro de la pagina.

    Has dado con la solucion?

    Saludos.-

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es posible, que sin querer hayas agregado algún espacio al archivo PHP (antes de <?php o después de ?>). Si es el caso, sólo es cambiar eso.

      Si no, siempre puedes hacerlo desde javascript. Podrías poner encima de:
      function emailVerification

      esto:

      function trim(str){
      return str.replace(/^\s*|\s*$/g,"");
      }

      y cambiar donde pone:
      request.responseText !== "SUCCESS"
      por
      trim(request.responseText) !== "SUCCESS"

      Esto debería de eliminar el espacio extra y funcionar ;)

  3. Imagen de AnonymousAnonymous el dijo:

    Definitivamente es otro el problema. Resubi los archivos que adjuntaste con todo listo, le cambie solo el correo al php y aun me envia el mismo error.

    Cambie lo que me dijiste, pero tampoco se arreglo, incluso DW me tira errores con la sintaxis.

    Probe con distintos navegadores y nada.

    Algun otro datito?

    • Imagen de AnonymousAnonymous el dijo:

      Creo que he dado con el problema!
      El error llegaba bajo la sentencia (creo que se llama asi jajaja):

      if( request.responseText !== "SUCCESS" ){

      Que respondia con un mensaje de error y debia ser de confirmacion porque el formulario trabaja correctamente. Asi que cambie eso y ni un problema.
      Pero en alguna parte debe ir lo de: "Hubo un error al enviar el formulario", porque por algo lo agregaste, verdad?

      Saludos y muchas gracias por tu tiempo.

    • Imagen de AnonymousAnonymous el dijo:

      Ahora si que si, es mas, el mensaje dejo de llegar al "correo no deseado".

      Muchas gracias por el material, la ayuda y el tiempo. Un abrazo, estimado.-

      • Imagen de Emilio Cobos Álvarez el dijo:

        De veras siento haber tardado tanto en responder, se me pasó :S (suelo responder a todo como mucho en 3 días, pero no se cómo pude pasarme éste).

        Para enviar un archivo con AJAX es más difícil, tendrías que usar el objeto FormData (por ahora en Chrome, Safari, Firefox y Opera), pero si no lo quieres hacer con AJAX tendrías que añadir un MIME-Type diferente en los headers. Debería de quedar algo así (con los datos ya recogidos (guardado el archivo en la variable $file)):

        $content = chunk_split(base64_encode(file_get_contents($file['tmp_name'])));

        Y luego mandarlo con MIME-Type Multipart/mixed. Trataré de hacer un artículo sobre esto pronto (no me puedo alargar tanto en un comentario ;))

  4. Como puedo hacer un boton o un formulario para reportar links caidos Blogger
  5. Formulario de contacto: Añadiendo el adjunto | Emilio Cobos-CMC
  6. Imagen de davisdrumkey el dijo:

    Amigo estaba implementando esto, y me e fijado en algo.

    por ejemplo si en el campo “e-email” introduzco un correo de domino hotmail.com no se envia y uno de domino gmail.com se envia ajaja

    nose que onda :/

    • Imagen de Emilio Cobos Álvarez el dijo:

      Eso es por la combinación entre el servidor en el que está alojado y el receptor.

      Hasta ahora mismo tenía la demo alojada en un servidor gratuito. Como tu bien has dicho, al enviarlo desde un correo de hotmail (o cualquier otro que no fuera gmail), símplemente no llegaba.

      Sin embargo acabo de alojarlo en mi servidor, y funciona.

      Se me ocurre que el problema está en que el mensaje se envía, pero el receptor, basándose en el servidor que lo envía (un mensaje desde un servidor gratuito lo toma por menos verídico que uno de pago por razones obvias: se suelen usar para hacer spam), y en la dirección del remitente (considerará verídica una dirección de gmail), filtra el correo, y ni siquiera lo almacena.

      Solución: Cambiar en post.php la línea:

      	$cabeceras .= "From: $nombre< $email>\r\n";

      Por:

      	$cabeceras .= "From: tuemail@gmail.com\r\n";

      La única nota a tener en cuenta es que no podrás contestar al que quiso contactar contigo como contestarías a un email normal, sino que debes crear un mensaje nuevo al email de la persona que quiso contactar contigo.

      • Imagen de davisdrumkey el dijo:

        Muchas gracias por responder, anoche encontré otra solucion que fue un simple espacio jajaja

        $cabeceras .= "From: $nombre< $email>\r\n";

        a esto:

        $cabeceras .= "From: $nombre < $email>\r\n";

        un espacio entre “$nombre” y

        y debe ser por la sintaxis que ocupa hotmail al escribir el nombre de la persona y entre las “” el correo.

        Saludos! gracias por la respuesta temprana ;)

      • Imagen de RonaldRonald el dijo:

        Hola tengo el mismo problema veo que ya lo solucionaron, mi problema como principiante es que no hayo esas líneas donde están para modificarlas, no se encuentran en los archivos que descargue en ningún lugar, Gracias

      • Imagen de RonaldRonald el dijo:

        Gracias @davisdrumkey tu solución me sirvió ya encontré esa línea estaba en message.php :) Gracias ahora si ya llegan los de Hotmail :)

  7. Imagen de JorgeJorge el dijo:

    Me sale esto: Warning: mail() [function.mail]: SAFE MODE Restriction in effect. The fifth parameter is disabled in SAFE MODE in /mounted-storage/home139/sub009/sc75945-APLD/asesorespoliticos.es/contacto/message.php on line 97

    • Imagen de Emilio Cobos Álvarez el dijo:

      Lo cierto es que no sabría qué decirte salvo que contactes directamente con ellos y les preguntes acerca de lo necesario para enviarlo.

      Lo cierto es que de paso podrías decirles que actualicen PHP (safe mode ha sido eliminado recientemente), pero bueno, eso es secundario.

  8. Imagen de martin el dijo:

    HOla emilio! buenisimo tu formulario la verdad me viene muy bien porque recien estoy arrancando en esto y aprendiendo! ahora lo unico que no me funciona son dos cosas… la primera es que me sale un error Warning: filter_var… podras ayudarme? gracias

  9. Imagen de AneAne el dijo:

    He usado el formulario en mi página web y todo funciona perfectamente pero ahora, he metido unos campos que no son obligatorios y me pone que el e-mail se envía, pero al recibir el correo las variables que no eran obligatorias no llegan. No se si los tengo que meter en el script.js o que debo hacer. Podrías ayudarme?? Gracias!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, dime qué es exactamente lo que quieres meter :P En principio lo que tienes que hacer es alterar el php para que se envíe también, y alterar el js sólo si quieres validación (que no la quieres porque son datos voluntarios).

      • Imagen de AneAne el dijo:

        Con alterar el php me quieres decir que modifico el formulario y luego el archivo post.php verdad? He añadido los campos y luego en el archivo post.php los recibo con POST pero no me llegaban… He tenido que meter todas las variables en el js para que me llegasen al email… También quiero añadir un botón de radio pero no se como validarlo en el js. Gracias!

  10. Imagen de marcomarco el dijo:

    Hola gracias por tu ejemplo, me funciona todo correcto, solo una consulta, como puedo agregar la validación a radio buton y que siga funcionando correctamente el formulario…. saludos y gracias

  11. Imagen de ramonramon el dijo:

    Hola, tengo puesto tu formulario en mi web y todo perfecto, gracias.
    Lo curioso que funciona a la perfección en todos los navegadores excepto internet explorer 11,
    Este no valida ningún campo y además tanto los errores como la confirmación salen en una nueva página, por lo que toca darle al botón de atrás para volver ya que dicha página sale totalmente en blanco.

    Saludos

  12. Imagen de ramonramon el dijo:

    Gracias por contestar. Lo bueno que la consola de IE11 dice:
    La Consola JavaScript está conectada y acepta comandos.
    Puedes ver el formulario en: rservicios.com/tmr/contacte.html

  13. Imagen de FerminFermin el dijo:

    Antes de nada gracias por el tiempo empleado en realizar le tutorial y enseñarnos a los demás.
    En mi caso tengo contratado el servidor en 1and1 y no funciona mail. En cambio con phpmailer si funciona.
    ¿Se puede implementar en tu código la estructura de phpmailer?.
    Gracias.

  14. Imagen de JuanJuan el dijo:

    Hola necesito presentar un proyecto en la escuela no importa que tan sencillo sea pero necesito que corra desde mi maquina. tendras algo que me pueda ayudar? Este Formulario me parece excelente pero no tengo pagina web para agregarlo. Alguna sugerencia? muchas Gracias

    • Imagen de davisdrumkey el dijo:

      Estimado Juan!

      Para hacer funcionar este formulario se necesita PHP, pero eso lo puedes solucionar instalando un server web y de correo en tu computadora personal! o aun mas sencillo un hosting gratuito para que puedas probarlo sin quebrarte la cabeza con el tema del server. Te recomiendo Nixiweb es gratuito y sin publicidad!

      http://www.nixiweb.com/

      Saludos!

Deja un comentario

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

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> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.