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
  • ayuda!!!!
    Tengo una pagina hecha con frontpage…
    He subido los 3 archivos…
    He modificado mi email…
    y nada… no funciona!
    – al enviar el mensaje me dice ( quiere abrir o guardar el archivo)…

    • Hola Polin, necesitas subir tu página a un servidor con PHP, eso ocurre porque el servidor a dónde has subido los archivos no admite PHP, te recomiendo probar en www.000webhost.com, es un hosting gratuito con PHP, o busca en google, hay muchos que soportan PHP.

      Saludos.

  • Muchas gracias por compartir tus conocimientos….

  • Jhon Eider Carmona (Colombia) says:

    excelente codigo, me sirvio mucho….. graciasssss

  • Muy bueno gracias!!! n_n

  • @$name = addslashes($_POST[‘name’]);
    @$email = addslashes($_POST[‘email’]);
    @$subject = addslashes($_POST[‘subject’]);
    @$message = addslashes($_POST[‘message’]);

    Te hago una pregunta… lo que dice «addslashes» se modifica o que ? porqe no recuerdo a ver visto algo parecido en estilos de variables..

    • Es para evitar la inyección de cabeceras de email, para que los spammers NO abusen de tu formulario… saludos.

      • Dasumo.. tengo una duda.. yo quiero que cuando se llene el formulario y se ponga enviar.. aparezca el msj de muchas gracias y nos redireccione a una pagina X.. el tema es que yo apreto «enviar» y leyendo los comentarios de mas abajo.. me reenvia a la pagina anterior.. pero nose como colocar el msj de agradecimiento.. me dirias como hacer ?

      • No solamente eso.. toque mas de 2 horas y no se como hacer para que me tome el validar.. hice todo y me sigue mandando el mail vacio..

  • amigo hecho todo lo que dices y me sale correcto directo del servidor , me sale hasta el mensaje que se a enviado bien , pero no me llega nada al email (si cambie el email) gracias espero me ayudes urgente

  • @MultivacS says:

    Excelente aporte amigo.

  • Muy buen aporte , solo una duda ¿ sí quiero ,que no se envié el formulario a me nos que esté bien llenado ?? .

    Gracias!!!!

    • La validación javascript te ayuda en eso, pero el código es bastante simple y no te ayuda si la persona que va a enviar el formulario desactiva el JavaScript, para eso tendrías que agregar un código de validación en PHP, pero como te dije, este ejemplo es bastante simple…

      Pero tal vez puedo orientarte y darte ejemplos si me dices exactamente que es lo que quieres validar que esté bien llenado.

      Saludos 🙂

  • Angela Vives says:

    Hola tu formulario me ha servido muy bien gracias, pero he tenido un pequeño inconveniente y es que quiero que cuando envie el mensaje regrese a a la página anterior y vi que la persona de arriba te pregunto algo similar. Soy algo novata en esto y realmente no sé donde debo poner el código. En verdad gracias

    • Hola Angela, disculpa la respuetsa tardía…

      Por la página anterior te refieres a la página del formlario?… o a la página que visitaron antes de llegar al formulario, sea la página que sea?… En cualquiera de los 2 casos, tienes que hacer una redirección, sigue el ejemplo que le di mas abajo a RONDOLIN…

      En el archivo contacto.php cambia:

      die("MENSAJE");
      por
      header("Location: http://www.algo.com/la-pagina-anterior/");
  • hola Dasumo, soy de argentina y estoy tratando de aprender programacion, buceando en la web logre dar con tu codigo para formulario, estoy construyendo una web de a poco, tengo instalado el xamp en mi pc y pude visualizar el formulario una marvilla como funciona, lo que no veo es el mensaje en mi correo, ¿sera que no se puede porque estoy trabajando en mi pc sin pagina en un servidor?cualquier informacion muchas gracias.

    • Hola, necesitas tener instalado un servidor SMTP por eso no te funciona, lo malo es que muchos servidores SMTP que encuentras en la web no funcionan bien en Windows, los correos no llegan… pruebalo en un host gratuito que soporte PHP, de seguro te va a funcionar, saludos 🙂

  • Hola. Hice un formulario y queria saber como hacer que a la hora de enviar levante un mensaje de exito y que quede la pagina anterior.
    Saludos

  • Un aporte magnifico lo probé y funciona perfectamente, pero intentando rizar el rizo, me pregunto, podríamos en el archivo contacto.php donde dice

    //Si el mensaje se envía muestra una confirmación//
    die(«Muchas gracias, su mensaje fue enviado correctamente»);

    Se podría hacer que en lugar de aparecer el texto de agradecimiento, nos direccionase a otro link o pagina dentro de nuestra web.

    • Sí claro, puedes cambiarlo por:

      header("Location: http://www.algo.com/");
      die;

      Saludos.

      • Hola Dasumo muchas gracias por tu respuesta, pero esta parte del código no me funciona lo puse como me dijiste, te muestro fragmento de mi código.

        //Si no escorrecto el captcha

        if(sha1($Captcha) != $_SESSION[«captcha_code»]) {

        die(«El codigo de validacion no es correcto.»);

        //Si se envía muestra una confirmación

        }else if (@mail($email_to, etc )) {

        header(«Location: http://www.servinformaticos.com/Rondon/Fcontacto/gracias.php»);
        die;

        //Si el mensaje no se envía muestra el mensaje de error
        }else{
        die(«Su mensaje no pudo ser enviado.»);
        }
        ?>

        Estoy utilizando mal el header, o hay algo en mi codigo que no lo deje actuar?
        Muchas gracias de antemano, y un cordial saludo.

      • Lo estás usando bien, pero la linea HEADER debería quedar ANTES de cualquier HTML o texto que genere la página, prueba pasar el código hasta arriba antes de que tu script genere y envíe cualquier código o texto al navegador, de lo contrario HEADER no funciona, saludos.

  • Ronald Figueroa Gorvenia says:

    Hola muy buen aporte Felicitaciones claro y rapido , pero quisiera hacerte una consulta como agrego un caja mas de ingreso de datos para telefonos, con validacion de solo numeros¿

    • Hola, puedes colocar al final del formulario, justo antes de cerrar </form>, lo siguiente:

      <input type="text" name="telefono" value="" />

      Y en el archivo validar.js pones lo siguiente justo antes del último }:

      	if(isNaN(f.telefono.value)) {
      	alert('Error: Este campo debe ser numerico');
      	f.telefono.focus();
      	return false;
      	}

      Saludos.

  • Son las 6pm y desde las 12pm no he encontrado mejor formulario. Gracias!

    Sólo que inexplicablmente me dejó de funcionar. Ya no me llegan los mails.

    Saben que parte de mi FTP puede estar fallando

    • A veces depende de la configuración de e-mail del servicio de hosting donde tienes alojado tu sitio web… muchos servidores limitan el número de e-mails por día.

      Otra posibilidad es que el correo se esté marcando como SPAM, en los primeros correos que recibiste, revisa el remitente y agregalo a la lista segura, prueba si los correos te llegan bien a otra cuenta (por ejemplo, si en hotmail falla, prueba en gmail o yahoo, etc)…

      Saludos.

Leave a comment

   


Subir