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
  • Ernesto letelier dice:

    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 dice:

    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.)

  • Hola Dasumo, gracias por contestar, sí, tu tenias razón era por culpa del servidor php ya que lo subí al hosting y funcionó, aunque llevaba varios dias luchando porque yo estaba seguro que tengo configurado bien el wampserver y tambien encendido. Ya que leí el post que das el codigo para que al enviar el mensaje se redireccione a nuestra página ¿como se colocaría el mensaje? ya que la persona que mandó el mensaje quiere saber que fue mandado con éxito, ¿la solución mas sencilla es agregar un botón que ponga “ir a inicio” después de aparecer el mensaje de éxito? o hay algún código sencillo para agregar al código que tu diste para ir a la pagina de inicio se le puede agregar algún mensaje también.

  • buenas tardes, te agradezco el formulario porque parece ser muy bueno no lo he podido implementar porque cuando pongo los datos y le doy a enviar me lleva al archivo php del codigo mostrando todo el codigo de mi archivo php en vez de salir un mensaje de que fué enviado o que no fué enviado te agradezco si sabes debido a que puede ser.
    UN SALUDO. GRACIAS

    • Hola Alberto, sucede que el servidor donde lo estás probando NO SOPORTA PHP, sube el archivo a un servidor con soporte PHP, hay muchos gratuitos, 00webhost por ejemplo.

      Un saludo.

  • buenas tardes, te agradezco el formulario porque parece ser muy bueno no lo he podido implementar porque cuando pongo los datos y le doy a enviar me lleva al archivo php del codigo mostrando todo el codigo de mi archivo php en vez de salir un mensaje de que fué enviado o que no fué enviado
    UN SALUDO. GRACIAS

  • Carlos Pato dice:

    Hola, he seguido los pasos y me sale un error que no he sabido solucionar:
    Not Found

    The requested URL /fcgi-bin/php.fcgi/contacto.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.

    ¿Tengo algo mal? He probado a meter el ph en varios directorios y no lo consigo. Gracias

    • Súbelo a una carpeta diferente, las carpetas CGI o FCGI son para aplicaciones, necesitas darles permisos de ejecución y configurar una línea de comando al inicio, es más fácil si subes el archivo a cualquier otra carpeta ya que el intérprete nativo de php del servidor se encargará de interpretar el archivo.

      Saludos.

  • Muy buen aporte, pero como se hace si quiero que el formulario despues de enviarse la pagina que contiene el mensaje se cierre despues de unos segundos y que ademas si la una persona accede al archivo php que envia los datos del formulario que no le de permiso de acceder a el desde url

    • Hola:

      Puedes usar el ejemplo que le di a ROBERTO FERNANDEZ (en los comentarios) para redireccionar a tu pagina de inicio por ejemplo, para que cierre en automático deberás usar JavaScript ( window.close() por ejemplo ) pero muchos navegadores no permiten su ejecución si dicha ventana no fue generada con JavaScript…

      Y para que no se pueda acceder directamente al archivo, agrega la siguiente línea al inicio del archivo contacto.php:

      if($_SERVER["REQUEST_METHOD"] != "POST") {
      header("HTTP/1.1 403 Forbidden");
      die;
      }
  • Roberto Fernandez dice:

    Como le hago para que después de enviar el formulario me redireccione a mi página.

    Gracias.

    • Hola Roberto:

      Puedes cambiar la línea:

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

      Por lo siguiente:

      header("Location: http://www.la-url-de-tu-pagina-aqui.algo/");
      die;

      Un saludo 🙂

  • amigo si tenemos que agregar numero telefónico: y en el campo solo acepte números como seria el procedimiento

    muchas gracias saludos desde peru

  • Gracias por el aporte funciono sin problemas

  • Pues Me confirma su envio pero no me llega nada al correo destino. podrias echarme la mano.

    GRACIAS

    • Agrega la dirección de remitente a la lista segura, o intenta con otro provedor de correo, a veces hotmail bloquea los mensajes que llegan desde servidores…

      También puede ser que la IP del servidor a donde subiste el formulario está bloqueada, pueden ser tantas cosas, para intentar ver si el problema esta o no en el servidor, ve cambiando la direccion a donde quieres recibir el correo, prueba entre distintos provedores como yahoo, hotmail, gmail, etc…

  • este formulario que relleno es lo que se obtiene del archivo descargado????

    • No, este formulario es un formulario de comentarios que aparecen en el blog, el formulario de contacto es similar al que aparece en mi página de contacto (link arriba).

      Saludos.

  • me sale error no enviado buuuuuu

Leave a comment

 

     


Subir