#3 Formulario de contacto Creativo – Enviar datos al correo con PHP

En este nuevo tutorial veremos como enviar los datos por medio de PHP del formulario que estructuramos con HTML5, diseñamos con CSS y validamos con JAVASCRIPT.

Parte 1 Formulario de contacto Creativo – Html5, Css

parte 2 Formulario de contacto Creativo – Validaciones con Javascript

Y ahora veremos la tercera parte, este es el resultado.

Lo primero que tenemos que hacer es vincular el archivo .php que procesara el formulario e incluir el método en que se enviaran los datos, que en este caso será el método POST. Esto lo hacemos en el archivo .html que contiene el formulario, dentro de la etiqueta form.

indicar metodo post

Seguidamente creamos el archivo prose-form.php para hacer el programa que nos procesara el formulario y hacer que nos llegue a nuestro correo electrónico.

En el archivo prose-form.php ingresamos el siguiente codigo, ya lo explicaremos.

primero:

Hacemos esta condicional y decimos que si algunos de los campos que son obligatorio esta vacío ejecute un mensaje de error, pero si no están vacíos ejecute el código para procesar el formulario.

Cabe anotar que este es un tipo validación que hacemos con el PHP, por que ya la validación del formulario la hicimos con JAVASCRIPT, pero recuerda que puede haber alguien que desactive de su navegador Javascript y esta validación no hará efecto. Por eso nos curamos en salud y hacemos esto con PHP.

Segundo:

Lo que hacemos es escribir a que correo llegara el mensaje en el $to (colocar tu correo electronico), en los $headers, colocamos un tipo de codificación para este mensaje, también de quien es el mensaje, nos aparecerá en la bandeja de entrada el nombre de quien lo envía, esto lo hacemos por que rescatamos la variable nombre del formulario, y en el $tema colocamos el titulo del mensaje, lo que también veremos el la bandeja de entrada de nuestro servidor de correo y por ultimo el mensaje, este lo codifique para mostrarlo en una tabla, con color de fondo en la columna izquierda y un ancho equivalente en porcentaje, dentro de las celda de la derecha llamamos a cada dato del formulario por medio de las varibles de cada campo del mismo. (esto lo puedes diseñar a tu gusto, ya sea con tablas o divs)

Por ultimo, indicamos que el formulario se enviara por medio de la función mail con los parámetros asignados, si no hay error el formulario se enviara al correo antes indicado , y se mostrara el mensaje “Gracias por sus comentarios”, pero si hay algún error, lo que escribimos en la segunda línea, algún campo vacío y no funciona la validación que hicimos con javascript, se mostrara el mensaje “No se puede enviar el formulario, verifica los campos”.

una vez enviado el formulario, recibiremos un mensaje igual a este:

formulario de contacto
Recuerda que esto solo funcionara en un servidor web.

Y esto es todo, nos vemos en el siguiente tutorial. Espero que este te sirva.

Nota !!

Si queremos que una vez se envie el formulario de contacto no muestre el texto de echo de php, si no que muestre una pagina personalizada o lo lleve a algún enlace especifico, podemos hacer algo como lo siguiente.

Esto lo que hace, es que cuando esté todo correcto, cuando se cumpla las condiciones para el envio del formulario, cuando este se envíe se refresque la página y redirija a la url que nosotros especifiquemos en el CONTENT.

Hay muchas formas de hacer esto, pero creo que esta seria la mas fácil. Espero que te sirva.

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

73 Respuestas

  1. diego dice:

    Hola, Johanso. Te agradezco el tuto.
    Realicé mi propio form pero usé tu código php, me sale el mensaje de enviado pero no lo recibo. El archivo .php lo subí a hostinger, puse mi mail en $to, la hoja de .php tiene el mismo nombre en el action del form de html y el method post. También miré en la bandeja de correo no deseado y nada. Tienes idea qué me puede faltar??

  2. iriam dice:

    Hola, muy útil la entrada pero tengo una gran duda. ¿Cómo haría para que una vez se envie el formulario de contacto se muestre un texto de un alert de javascript (‘datos enviados’ o ‘error al enviar datos’) pero en la página html? Y más específicamente, en la donde se encuentra la tag …

  3. Javier dice:

    Buenas,

    Con tu permiso he utilizado el código y me ha resultado muy útil. Lo he adaptado a mi web y me encanta cómo ha quedado.

    Me gustaría saber si podrías guiarme para añadir un campo para adjuntar archivo. Es lo único que me falta para terminar el formulario.

    Gracias.

  4. Sergio dice:

    Buenos días, acabo de descargar los ficheros para analizarlos mejor y al descomprimir aparece un fichero “PIE.htc”, me gustaría saber que es y ‘con que se come’. Muchas gracias por el tutorial!!!

  5. hector dice:

    Hola johan, tengo un problema le doy en enviar y no me llega la información a mi correo

  6. Carlos dice:

    Saludos! Queria decirte que es un muy buen tutorial sobre como hacer formularios. Lo único que yo hice mi formulario con los pasos 1 y el 3 (solamente la validación por php). Entonces cuando relleno los datos en el formulario y le doy a neviar me salta siempre el mensaje de ‘rellena los campos que faltan’. Acepto el popup de alert y luego se queda el navegador en blanco, no me aparece ningún error ni nada.
    Lo he seguido todo el pie de la letra.

  7. Gian Pierree dice:

    una consulta, quiero que el mensaje “su mensaje ha sido enviado” me cargue en la misma pagina.

  8. Paul dice:

    Hola Johanso, oye ya tengo los archivos pero al presionar enviar, me manda a una página mostrandome el código del php ¿Me podrías ayudar?

  9. Jesús dice:

    Excelente aporte, me funciono a la perfección, solo que nada mas acepta el correo de gmail, el correo de mi hosting y el de Hotmail no lo acepta, pero gracias por compartir tu conocimiento

  10. Antonio dice:

    Hola!

    Me ha servido tu código pero quiero hacer una cosa que tengo en otra web y no tengo ni idea de como hacerlo.

    El formulario lo tengo creado en CSS y tengo un sendmail.php donde he integrado la verificación del mensaje, y claro se va a otra página.

    Lo que quiero es que ese mismo mensaje me lo muestre en la misma página del formulario, borrando así todo el formulario y escribir ahí el texto de verificación.

    Espero tu ayuda.

    Un saludo!

    • Johanso dice:

      Hola Antonio, esto que quieres hacer, normalmente lo hacemos con AJAX y es mucho mas elaborado que el de este tutorial, que es la forma básica.

  11. emanuel dice:

    hola que hacen? xd 🙂

  12. Nomorro dice:

    Gracias!! Excelente!!

  13. Danny Roberto dice:

    Hola, ya estuve haciendo la prueba, pero no me envia los correos, intente con Gmail y con Hotmail :S!

    Saludos!

  14. Joaki dice:

    hola,
    perdona he visto un post tuyo sobre formularios. Mi GRAN problema es que me sale todo perfecto, menos incluir las imagenes!! Joer, si me pudieras ayudar no sabes lo agradecido que te estaría… Te puedo enviar el codigo y me ayudas?
    Gracias,.

  15. Luis dice:

    También me di cuenta que cuando lleno el formulario con 2 nombres, por ejemplo Jose Luis, el mensaje nunca llega a mi correo, pero si solo pongo Luis lo manda inmediatamente. Se puede hacer algo al respecto?

  16. Luis dice:

    Es posible que en lugar de que en el remitente aparezca el servidor que lo procesa aparezca la dirección de la persona que llena el formulario? Muchas gracias de antemano.

  17. Carlos Enrique Ochoa dice:

    John hice un cambio y ahora me sale el siguiente mensaje:_

    No se puede enviar el formulario, verifica los campos

  18. Carlos Enrique Ochoa dice:

    jOHN, TENO UN PROBLEMA AL LLENAR EL FORMATO Y OPRIMIR EL BOTÓN ENVIAR ME SALE LO SIGUIENTE:

    Not Found

    The requested URL /prose-form.php was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    ME PODRIAS HACER EL FAVOR DE DECIRME Q ERROR TENGO, Y COMO PUEDO SOLUCIONARLO, OTRA COSA EL ARCHIVO PHP EN QUE CARPETA SE COLOCA.
    GRACIAS

    • Johanso dice:

      Bueno, el problema acá es que no encuentra el archivo prose-form.php que es el que procesa los datos del formulario. Este archivo debes de guardarlo en el mismo directorio del formulario, si lo mueves tendras que cambiar la ruta en la etiqueta FORM en Action.

  19. RafaelGonzalez dice:

    Hola Admin, quería preguntarle algo que me llama la atención, el correo en la bandeja de entrada de quien envía (en el Ejemplo), aparece como johan@gator3067.hostgator.com, este correo en que parte lo colocas en el código PHP, me podrías indicar, porque he intentado hacer cada uno de tus pasos, pero no me llegan los Correos a la bandeja de entrada y tampoco a la Spam. Gracias por tu atención.

    • Admin dice:

      No, el correo a cambiar para que lleguen los mensajes es el de $to =.
      Este que dices johan@gator3067.hostgator.com, es el FROM, lo que se hace aquí es coger la variable del nombre de quien envia el formulario, en este caso fue johan y lo que aparece despúes @gator3067.hostgator… pertenece a la función mail del servidor que lo procesa en este caso Hostgator.

  20. Luis dice:

    Perdon por la descortecia.
    Muchas gracias por conpartil

  21. Luis dice:

    Hola e puesto el formulario y me funciono a la 1 pero hoy lo e probado y me sale esto.
    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /home/espclive/public_html/splau/prose-form.php on line 32
    lo podeis ver aqúi http://splau.net/shop.php?a=contactar

    • Admin dice:

      umm, es esta linea? echo “No se puede enviar el formulario, verifica los campos”;
      Si es asi, utiliza comillas simples en vez de dobles asi: echo ‘blablabla..’;

      • LuisCL dice:

        Hola volvi a subir todos los archivos y se soluciono.
        Pero tengo otro y lo e encontrado pero no se como solucionarlo.
        creo que biene de aqui:
        .column:last-of-type {
        float: right;
        margin: 0 0 20px 40px;
        }
        si elimino eso sale bien la web pero se desbarajusta las cajas.
        que puedo hacer.
        lo dejo para que lo veais.
        entrar en contactos
        el siguiente paso es ponerle las capchas.
        Los correos llegan bien.
        Gran trabajo

  22. jorge dice:

    hola, el formulario funciona pero me los correos estan llegando desde: jorge@naya.serverpe.com como puedo hacer para cambiar y pueda llegar desde mi dominio.
    Saludos

  23. Gracias por el tutorial, está excelente. Saludos !!!!!!!

  24. ro dice:

    Hola , e copiado el codigo y he puesto mi correo. He probado con varios correos que tengo, pero no me hace nada, me vuelve abrir el php. Como lo puedo solucionar. Gracias

  25. Elí Alfredo dice:

    Hola el tutorial esta de webs! solo que me gustaría saber si hay manera de poner en la misma pagina el mensaje de que fue enviado, no solo que quede en la misma página, si no que además el usuario que envía el mensaje sepa que fue enviado satisfactoriamente, espero me ayudes, súper tutorial felicidades master!

    • Si claro, podemos hacer esto con scripts,Ej: Utilizando AJAX hacemos esto facilmente, en estos dias publicaré un mini curso con todo lo relacionado con el tema formularios, como hacerlos funcionar, como enviar datos correctamente, como validarlos, con JavaScript, con jQuery, AJAX y tambien del lado del servidor, como procesar datos con php… en fin será algo muy completo por que veo que tienen muchas dudas e interrogantes con este tema.

  26. sebas dice:

    Hola Como estas, disculpa, estaba tratando de implementarlo en blogger y me fue muy bien, a la hora de terminar puse el correo, revise los codigos, todo perfecto, meti los datos como si fuese un usuario normal, me envio a la pagina que te dice “su mensaje ha sido enviado” pero voy a revisar mi correo y no estaba, mire en spam y tampoco, me podrias ayudar porfavor, aloje el documento php en bytehost4 y el js en yourjavascript, muchas gracias.

    • Hola Sebas, nunca he utilizado este servicio de blog, pero se que es muy limitante, fijate que esten bien enlazados los script y el procesador php al formulario, ahora una buena solución y definitiva seria utilizar un servicio de formulario online. Ej jotform que funciona de maravilla para estos servidores.

  27. hola como estan no me funciona no me llega ek email a mi cuenta de gmail que pasa me pueden ayudar please.

  28. Julio Zapata dice:

    Hermano sinceramente muchicimas gracias, no sabes como me estas ayudando y te felicito se mira lo profesional que eres y también tus amor por compartir tu conocimiento con los que estamos interesados en estas cosas, gracias mil gracias

  29. fran dice:

    Hola, me ha gustado mucho el tutorial y todo parece que funciona bien, pero nunca llega ningun mail, ni como spam. Tengo que hacer algo en el hospedaje como decirles que activen ell mail o algo? es que no me funciona
    Gracias

  30. Carlos dice:

    Disculpa, pero en uno de tus tutoriales de formulario, lo probé y me funcionó a la perfección, pero resulta que al subirlo al server del cliente, los correos le llegan pero sin los asuntos. ¿Qué puede ser? Saludos y gracias por los tutos, están muy claros.

  31. Arturo dice:

    Hola.
    Me ha gustado mucho el formulario. He modificado los dos archivos que dicen pero ahora no sé como hacer para unirlos y que me pueda funcional en la pag web que estoy haciendo.
    Gracias

  32. albert dice:

    Está muy bien, pero se encuentra en falta una función para que solo acepte mails validos.

  33. graker dice:

    Hola Johan ….tengo problemas con la validación y el envío, modifique el scrip porque mi formulario es mas extenso también quiero que se pueda cargar un archivo… espero me puedas ayudar …. y escribirme para mandarte el código editado y ver en que está mal ..

  34. Javier dice:

    Una pregunta!
    Como hago para editar la pagina en donde aparece el mensaje de que fue enviado o no?
    Gracias

    • Bueno, este texto que se muestra despues de enviar el formulario en realidad es la misma pagina que lo procesa, el texto que se muestra es un echo de php, pero podemos redireccionar al usuario a otra pagina html o php con estilos y mas elaborada despues que se envie el formulario.

      • Vivian dice:

        Hola Johan. Antes que nada, muchas gracias por este maginifico tutorial. Por favor, me podrías decir cómo habría que poner para redireccionar al usuario a otra página de html, en vez de mostrar el echo del php.

  35. promoboy dice:

    todo me funciona perfectamente pero no logro que me caiga en el folmulario de contacto automaticamente, me sale una pagina blanca y tengo que marcar en volver para que regrese al folmulario de contacto, ayudenme con ese tema plisssssssss.

  36. Juliana Pineda dice:

    hola, gracias es lo que estaba buscando, pero no se si algo hice mal, el punto es que no llega ningún correo. Te agradecería su puedes ayudarme.

    • Hola Juliana, si esta todo bien, debe de funcionar el formualario, ¿lo estas utilizando en tu servidor?¿Revisastes en la bandeja spam de tu servidor de correo?, los primeros correos suelen llegar como spam. Saludos.

  37. ceju dice:

    gracias justo lo estaba buscando muchísimas gracias por la ayuda

  38. tito dice:

    Lo subi a 000webhost y anduvo perfecto, no te imaginas cuantos tutoriales he visto y practicado y solo pude hacer un formulario que funcione con el tuyo. Sos un genio. Gracias

  39. alejandro dice:

    Hola buen tuto pero hize todo lo indicado me sale correo enviaado pero no me ha llegado nada, puse un correo de gmail y gmail no tiene una opcion de correo no deseado y no me ha llegado nada.. capaz estoy haciendo un paso mal.

    Gracias y buen tuto

  40. Ernesto Parra dice:

    Hice todo lo que explicas (muy buena explocación) y funciona todo como se debe, pero a pesar de que me dice que el correo se envió, al checar mi correo no llegó, ¿podrías decirme a que se debe?

  41. Ana dice:

    Excelente tu web, he aprendido mucho, lo primero darte las gracias por todo el esfuerzo que realizas y lo mucho que nos ayudas. Solo quería preguntarte algo, me interesa mucho este formulario, pero al probarlo en local, no consigo que funcione, y despues de darle a enviar me sale una pagina de codigo donde se ve mi correo etc… lo he probado a lanzarlo en local y desde “xammp” colocando la carpeta dentro de htdocs pero me sigue saliendo lo mismo. ¿que hago mal” hay que cambiar algo en el codigo? algo se me escapa y no se que es. mil gracias por tu ayuda y te repito excelente tu web se nota que te apasiona esto. un saludo!

    • Johanso dice:

      Bueno, si estas en local, recuerda que tienes que configurar el xammp para que te funcione la opcion de recibir correos y configurar un servidor de correos igualmente.

  42. diego dice:

    tengo el siguiente error? Cannot POST… a qué se debe?

  43. Victor dice:

    Hola. Excelente tu tutorial. Te felicito.
    Solo tengo la misma pregunta que 2crojas. ¿Hay alguna forma para que despues de enviar el mensaje se regrese a alguna otra pagina web?
    Muchas gracias

  44. lizt dice:

    Johanso muy bueno el formulario, me sirvio un resto, gracias.

  45. 2crojas dice:

    ya realize todo lo indicado, no tendras un tuto o alguna sugerencia de como hacer que regrese ala pagina anterior o que al gracias aparesca en la misma pagina de contacto, tipo haciendo reset o simplemente como pongo la opcion “volver” en gracias y este reset en blanco la pagina para evitar multiples envios! te agradeceria mucho

    que tengas buen dia!