viernes, 5 de julio de 2013

Formulario de contacto con validación de campos en php

Hoy os dejo un formulario de contacto en php con validación de campos vacíos, se compone de 2 archivos: formulario.php y enviar.php. Solo hay que cambiar la linea 3 del archivo enviar.php, ahí pondremos la dirección de e-mail donde queramos que llegue el formulario. Los estilos css os lo dejo a vuestra elección.




formulario.php




  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <meta name="author" content="joason.com">
  6. <title>Formulario de contacto</title>
  7. <script language="JavaScript">
  8.  function formulariodecontacto(){  
  9.   if (document.formulario.nombre.value==""){ 
  10.    alert("Por favor ingresa tu Nombre."); 
  11.    document.formulario.nombre.select();
  12.    return false;
  13.   }  
  14.   if (document.formulario.correo.value==""){ 
  15.    alert("Por favor ingresa tu E-mail."); 
  16.    document.formulario.correo.select();
  17.    return false;
  18.   }
  19.   if (revisar_correo(document.formulario.correo.value)==false){ 
  20.    alert("Por favor ingresa un E-mail valido."); 
  21.    document.formulario.correo.select();
  22.    return false; 
  23.   }
  24.   if (document.formulario.asunto.value==""){ 
  25.    alert("Por favor ingresa un asunto."); 
  26.    document.formulario.asunto.select();
  27.    return false;
  28.   }
  29.   if (document.formulario.mensaje.value==""){ 
  30.    alert("Por favor ingresa un mensaje."); 
  31.    document.formulario.mensaje.select();
  32.    return false;
  33.   }
  34.   
  35.   return true;
  36.  }
  37.  function revisar_correo(str){
  38.   var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  39.   if (filter.test(str)){ return true; }else{  return false; }
  40.  }
  41. </script>
  42. </head>
  43. <body>
  44. <div style="margin:auto; width: 310px;">
  45. <br />
  46. <form action="enviar.php" method="post" name="formulario" onSubmit="return formulariodecontacto()">
  47. Su Nombre:<br />
  48. <input name="nombre" type="text" class="campo" id="nombre" size="50" /><br /><br />
  49. Su e-mail:<br />
  50. <input name="correo" type="text" class="campo" id="correo" size="50" /><br /><br />
  51. Asunto:<br />
  52. <input name="asunto" type="text" class="campo" id="asunto" size="50" /><br /><br />
  53. Mensaje:<br />
  54. <textarea name="mensaje" cols="40" rows="5" class="campo" id="mensaje" />
  55. <input class="boton" name="Submit" type="submit" value=" Envíar Mensaje " />
  56. </form>
  57. </div>
  58. </body></html>






enviar.php



  1. <?php
  2. // declaramos el destinatario
  3. $destino = "Aqí nuestra dirección de E-mail";  
  4. // Cargando las variables desde el formulario
  5. $asunto = $_POST["asunto"];
  6. $mensaje = $_POST["mensaje"];
  7. $nombre = $_POST["nombre"];
  8. $correo = $_POST["correo"];
  9.         // Cuerpo del mensaje :
  10. $body ="Tienes un nuevo mensaje de $nombre:

  11. E-Mail :  $correo

  12. Asunto :  $asunto

  13. Mensaje :  $mensaje";
  14. // Si todo está correcto enviamos el correo
  15.  mail($destino, $asunto, $body , "From: $nombre <$correo>"); 
  16. ?>
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="http://www.w3.org/1999/xhtml">
  19. <head>
  20. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  21. <meta name="author" content="joason.com">
  22. <title>Correo evíado</title>
  23. <meta http-equiv="refresh" content="3; url=formulario.php">
  24. </head>
  25. <body>
  26. <center>
  27. Gracias, Su correo ha sido enviado.</center>
  28. </body></html>




Eso es todo, para instalar, subimos los 2 archivos por FTP a nuestro servidor Web y los colocamos dentro de una misma carpeta.



Espero que os sea de utilidad.


Saludos..