Tutorial 2 – Enviar formulario de contacto en HTML5 con PHP

En un ejercicio pasado hemos creado un formulario de contacto en HTML5 y CSS3 con algunas de sus nuevas caracteristicas Formulario de contacto en HTML5 Y CSS3, Pero al haber recibido varios mensajes pidiendo ayuda de cómo hacer totalmente funcional este formulario en HTML, es decir hacer que dichos datos lleguen al correo destinatario o administrador del sitio, He decidido hacer esta segunda parte y completar el ejercicio. Esto lo podemos hacer fácilmente usando PHP como el lenguaje que nos procese dicho formulario. Bueno este será el tutorial de hoy.

En el formulario del tutorial en HTML pasado solo hacemos un cambio, que es cambiar en la etiqueta <form> el parámetro action a un archivo real que es el que vamos a crear en php que es la que va a tener la acción de procesar el formulario de contacto.

Seria algo asi:

Luego creamos un archivo .php que se llame contacto.php e insertamos el siguiente código:

Y ese es todo el código que hará el trabajo de procesar nuestro formulario para hacer que llegue a nuestro servidor de correo electrónico. Pero vamos a explicarlo un poco.

Lo primero es importar las variables, del formulario en el html a nuestro php y eso lo hacemos buscando el nombre de cada campo de entrada en nuestro formulario base. Ejemplo:

datos-form

Luego tenemos el bloque de preparación y recepción del mensaje como tal. Aquí especificamos de quien viene el mensaje, el asunto que se mostrara en la bandeja de entrada del servidor de correo (gmail, Hotmail, yahoo etc…), también el correo a quien va dirigido dicho mensaje es decir la destinataria de este mensaje y el contenido de este mensaje, el cómo se va a mostrar el contenido al momento de llegar al servidor de correo, y esto lo hacemos otra vez por medio de las diferentes variables que mencionamos antes.

Y por luego tenemos el último bloque de código que es un código condicional que tiene la función de mostrar y ejecutar una acción dependiendo la situación. Si el mensaje es correctamente enviado y no sucede algo inesperado se mostrar el mensaje “Gracias, su mensaje se envío correctamente.” De lo contrario, si algo sale mal, ya sea algún error del servidor o algo parecido e inesperado se mostrar el mensaje de error que es “Error: Su información no pudo ser enviada, intente más tarde”.

Y eso es todo, este código lo hice muy sencillo por si no tienes experiencia en lenguajes de programación y para que puedas utilizarlo manipularlo de una manera fácil y sencilla.

Espero que sea de utilidad este ejercicio de crear un formulario de contacto en php.

Eso es todo, Nos vemos en otro Tutosytips

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

68 Respuestas

  1. Daren dice:

    Hola Johanso muchas gracias por el post puse en practica tu tuto y se ve super profesional pero tengo un problema con el envio… me sale el error deque no se puede enviar hagalo mas tarde. este es mi codigo en contacto.php:

    Por favor ingrese sus datos en el siguiente formulario para recibir un asesoramiento más personalizado y estaremos en contacto con usted lo mas pronto posible.
    Llene todo los campos que detallamos a continuación:

    Nombre:

    Email:

    Teléfono:

    Empresa:

    Dirección:

    Ciudad:

    Mensaje:

    Enviar

    y este es mi contacto.php:

    ayúdame porfa.

  2. eljeshuu dice:

    me sirvio mucho pero por que se repetite dos veces el mail ? uso servidor vps

  3. Manuel dice:

    Hola Johanso, muchas gracias por este post, esta genial, gracias a el he aprendido un poquito de php, pero tengo un problema. Cuando entro en midominio.com/formulario.html , lo relleno y le doy a enviar, se abre en el navegador midominio.com/contacto.php y me dice que no existe, sin embargo si entro directamente en midominio.com/contacto.php me llega un email vacio. Sabes porque es? Muchas gracias!

  4. joed dice:

    para los que quieren regresar a la pagina del formulario despues de pulsar el boton enviar solo pongan esto empesando el codigo php

    echo “”;

    cambien el xxxxxxx por la direccion del formulario

  5. Uzziel dice:

    Muchas gracias, me sirvió al 100% todo lo que publicaste, en verdad lo agradezco.

  6. Uzziel dice:

    Mi duda es la siguiente: El php lo puedo crear en un bloc de notas o necesito algún editor de php ? porque al hacerlo en bloc, y le doy clic al boton no hace nada, ni siquiera puedo ver mensaje de confirmación ni de error de envío, ahora te informo que como apenas construyo la web lo estoy haciendo todo en la pc, es decir, no he subido nada a un servidor, crees que sea el problema ??

  7. Matias dice:

    Tengo dos consultas. La primera, es si tienen algún articulo relacionado con redireccionar el la página luego de enviar el formulario, para que no quede en blanco toda la web. Y en segundo lugar, saber si hay alguna manera de obligar al usuario a rellenar campos tales como nombre y email. Desde ya muchas gracias y el tuto esta fenomenal….

  8. Jesse dice:

    Hola, hice todos los pasos y cambie mi email, pero nunca llegan lo que escribo, siempre nadamas me sale “Error: Su información no pudo ser enviada, intente más tarde”, que hago o lo intento mañana?

  9. Eduardo dice:

    que tal johason en el post http://www.tutosytips.com/tutorial-formulario-de-contacto-en-html5-y-css3/ (no puedo comentar en ese post por eso comento aqui) es muy bueno pero tengo problemas al rato de ejecutarlo en IE9 no valida los campos y mi conocimiento no es lo necesario para poder solucionarlo jejeje tiene alguna solucion ..?

    • Johanso dice:

      Hola Eduardo, Para las versiones antiguas de este navegador la solución perfecta es utilizar javascript o algun plugin de jquery para la validación. ¿Si tienes algun problema me dices para ayudarte..?

  10. pedro alva dice:

    estoy tratando de hacerlo incluso descargue el ejemplo y lo corri en wampserver
    le coloque mi correo
    pero no me envia solo me mana intentalo mas tarde agradeceria me explicaras soy nuevo en esto

  11. Sara dice:

    GRACIAS, GRACIAS!! El mejor tutorial que he encontrado con diferencia. Claro y muy útil :))

  12. Eliseo dice:

    Hola johanso, tengo un problema, te explico: yo tengo un blog(blogger) que donde pienso poner el el formulario con una ventana(parecida a la tuya), si bien aun no lo insete en el blog, cuando lo voy a probar(uso dropbox para alojar los archivos) y lleno los campos y luego presiono enviar me abre el archivo php en el navegador y tampoco envia el e-mail, alguna solución? Gracias.

  13. Jorge Luis dice:

    Hola, Es excelente el aporte! Me ha funcionado perfectamente.
    Solo una cosa, como se podría hacer para que el mensaje del “die”(Gracias, su mensaje se envio correctamente.) no me salte a la página que procesa el código y se quede en la misma. Graciasss.

  14. pedro dice:

    Magnífico tutorial y el anterior tambien, muchas gracias por compartir tus conocimientos con los demás. lo he puesto en práctica y me falla una cosa, no sale lo que se escribe en mensaje, no entiendo nada de php, asi que te agradecería que me dijeses como hacer que salga el comentario, muchas gracias y enhorabuena por el blog

  15. nathWatson dice:

    Cuál es el problema si el mensaje y el name no se muestran en el correo enviado? envio el mensaje pero al llegar solo es visible el email. El nombre y el mensaje no se ven.

  16. Juan dice:

    Muchas gracias por el tutorial, he aprendido mucho y además me encanta el estilo.
    ¿Existe inconveniente algo para modificarlo visualmente a mi gusto y usarlo libremente?

    Un saludo y gracias nuevamente por el tuto, es con diferencia el más claro y con mejor aspecto que he visto por la red!

  17. arthusu dice:

    excelentes dos articulos man, solo que te voy ha hacer unas recomendaciones espero no me las tomes a mal sino alreves para mejorar un poquito la verdad tu me ayudastes asi que quiero hacer lo mismo… por ejemplo en donde validas los campos le agregas la funcion addslashes esta funcion te pueden vulnerar facilmente con un ataque xss por lo que te recomiendo usar mejor htmlentities o htmlspecialchars (con la opcion ENT_QUOTES) ahora tambien le podrias agregar un captcha (http://www.desarrolloweb.com/articulos/poner-captcha-en-3-pasos.html) al formulario asi no te enviarian spam los bots o cualquiera que no sea un humano, si el captcha se descuadra borra la clase del formulario y listo 😛 bueno amigo muchas gracias esas son mis recomendaciones un saludo 🙂

  18. Luis Alarcon dice:

    Excelente, muy bien explicado muchisisimas gracias

  19. SirVairon dice:

    Buenas! Increible aporte y tallado! Tengo un problema con el formulario. Inserto la tabla html, y el css correctamente, tambien tengo el archivo alojado en la carpeta del tema (uso wordpress). Lo que no consigo es ejecutarlo correctamente pq al acceder a la pagina me aparece directamente en pantalla “Gracias, su mensaje se envio correctamente.” ¿Que hago mal?
    Gracias por el tiempo dedicado! ^^

  20. liz dice:

    podrias dar un tutorial de como usar un formulario con PHP y html por favor
    como hacer los arryas variables
    etc

    te lo agradeceria mucho

  21. Isi dice:

    Buenas tardes,
    Quiero añadir al formulario una casilla donde antes de enviar el email se acepte un aviso legal. Por favor me podéis ayudar?
    Muchas gracias.

    • Luis Alarcon dice:

      Suponiendo que el usuario debe aceptar si o si los avisos legales, debes primero que todo validar del lado del cliente, que al apretar click (submit) valide si el usuario ha aceptado las condiciones, si no las a aceptado, no puedes enviar el mail por lo que te podría ayudar con el javascript

      dentro del head del html pone esto tal cual

      function estado(){
      if (document.frm.aceptar.checked) {
      return true;
      } else {
      alert(“No ha aceptado las condiciones”);
      return false;
      }

      *Siendo frm el nombre del formulario y aceptar el nombre del checkbox

      Ahora añade el checkbox
      Acepta condiciones

      *Todo esto dentro del formulario

      último paso… añade en el boton submit
      la propiedad onclick=”return estado()”

      Me avisas, Saludos

    • Luis Alarcon dice:

      shuuu no me di cuenta que no puse el checkbox así que eso se pone dentro del form
      Aceptar terminos y condiciones

  22. Juangra dice:

    Hola:
    Increible tu blog me encanta.
    Tengo un problema, hago todo como pones en el tutorial y me va bien pero cuando le doy a enviar me sale un mensaje de guardar o abrir el archivo php, ¿porque puede ser?
    Un saludo y muchas gracias

  23. Isi dice:

    Todo solucionado, gracias

  24. Isi dice:

    Buenas, tengo un problema, me llegan bien los correos pero exceptuando el correo de quien lo envía todo lo demás llega en blanco. Me podeis ayudar?
    Gracias.

  25. Josue dice:

    Alguien podria decirme si hay que configurar algo en el servidor para que funcione ya que a mi no me ha funcionado me arroja el die(Error: Su informacion no pudo ser enviada, intente mas tarde)…

  26. Leanro dice:

    Te pregunto, como se controla la apariencia del mensaje de enviado , para que no tire todo el diseño , y quede en blanco?

  27. cesar dice:

    buenas necesito es aprende a como cambiar el action del form pues depende de la opcion que tome el usuario se dirige a unaa pagina o a otra

  28. Pepe dice:

    Hola Johanson, gracias por el aporte…
    Tengo una pregunta. ¿Que hay que poner para adjuntar una o mas imágenes en el correo?

    • Johanso dice:

      Hola pepe, toca utilizar algo asi: HTML
      input type=”file” name=”archivo” />
      input type=”submit” value=”Subir” name=”subir” />
      ——–
      Y en el PHP utiliza:

      < ?php if($_POST['subir']){ $archivo = $_FILES['archivo']['name']; $tmp = $_FILES['archivo']['tmp_name']; $destino = "http://www.direccionweb.com/carpeta/".$archivo; @move_uploaded_file($tmp,$destino); } ?>
      ——
      espero que te sirva.

  29. leandro dice:

    hola queria saber si el formulario se envia sin ningun problema desde sistemas moviles como smartphone y otras celulares??? gracias

  30. andreina dice:

    nada fue un herror mio disculpa y nuevamente gracias por el tutorial esta chevere un saludo !

  31. andreina dice:

    hola disculpa todo funciona bien solo que la parte del mensaje en mi email no llega nada

  32. andreina dice:

    Hola mil gracias por el formulario funciona perfectamente . suerte !

  33. jordi dice:

    Hola!
    El contacto es muy elegante y funciona muy bien.
    Ahora bien, cuando intento enviar me da error.
    ¿Cómo hago para recibir los mensajes en mi correo?

    Muchas gracias de antemano

  34. Esteban dice:

    Johanso, terrible blog, recién acabo de conocerlo, muy buen trabajo y sin duda alguna el eslogan muy bien puesto, saludos desde Chile. (no tienes publicidad o donativos, que yo te invitaba un café)

  35. julian dice:

    hola muy buen ejercicio pero tengo una pregunta si podrias respondermela tengo ese formulario en una hoja html al momento que pongo enviar. manda a la hoja de php y aprecia el mensaje de si fue enviado o no pero quisiera saber como hago para que ese mensajde de :Gracias, su mensaje se envio correctamente. aparesca en la misma hoja html debajo del form.

  36. dAVIDIAN dice:

    Hola, Es excelente el aporte! Me ha funcionado perfectamente.
    Solo una cosa, como se podría hacer para que el mensaje del “die”(Gracias, su mensaje se envio correctamente.) no me salte a la página que procesa el código y se quede en la misma. Graciasss.

  37. Cesar Mendez dice:

    Hola muy buen tutorial, solo tengo una duda, tu ejercicio lo probe en mi servidor y si llega el correo pero basio sin informacion solo con la info del correo electronico espero me puedas ayudar 😀

    • Johanso dice:

      Hola Cesar, si modificastes el codigo para adaptarlo a tu necesidad, Fijate en el nombre de los input en el html no deben de ser diferentes a las variables del archivo de php, ya que este lo que hace es recoger la información de los campos de textos por medio de la varfiable, es decir deben de ser iguales. Saludos

      • Cesar Mendez dice:

        Hola tenia unos dias que no me pasaba por aqui muchas gracias ya quedo el formulario, me sirvio mucho tu ayuda! gracias Saludos!

  38. amigo Johanso, me gustaria que respondas mi peticion. Tengo una sugerencia para este tipo del formulario que publicastes ps en el navegador IE 7 no trabaja con los efectos de html5 sera que hay que agregar algun script para que trabaje con internet explorer 7… espero tu respuesta y muy buenos tutoriales que realizas saludos desde Perú

  39. un formulario de registro con validacion de campo y validacion de usuarios conectando con una base de datos que tengo.
    un ejemplo es la web http://www.taringa.net/registro
    fijate en el campo apodo tiene un validador que se conecta con la base de datos y yo kiero parecido a esa apariencia con efectos

  40. hola amigo muy interesante el formulario con efectos de css y html5. amigo mi pregunta es si podrias publicar un tutorial sobre formulario de registro con html5 parecido a los efectos de este formulario que hicistes, pero con validacion de usuario

  41. my sources dice:

    This information is priceless. When can I find out
    more?

  42. vanina dice:

    hola Nuevamente yo con el formulario, este formulario me funciona perfecto si lo uso solo con el documento de índex que vos haces pero si copio el código y lo pongo en mi pagina no funciona, que podrá ser? Saludos y muchas gracias por ayudarme a entender

    • Johanso dice:

      Hola Vanina, bueno debes de fijarte de la ruta, si cambias de pagina el formulario, fijate en cambiar la ruta donde se encuentra el documento procesador, el php action=”contacto.php” si no se encuentra en la misma carpeta deberas de cambiar la ruta Ejemplo: action=”carpeta1/carpeta2/contacto.php”

  43. Michel dice:

    Hola, muy buen tutorial, Mister johan! Quisiera que me ayudes con un problemilla. Tengo el formulario todo ok. Pero necesito crear nuevos campos. Ejemplo … TELEFONO, DIRECCION, DNI . Gracias! 🙂 Saludos

    • Johanso dice:

      Hola Michel,, Facil. si tienes poco conocimiento en esto solo copia y pega y lo mas importante.. Cambiar los datos del input name,,etc y el label de cada punto, y en el php hace igual,,

  44. had me going dice:

    I know this website offers quality depending articles and additional material, is there any other
    website which gives these kinds of information in quality?