Formulario de Contacto en PHP con validación

En esta ocasión, traigo para ustedes un sencillo tutorial con el que aprenderás a crear un Formulario de Contacto simple y muy básico, muy fácil de implementar, escrito en PHP.

Para hacer nuestro formulario más interesante, agregaré una doble validación, con JavaScript y PHP, de ese modo nos aseguramos que nuestro 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, con Javascript y PHP
  • Código PHP programado de forma segura

El formulario consta de 3 archivos:

  1. contacto.html – Página HTML que verán las personas que visiten el formulario en tu sitio web.
  2. validar.js – JavaScript para validar que los campos de nuestro formulario no estén vaciós
  3. 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:

[code]<!DOCTYPE html>
<html>
<head>
<title>Formulario de Contacto en PHP</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>
<!– Fin Formulario de contacto –>
</body>
</html>[/code]

Código Fuente del archivo de validación validar.js:

[code]//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;
}
}[/code]

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:

[code]<?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»);
}

?>[/code]

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.

Nota: El formulario de contacto de mi página web está basado en este ejemplo simple, así que dependerá de ustedes adaptarlo al estilo y a las necesidades de su sitio web.

Descargar los 3 archivos en un ZIP:

Descarga Formulario de contacto PHP por DaxMX

Saludos a todos desde México, DaxMX.

126 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *