Formulario de Contacto en PHP con validación (Sencillo y muy Básico).

Actualización Mayo 5 de 2015 (descarga al final del post):

- Nueva versión 2.0
- HTML 5
- Optimizado el javascript de validación
- Código PHP que envía el correo: Más seguridad y validación extra

Hola a todos, en esta ocasión les presento este sencillo tutorial para crear un formulario de contacto simple y muy fácil de implementar, hecho en PHP.

Para hacer nuestro formulario un poco más interesante, agregaré validación JavaScript de campos vacíos + Confirmación de envío o mensaje de error en caso de que el formulario no pueda ser enviado.

El formulario consta de 3 archivos:

  1. contacto.html – Página HTML que verán las personas que visiten el formulario en tu sitio web.
  2. validar.js – JavaScript para validar que los campos de nuestro formulario no estén vaciós
  3. contacto.php – El script PHP que recoge las variables de nuestro formulario y envía el E-Mail de contacto.

Código fuente del archivo contacto.html:
Código HTML:

<html>
<head>
<title>Formulario de Contacto en PHP por Dasumo</title>
<!-- Archivo de validación colocar dentro de HEAD /HEAD -->
<script type="text/javascript" src="validar.js"></script>
<!-- Fin Archivo de validación -->
</head>
<body>
<!-- Formulario de contacto colocar dentro de BODY /BODY-->
<div align="center">
<form method="post" action="contacto.php" onsubmit="return Validar(this);">
    <label for="name">Nombre Completo:<br>
    <input id="name" name="name" type="text" size="27"> </label><br><br>
    <label for="email">Correo Electrónico:<br>
    <input id="email" name="email" type="text" size="27"> </label><br><br>
    <label for="subject">Asunto:<br>
    <input id="subject" name="subject" type="text" size="27">
    </label><br><br>
    <label for="message">Mensaje: <br>
    <textarea name="message" id="message" rows="5" cols="30"></textarea>
    </label><br><br>
    <input type="submit" name="submit" value="Enviar" /><br>
</form>
</div>
<!-- Fin Formulario de contacto -->
</body>
</html>

Código Fuente del archivo de validación validar.js:

//Función que verifica campos del formulario vacíos
function Validar(f) {
if (f.name.value=="") {
    alert("Por favor escriba su Nombre completo");
    f.name.focus();
    return false;
    }
if (f.email.value=="") {
    alert("Por favor escriba su direcci\xF3n de correo electr\xF3nico");
    f.email.focus();
    return false;
    }
if (f.subject.value=="") {
    alert("Por favor escriba el asunto de su Mensaje");
    f.subject.focus();
    return false;
    }
if (f.message.value=="") {
    alert("Por favor escriba su Mensaje.");
    f.message.focus();
    return false;
    }
}

Código fuente del archivo contacto.php:
Nota: Se ha agregado el caracter @ antes de las variables o funciones PHP para evitar que PHP muestre errores en pantalla, en su lugar, mostrará nuestro mensaje de error personalizado.
Código PHP:

<?php
//Importamos las variables del formulario
@$name = addslashes($_POST['name']);
@$email addslashes($_POST['email']);
@$subject addslashes($_POST['subject']);
@$message addslashes($_POST['message']);
//Preparamos el mensaje de contacto
$cabeceras = "From: $email\n" //La persona que envia el correo
 "Reply-To: $email\n";
$asunto "$subject"//El asunto
$email_to "tudirecciondecorreo@algo.com"//cambiar por tu email
$contenido "$name le ha enviado el siguiente mensaje:\n"
"\n"
"$message\n"
"\n";
//Enviamos el mensaje y comprobamos el resultado
if (@mail($email_to$asunto ,$contenido ,$cabeceras )) {
//Si el mensaje se envía muestra una confirmación
die("Muchas gracias, su mensaje fue enviado correctamente");
}else{
//Si el mensaje no se envía muestra el mensaje de error
die("Error: Su mensaje no pudo ser enviado, intente más tarde");
}
?>

Eso es todo, para instalar, subimos los 3 archivos por FTP a nuestro sitio Web y colocamos los 3 archivos dentro de la misma carpeta.

Nota: El formulario de contacto de mi página web está basado en este ejemplo simple, así que dependerá de ustedes adaptarlo al estilo y a las necesidades de su sitio web.

Descargar verión 2.0 (los 3 archivos en un ZIP):

Descargar Formulario de contacto en PHP Gratis

Saludos a todos desde México, Dasumo.

Escrito en: Webmaster
126 CommentsLeave a comment
  • Nunca esta demas darte las gracias por ese formulario, me es de gran ayuda, ahora a darle estilos.

    saludos,

  • Cesar Gomez says:

    Hola,
    Segui todos los pasos y no me funciona :S

  • hola, muy bueno el tutorial.. te cuento que lo hice y me sale perfecto, mi duda de como tengo que hacer para que despues que yo mando un mail no me quede la pagina en blanco con el mensaje «Muchas gracias, su mensaje fue enviado correctamente»
    Espero tu respuesta
    Saludos

  • Leo lópez says:

    Hola una pregunta, como hago para cuando visualice el mensaje enviado a travéz del formulario de contacto se vea bién, tengo problemas con las tildes y la ñ, se ve mal cuando se lee el correo.

  • Hola 🙂 acabo de realizar el tutorial (muy bueno por cierto y felicidades para el autor) pero tengo un problemita 😛 ya puse todo en mi sitio y estoy tratando de enviarme un mensaje, pero me aparece error, dice que no puede enviarse mensajes 🙁 , la verdad ya no se que hacer, ya verifiqué parte por parte y aun así no funciona 🙁 ¿que hago? el sitio donde estoy poniendo el formulario es el siguiente.
    http://www.mascarasdealiento.org/MASCARAS/contacto.html

  • Carlos Santiago Belveder says:

    Hola, veo muy instructivo tu post, el formulario parece correcto, pero queria avisarte que el download ya no sirve porque no existe mas el sitio para descargar. Los tienes aun?

    Muchas gracias
    Carlos Santiago Belveder
    Carlos Santiago Belveder
    Carlos Santiago Belveder

    • Hola, sí lo tengo disponible, lo voy a subir aquí mismo para que pueda ser descargado…

      Entre tanto, si gustas puedes copiar el código de cada archivo directamente del post, pegar cada uno en el bloc de notas y guardarlo con su respectiva extensión.

      Saludos =)

  • MG COLOMBINO says:

    Otra duda quisiera saber como anexo mas cuentas de correo que reciban la misma informacion del formulario
    gracias

    • En la línea donde pones tu correo, separa cada cuenta de correo con una COMA ( ej. cuenta@1.com, cuenta@2.com, etc… ), si no te funciona con una COMA prueba con PUNTO y COMA.

      Saludos.

  • MG COLOMBINO says:

    Hola muy buen tutorial, gracias por ese aporte e buscado por dias variso tutoriales acerca del tema de formulario decontacto con validacion, pero que funcione realmente solo el tuyo, solo tengo un problema mas mo cambios los items en vez de asunto por ejemplo telefono y que lleguen al correo esa informacion detallada por ejemplo:
    NOMBRE
    TELEFONO
    CORREO ELECTRONICO
    MENSAJE
    No se si eso es mas complejo
    y si hay alguna forma deque entre el correo a al bandeja de entrada y no al spam
    Agradeceria que me aclararas estas dudas es muy util para un trabaj oqeu hago en este momento
    gracias

  • Muchas gracias por el aporte, pero surgio algo:

    Estoy usando el codigo para que el mensaje de agradecimiento aparezca en la misma pagina, pero me pille algo:

    Cuando no lleneo uno de los campos me sale el alert, pero aun asi envia el mensaje, con los datos faltantes, ¿como hago para que no lo envie hasta que llene todos los datos?

    Gracias

  • Esto me ha venido muy muy bien, asi que… ¡Muchas muchas gracias!

  • Gracias me sirvió de mucho y a la perfección.

  • Hola.
    Puedes volver a colgar los archivos?, el enlace ya no está operativo, otra cosa, tengo una plantilla para mi web que lleva un formulario de contacto, pero no funciona.
    Como habría que meter tu código?
    Un saludo y gracias

  • Cristián says:

    Excelente ejemplo y se agradece.
    La consulta es si queremos adjuntar un archivo cuales son las lineas a agregar en el archivo .php

    Saludos

  • Hola, buen post, me gusto mucho, tengo una duda, como hago para que el sitio me diga: «Muchas gracias, su mensaje fue enviado correctamente»
    Dentro de la misma pagina, y no me lleve a otra, solo quiero que el navegador diga ese mensaje, y no una nueva pagina, que se quede en la misma, y que la información que lleno en los campos, se borre automáticamente, para poder volver a contestar.
    SALUDOS!

    • Hola TorresA:

      Usa el ejemplo que le dí a DARON ESPINOZA modificando el mensaje de agradecimiento a tu gusto, está unos comentarios más abajo, saludos.

      • Muchisimas gracias por el aporte, solo tengo una duda, no he podido conseguir que me mande el mensaje de que el correo ha sido enviado satisfactoriamente, para lograrlo necesito tener mi sitio en un servidor ¿? (es que lo he manejado de manera local). Disculpa la pregunta se que es algo tonta. Reitiro el agradecimiento.

      • Hola Lalo:

        En local necesitas tener configurado un servidor SMTP para que te envíe el correo, bajo windows resulta muy difícil echar a andar un servidor smtp, en linux es sencillo, pero sí, te recomiendo probar en un servidor con soporte PHP.

        Saludos.

Leave a comment

   


Subir