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
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
Hola Elvis:
Este tutorial te servirá para aprender a validar números usando javascript, pero en ese caso no acepta espacios ni guiones, sólo números:
http://www.dasumo.com/blog/validar-campo-numerico-con-javascript/
Saludos =)
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