Formulario de Contacto en PHP con validación (Sencillo y muy Básico).
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:
- contacto.html – Página HTML que verán las personas que visiten el formulario en tu sitio web.
- validar.js – JavaScript para validar que los campos de nuestro formulario no estén vaciós
- 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.
Descargar los 3 archivos en un ZIP:
Descargar Formulario de contacto en PHP Gratis
El formulario de contacto de mi página web está basado en este ejemplo simple que acabo de mostrar, así que depende de ustedes adaptarlo al estilo y a las necesidades que requieras en tu sitio web.
Saludos a todos desde México, Dasumo.
Deja un comentario
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:
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.
Nunca esta demas darte las gracias por ese formulario, me es de gran ayuda, ahora a darle estilos.
saludos,
Hola,
Segui todos los pasos y no me funciona :S
hola, muy bueno el tutorial.. te cuento que lo hice y me sale perfecto, mi duda de como tengo que hacer para que despues que yo mando un mail no me quede la pagina en blanco con el mensaje “Muchas gracias, su mensaje fue enviado correctamente”
Espero tu respuesta
Saludos
Hola una pregunta, como hago para cuando visualice el mensaje enviado a travéz del formulario de contacto se vea bién, tengo problemas con las tildes y la ñ, se ve mal cuando se lee el correo.
Hola
acabo de realizar el tutorial (muy bueno por cierto y felicidades para el autor) pero tengo un problemita 
ya puse todo en mi sitio y estoy tratando de enviarme un mensaje, pero me aparece error, dice que no puede enviarse mensajes 
, la verdad ya no se que hacer, ya verifiqué parte por parte y aun así no funciona 
¿que hago? el sitio donde estoy poniendo el formulario es el siguiente.
http://www.mascarasdealiento.org/MASCARAS/contacto.html
Hola, veo muy instructivo tu post, el formulario parece correcto, pero queria avisarte que el download ya no sirve porque no existe mas el sitio para descargar. Los tienes aun?
Muchas gracias
Carlos Santiago Belveder
Carlos Santiago Belveder
Carlos Santiago Belveder
Hola, sí lo tengo disponible, lo voy a subir aquí mismo para que pueda ser descargado…
Entre tanto, si gustas puedes copiar el código de cada archivo directamente del post, pegar cada uno en el bloc de notas y guardarlo con su respectiva extensión.
Saludos =)
Otra duda quisiera saber como anexo mas cuentas de correo que reciban la misma informacion del formulario
gracias
En la línea donde pones tu correo, separa cada cuenta de correo con una COMA ( ej. cuenta@1.com, cuenta@2.com, etc… ), si no te funciona con una COMA prueba con PUNTO y COMA.
Saludos.
Hola muy buen tutorial, gracias por ese aporte e buscado por dias variso tutoriales acerca del tema de formulario decontacto con validacion, pero que funcione realmente solo el tuyo, solo tengo un problema mas mo cambios los items en vez de asunto por ejemplo telefono y que lleguen al correo esa informacion detallada por ejemplo:
NOMBRE
TELEFONO
CORREO ELECTRONICO
MENSAJE
No se si eso es mas complejo
y si hay alguna forma deque entre el correo a al bandeja de entrada y no al spam
Agradeceria que me aclararas estas dudas es muy util para un trabaj oqeu hago en este momento
gracias
Muchas gracias por el aporte, pero surgio algo:
Estoy usando el codigo para que el mensaje de agradecimiento aparezca en la misma pagina, pero me pille algo:
Cuando no lleneo uno de los campos me sale el alert, pero aun asi envia el mensaje, con los datos faltantes, ¿como hago para que no lo envie hasta que llene todos los datos?
Gracias
Esto me ha venido muy muy bien, asi que… ¡Muchas muchas gracias!
Gracias me sirvió de mucho y a la perfección.
Hola.
Puedes volver a colgar los archivos?, el enlace ya no está operativo, otra cosa, tengo una plantilla para mi web que lleva un formulario de contacto, pero no funciona.
Como habría que meter tu código?
Un saludo y gracias
Excelente ejemplo y se agradece.
La consulta es si queremos adjuntar un archivo cuales son las lineas a agregar en el archivo .php
Saludos