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
124 CommentsLeave a comment
  • 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.

  • Hola que tal:
    Fijate que hice todo en orden los 3 archivos y a la hora de estar en el sitio web En la sección de contacto pongo todos los datos, inmediatamente me sale que el mensaje ha sido enviado correctamente Pero no recibo la notificación a mi correo. Y ya lo configuré para que me mande los mensajes a mi correo. ¿Sabes a que se deba? Saludos

    • Hola, algunos servidores limitan el envio de mensajes por PHP, o a veces es cosa de tu provedor de correo, por ejemplo, si pides que la notificacion te llegue a hotmail, intenta con yahoo o gmail u otro (y revisa la carpeta spam), si no llega a ningun lado entonces es lo que te dije al principio, intenta en otro servidor o pregunta a tu provedor de hosting acerca del correo enviado por PHP.

      Saludos.

  • Hola Gracias, tu datos me dieron una mejor idea de como tengo que hacerlo, voy a probar tus codigos y luego te aviso como me fue gracias.

  • daron espinoza says:

    gracias por responder:
    -necesito saber como hacer para que el mensaje de su mensaje fue enviado quede en la misma pagina del formulario y no en una pagina en blanco, ya que al volver de la pagina en blanco la informacion de contacto sigue ahi.
    quiero que despues de enviar se borre la informacion de contacto y que el mensaje de enviado quede en la misma pagina.

    saludos

    • Hola Daron: renombra contacto.html a contacto.php y pega este código después de <body>:

      <?php
      if($_SERVER["REQUEST_METHOD"] == "POST") {
      //Importamos las variables del formulario
      @$name = addslashes($_POST["name"]);
      @$email = addslashes($_POST["email"]);
      @$subject = addslashes($_POST["subject"]);
      @$message = addslashes($_POST["message"]);
      $cabeceras = "From: $email\n"
       . "Reply-To: $email\n";
      $asunto = "$subject";
      $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
      echo @mail($email_to, $asunto ,$contenido ,$cabeceras ) ?
      //Si el mensaje se envia muestra una confirmacion
      "<h3>Muchas gracias, su mensaje fue enviado correctamente</h3>" :
      //Si no, muestra el mensaje de error
      "<h3>Error: Su mensaje no pudo ser enviado, intente mas tarde</h3>";
      }
      ?>
  • daron espinoza says:

    tengo una serie de dudas pero el ver que este es un post algo antiguo quiero saber si es que puedes responderme para hacerte llegar mis dudas.

    saludos

  • mrglenean says:

    Hola en vez de que te muestre en una página en blanco los mensajes de enviado correctamente o de error como lo podemos redirigir a una página personalizada

    • Hola, puedes cambiar:

      die("Muchas gracias, su mensaje fue enviado correctamente");

      Por lo siguiente (reemplazar la URL por tu URL personalizada):

      header("Location: http://sitio.com/algo/gracias.html");
      die;

      Saludos.

  • hola amigo es muy interesante tu aporte, estoy muy interesado en la programacion php asi que cualquier aporte sera bienvenido

  • Tenes algun tutorial
    de hace un comentario como este,
    que este validado y tenga php,

    • Hola Alvaro,

      Primero que nada una disculpa porque tu comentario lleva más de 2 meses y se me había pasado.

      Si tengo un pequeño script en PHP para comentarios con validación, en los próximos días voy a publicar el tutorial.

      Saludos.

  • Hey _CesaR_, subido a un servidor ya no deberia ocurrir el error, o mira de que no hayas guardado el javascript de validacion en UTF-8, o simplemente abre el archivo VALIDAR.JS con el bloc de notas, reemplazas las vocales con acento por vocales sin acento y san se acabó, nos vemos camarada.

  • Excelentísimo el post 😀 justo lo que necesitaba, pero una pregunta Dasumo.
    Porque cuando se ve la alerta las letras con acento se ven con un simbolo de interrogacion (?) , hay manera de solucionarlo?

    Saludos y gracias :):

    • Hola _CesaR_:

      Es por la codificación de caracteres, para solucionarlo, reemplaza los caracteres acentuados en el código JavaScript por su equivalente hexadecimal así: el caracter ó equivale a \xF3.

      Puedes usar el Traductor Hexadecimal para obtener el valor hexadecimal de cada caracter, y agregas antes de dicho valor un \x : http://redir.dasumo.com/hex/.

      Saludos.

  • Tienes toda la razon, gracias Dasumo.

  • viktor104 escribio:
    Gracias Dasumo, pese que no entiende de programacion(ya te d…

    Pues si,

    Un formulario de contacto siempre es útil para cualquier web,
    así te evitas el estar publicando tu dirección de correo a la vista
    de todos, evitando mucho spam…

    Saludos.

  • Monkeyportable escribio:
    Algún tutorial para empezar PHP desde 0 (a mi todo lo…

    Mañana subiré un manual de PHP, solo ten en cuenta que este lenguaje está enfocado solo al desarrolo de páginas web, para ejecutar acciones del lado del servidor, aunque cuando empieces a tratar con PHP lo verás muy similar al C o al BATCH por ejemplo, por lo que no será dificil de aprender…

    Saludos.

  • Gracias Dasumo, pese que no entiende de programacion(ya te dije que no sabia ni papa) pues me alegra ver esta infroamcion por aqui, siempre nos peude ser util, y gracias por compartirla.

    Salu2!

  • Monkeyportable says:

    Algún tutorial para empezar PHP desde 0 (a mi todo lo que sea programar)
    No se ni lo que es PHP . Yo he hecho cosas de HTML pero con el bloc de notas los frames para fueron un infierno (aunque los copiaba)

Leave a comment

 

     


Subir