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
125 CommentsLeave a comment
  • Hola,
    Muy buen aporte, entre tanto buscar encontre lo que buscaba. PEROO tengo un pequeño problema lo que pasa es que los correos me los envia a los No Deseados y esto me trae problemas porque como le explico a mi cliente que los correos siempre le llegaran a no deseados?? porfavor ayudame saludos y gracias

    • Hola:
      Empieza por agregar la dirección de email de remitente (que aparece cuando te llega el mensaje) a la lista de remitentes seguros, la mayoría de las veces los correos que se envías desde formularios web llegan al correo no deseado si el servidor no está correctamente configurado (registro DNS MX y TXT), pero haces eso y listo…

      Saludos.

  • Nancy Monzon says:

    Hola quisiera saber como puedo agregarle una casilla de numero telefonico al formulario, te agradezco mucho tu ayuda, el formulario me funcionó al 100%.
    Gracias

  • Hola Chepe, Lester, y cualquiera que tenga el problema de "El mensaje no fue enviado"…

    Es posible que el servidor donde están probando el formulario tiene deshabilitada la función mail() de PHP, o bien, no permite el envío de correos usando dicha función, les recomiendo probar en otro servidor o preguntar directamente a su proveedor de hosting acerca del envío de correos usando mail() de PHP.

    Saludos.

  • te agradeceria mucho tu ayuda y tu pronta respuesta. Gracias

  • Hola estimado, descargue el archivo y le edite unicamente el correo de destino pero no me envia el comentario, cuando le doy enviar me tira el mensaje de “error intentelo mas tarde”

  • amigo gracias de antemano tengo un problemita no me valida el correo me sale Error: Su mensaje no pudo ser enviado, intente más tarde, tendrá algo que ver que lo alla metido en un div? o tendra algo que ver que en $email_to le ponga un correo de hotmal?

  • Siempre me da esto:

    Error: Su mensaje no pudo ser enviado, intente más tarde

  • Muy bueno el ejemplo, solo una pregunta, estoy empesando cn esto de php, en la parte de la validacion, cuando devuelve true

    • Hola Adolfo:

      Devuelve TRUE cuando el email se ha enviado correctamente (la parte que dice @mail(…), es entonces cuando se muestra el: gracias su mensaje fue enviado…

  • gracias por el tuto

    sabes me gustaria saber sitienes uno como el de este formulario de DEJA UN COMENTARIO me serviria de mucho y tambien a los de ma, gracias mi estimado.

    • Te recomiendo utilizar WordPress que incluye todo lo necesario para crear artículos y recibir comentarios sin nececidad de implementar nada extra:
      wordpress.org

      Sin embargo, voy a crear un ejemplo de formulario de comentarios sencillo con base de datos para que pueda integrarse en cualquier sitio web.

      Saludos 🙂

  • System Makr says:

    Excelente Material Claro, Concreto y funcional.

    Me sirvió mucho, G r a c i a s !!

  • Ernesto letelier says:

    Me funciona. pero nunca arroja errores. solo pegue el archivo “validar.js” en la carpeta junto con las otras 2.

    ¿falta algo?

    Muchas gracias

  • Bunos dias excelente el formulario me ha servido mucho, si qiero validar el campo email como va el if? Gracias.

    • Si te refieres a validación PHP, debe ir algo así:

      if(
       !preg_match("#^[a-z0-9\.\-_\+]+@[a-z0-9\.\-]*[a-z0-9]+\.([a-z]{2,4}|travel|museum)$#i",
       $email)) {
      die("Error, el email no es valido");
      }

      Y si quieres hacerlo con javascript, el siguiente artículo te será útil:
      Validar correo con JavaScript

      Saludos.

  • Forerunner says:

    Muy Buen Aporte Me Sirvió 100% Excelente Lo Califico Con Esas Palabras.

  • GRACIAS y UN SALUDO porque veo que llevas tiempo ayudando a muchos con el formulario (jeje, me habia faltado esto lo que pasa que se me habian acabado los caracteres.)

Leave a comment

   


Subir