Formulario de Contacto en PHP con validación
Con este sencillo tutorial aprenderás a crear un Formulario de Contacto simple, básico y muy fácil de implementar en tu sitio web, escrito en PHP por DaxMX.
Para hacer el formulario más interesante, agregué doble validación, una con JavaScript y otra con PHP, de ese modo nos aseguramos que el formulario no se envíe con campos vacíos y que el usuario llene todos los datos requeridos.
Características:
- HTML 5
- 100% Personalizable
- Gratis y de Código Abierto
- Doble validación, Javascript + PHP
- Código PHP programado de forma segura
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 del formulario no estén vacíos
- contacto.php – El script PHP que valida y envía el E-Mail de contacto.
Código fuente de contacto.html:
Código HTML:
<!DOCTYPE html> <html> <head> <title>Formulario de Contacto</title> <!-- Archivo de validación colocar dentro de HEAD /HEAD --> <script src="validar.js"></script> <!-- Fin Archivo de validación --> </head> <body> <!-- Formulario de contacto colocar dentro de BODY /BODY--> <div style="width:600px;margin:10px auto;"> <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> <div> <a href="https://daxmx.net/?p=184">Formulario de Contacto PHP por DaxMX</a> </div> <!-- Fin Formulario de contacto --> </body> </html>
Código Fuente del script 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: el caracter @ antes de las variables o funciones PHP sirve para evitar que PHP muestre errores en pantalla, en su lugar, mostrará nuestro mensaje de error personalizado.
Código PHP:
<?php $email_to = "tudirecciondecorreo@algo.com"; //cambiar por tu email #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\r\nReply-To: $email\r\n"; //La persona que envia el correo $asunto = "$subject"; //El asunto $contenido = "$name le ha enviado el siguiente mensaje:\n" . "\n" . "$message\n" . "\n"; #Validar campos vacíos if(!$email || !$message ) { die('Error: Formulario incompleto'); } #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"); } ?>
Para instalar, sube los 3 archivos por FTP a tu sitio Web y coloca los 3 archivos dentro de la misma carpeta.
Nota: El formulario de contacto de mi página web está basado en este ejemplo, dependerá de ustedes adaptarlo al estilo y necesidades de su sitio web.
Descarga los 3 archivos en ZIP:
Descarga Formulario de contacto PHP
Saludos a todos desde México, DaxMX.
Respaldar Bases de Datos desde la línea de comandos
Expresion Regular para validar URL con JavaScript y PHP
Buenísimo compadre!! Mis felicitaciones, arriba el talento mexicano ❤
Hola, todo parece funcionar bien, el código esta perfecto.
Genial me encanta
Me interesa el material
Hi,
I’m a long time reader.
I’m writing to you because I’d love to contribute a guest post to your website.
I’ve been brainstorming some topics and I think your readers would get a ton of value from them.
I’ll make sure the piece is filled with information that can’t be found anywhere else. In exchange, all i expect is a backlink from within the main body of the article.
Do let me know if you like this proposal and if I can begin sending you some topic ideas.
Sincerely,
Ashlie Lopez
una consulta, por que cuando pongo enviar me descargar un archivo php?
saludos
Hola, es porque el servidor donde lo probaste no soporta PHP, te manda el archivo en vez de procesarlo, prueba en otro servidor o instala PHP.
Hola, todo parece funcionar bien, el código esta perfecto y todos los archivos alojados en mi sitio, coloque mi correo en la parte del código php que lo requiere, pero el correo en cuestión no me llega.
Hola Josue:
Revisa tu carpeta SPAM y de estar ahí marca el correo como seguro, o puedes intentar con otra dirección de correo.
Si sigue sin funcionar, modifica lo siguiente en el archivo contacto.php:
$cabeceras = "From: $email\n"Y lo cambias por:
$cabeceras = "From: \"$email\" <admin@tupagina.com>\n"Donde tupagina.com es la direccion de tu pagina web sin el www (nombre de dominio).
Te comento además que actualicé el formulario a la versión 2.0, tiene mejoras respecto a la seguridad y validación del mismo, descargalo pulsando el botón DESCARGAR al final del post.
Saludos
Muchas gracias, muy buen aporte.
Una simple duda, si mi formulario no valida debido a que puede ser?
Hola, puede ser que no tenas habilitado javascript en el navegador, o que hayas modificado el archivo y tenga alguna error de sintaxis, saludos.
Muchas Gracias Estimado. Está perfecto!