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

11 comentarios:

  1. Gracias por tu trabajo.

    Creo que tienes un pequeño fallo. En formulario.php, en la línea que dice:
    <textarea name="mensaje" cols="40" rows="5" class="campo" id="mensaje">

    Debe faltar lo siguiente: '</textarea>'
    Para que cierre este 'tag', sin él, no se ver el botón 'Enviar mensaje'

    Por cierto, debería comentar como implementar el 'captcha' cosa muy importante.

    De todos modos, gracias por todo.

    ResponderEliminar
    Respuestas
    1. Hola Ediap, gracias por el apunte, ciertamente se me habá pasado.


      Un saludo...

      Eliminar
  2. Respuestas
    1. Hola Jhonny cisneros araujo, gracias por comentar, me alegro que te haya sido útil.


      Un saludo...

      Eliminar
  3. creo que es el primero que me funciona,
    después de avisarme que no he rellenado los campos no me carga el php y los otros si
    es decir me avisan del campo que faltaba por rellenar y a continuación ejecutaba el php
    y yo quería que no
    Felicidades!!!
    y no es solo por el onsumit hay algo mas

    ResponderEliminar
  4. Gracias por el aporte funciona OK

    ResponderEliminar
  5. gracias por tu aporte. como pódria agregar una casilla de verificación validada para que no se envien los datos a menos que se acepte el valor de la la casilla, saludos

    ResponderEliminar
  6. Normalmente no comento en los blogs pero es que esta vez no me puedo aguantar. Este formulario es de los mejores que he encontrado para quien no tenga suficientes conocimientos de PHP y Javascript, como es mi caso. Se entiende bien, fácil de retocar y funciona muy bien (aparte del que ya han comentado antes). Gracias y felicidades.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por visitar mi blog.


      Un saludo..

      Eliminar
  7. Estoy haciendo un proyecto y una parte es validar formularios, y el mio es parecido al tuyo, como pero al tuyo los campos del formulario no acepta que el campo se quede en blanco, pero si con espacios, para que lo arregles en futuras versiones.

    ResponderEliminar

Para insertar código html en tu comentario,convertir aquí