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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="joason.com">
<title>Formulario de contacto</title>
<script language="JavaScript">
function formulariodecontacto(){
if (document.formulario.nombre.value==""){
alert("Por favor ingresa tu Nombre.");
document.formulario.nombre.select();
return false;
}
if (document.formulario.correo.value==""){
alert("Por favor ingresa tu E-mail.");
document.formulario.correo.select();
return false;
}
if (revisar_correo(document.formulario.correo.value)==false){
alert("Por favor ingresa un E-mail valido.");
document.formulario.correo.select();
return false;
}
if (document.formulario.asunto.value==""){
alert("Por favor ingresa un asunto.");
document.formulario.asunto.select();
return false;
}
if (document.formulario.mensaje.value==""){
alert("Por favor ingresa un mensaje.");
document.formulario.mensaje.select();
return false;
}
return true;
}
function revisar_correo(str){
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (filter.test(str)){ return true; }else{ return false; }
}
</script>
</head>
<body>
<div style="margin:auto; width: 310px;">
<br />
<form action="enviar.php" method="post" name="formulario" onSubmit="return formulariodecontacto()">
Su Nombre:<br />
<input name="nombre" type="text" class="campo" id="nombre" size="50" /><br /><br />
Su e-mail:<br />
<input name="correo" type="text" class="campo" id="correo" size="50" /><br /><br />
Asunto:<br />
<input name="asunto" type="text" class="campo" id="asunto" size="50" /><br /><br />
Mensaje:<br />
<textarea name="mensaje" cols="40" rows="5" class="campo" id="mensaje" />
<input class="boton" name="Submit" type="submit" value=" Envíar Mensaje " />
</form>
</div>
</body></html>

enviar.php

<?php
// declaramos el destinatario
$destino = "Aqí nuestra dirección de E-mail";
// Cargando las variables desde el formulario
$asunto = $_POST["asunto"];
$mensaje = $_POST["mensaje"];
$nombre = $_POST["nombre"];
$correo = $_POST["correo"];
// Cuerpo del mensaje :
$body ="Tienes un nuevo mensaje de $nombre:
E-Mail : $correo
Asunto : $asunto
Mensaje : $mensaje";
// Si todo está correcto enviamos el correo
mail($destino, $asunto, $body , "From: $nombre <$correo>");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="joason.com">
<title>Correo evíado</title>
<meta http-equiv="refresh" content="3; url=formulario.php">
</head>
<body>
<center>
Gracias, Su correo ha sido enviado.</center>
</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:

Ediap16 de noviembre de 2013, 14:00
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
yoshikyit24 de diciembre de 2013, 16:27
excelente me ayudo mucho (y)
ResponderEliminar
Respuestas
Unknown30 de septiembre de 2014, 2:52
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
Respuestas
Anónimo11 de febrero de 2015, 17:05
Gracias por el aporte funciona OK
ResponderEliminar
Respuestas
ulm_design17 de julio de 2015, 19:14
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
Respuestas
Anónimo28 de octubre de 2015, 23:48
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
Anónimo2 de diciembre de 2015, 21:36
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
Respuestas