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:

  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 del formulario no estén vacíos
  3. 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 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>
<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.

128 comentarios

Añadir respuesta

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