Formulario de Contacto en PHP y con reCAPTCHA

Muchas veces necesitamos un formulario personalizado para un cliente, por eso hoy presento el código necesario para hacer un formulario sencillo. Cada uno podrá adaptarlo a sus necesidades. El formulario también posee un reCAPTCHA para prevenir el spam, para utilizar un reCAPTCHA deberemos inscribirnos en el sitio http://www.google.com/recaptcha/whyrecaptcha donde nos darán gratis una clave pública y una privada, ambas necesarias para hacerlo funcionar. El código para la página del formulario es el siguiente:

1
2
3
<?php
session_start();
?>
<?php
session_start();
?>

1
2
3
4
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contacto</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contacto</title>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript" >
function contacto(){
 
 var nom=document.getElementById("txtnombrecontacto").value;
 var email=document.getElementById("txtemailcontacto").value;
 var mensaje=document.getElementById("txtmensajecontacto").value;
 document.getElementById("modo").value=1;
 
 var expEmail="^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$";
 var strOptions="";
 var emailREGEXP = new RegExp(expEmail,strOptions); 
 if(emailREGEXP.test(email)){
 mailOk=1;
 }else{
 mailOk=0;
 } 
 
 if(nom=="" || nom==" "){
 alert("Debe ingresar un nombre"); 
 document.getElementById("txtnombrecontacto").focus();
 }else if(email=="" || email==" "){
 alert("Debe ingresar un Email");
 document.getElementById("txtemailcontacto").focus();
 }else if(mailOk==0){
 alert("El formato del Email es incorrecto");
 document.getElementById("txtemailcontacto").focus();
 }else if(mensaje=="" || mensaje==" " || mensaje=="Ingrese su comentario aqui..."){
 alert("Ingrese un comentario valido");
 document.getElementById("txtmensajecontacto").value="";
 document.getElementById("txtmensajecontacto").focus(); 
 }else{
 document.getElementById('contactoform').submit();
 }
}
</script>
<script type="text/javascript" >
function contacto(){

 var nom=document.getElementById("txtnombrecontacto").value;
 var email=document.getElementById("txtemailcontacto").value;
 var mensaje=document.getElementById("txtmensajecontacto").value;
 document.getElementById("modo").value=1;

 var expEmail="^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$";
 var strOptions="";
 var emailREGEXP = new RegExp(expEmail,strOptions); 
 if(emailREGEXP.test(email)){
 mailOk=1;
 }else{
 mailOk=0;
 } 

 if(nom=="" || nom==" "){
 alert("Debe ingresar un nombre"); 
 document.getElementById("txtnombrecontacto").focus();
 }else if(email=="" || email==" "){
 alert("Debe ingresar un Email");
 document.getElementById("txtemailcontacto").focus();
 }else if(mailOk==0){
 alert("El formato del Email es incorrecto");
 document.getElementById("txtemailcontacto").focus();
 }else if(mensaje=="" || mensaje==" " || mensaje=="Ingrese su comentario aqui..."){
 alert("Ingrese un comentario valido");
 document.getElementById("txtmensajecontacto").value="";
 document.getElementById("txtmensajecontacto").focus(); 
 }else{
 document.getElementById('contactoform').submit();
 }
}
</script>
1
2
3
4
5
6
7
8
9
</head>
<body>
<h1>Contacto</h1>
<span >
 Le agradecemos sus preguntas, comentarios o sugerencias, de ser necesario le responderemos a su E-mail a la brevedad, Gracias. 
</span>
<br><br>
<form id="contactoform" method="post" action="sContacto.php">
<table>
</head>
<body>
<h1>Contacto</h1>
<span >
 Le agradecemos sus preguntas, comentarios o sugerencias, de ser necesario le responderemos a su E-mail a la brevedad, Gracias. 
</span>
<br><br>
<form id="contactoform" method="post" action="sContacto.php">
<table>
1
2
3
4
5
6
7
8
9
10
<?php
if(isset($_SESSION['ses_mensaje_contacto'])) {
 $mensaje=$_SESSION['ses_mensaje_contacto'];
 echo "<script>alert('El Recaptcha ingresado no es correcto, prueba nuevamente.');</script>";
 }else {
 $mensaje='Ingrese su comentario aqui...';
 }
$email=$_SESSION['ses_email_contacto'];
 $nom=$_SESSION['ses_nom_contacto'];
?>
<?php
if(isset($_SESSION['ses_mensaje_contacto'])) {
 $mensaje=$_SESSION['ses_mensaje_contacto'];
 echo "<script>alert('El Recaptcha ingresado no es correcto, prueba nuevamente.');</script>";
 }else {
 $mensaje='Ingrese su comentario aqui...';
 }
$email=$_SESSION['ses_email_contacto'];
 $nom=$_SESSION['ses_nom_contacto'];
?>
1
2
3
4
5
6
7
8
9
10
 
Nombre:
<input id="txtnombrecontacto" class="textinput2" type="text" name="txtnombrecontacto" value="<?php echo $nom; ?>" /> *
Email:
<input id="txtemailcontacto" class="textinput2" type="text" name="txtemailcontacto" value="<?php echo $email ?>" /> *
<tr><td align="left">Mensaje: </td> <td align="left">
</td></tr> <tr><td align="left">
</td><td><textarea name="txtmensajecontacto" id="txtmensajecontacto" cols="65" rows="10" >
<?php echo $mensaje; ?></textarea> *</td></tr> 
<tr><td></td><td></td><tr></table>
 
Nombre:
<input id="txtnombrecontacto" class="textinput2" type="text" name="txtnombrecontacto" value="<?php echo $nom; ?>" /> *
Email:
<input id="txtemailcontacto" class="textinput2" type="text" name="txtemailcontacto" value="<?php echo $email ?>" /> *
<tr><td align="left">Mensaje: </td> <td align="left">
</td></tr> <tr><td align="left">
</td><td><textarea name="txtmensajecontacto" id="txtmensajecontacto" cols="65" rows="10" >
<?php echo $mensaje; ?></textarea> *</td></tr> 
<tr><td></td><td></td><tr></table>
1
2
3
4
5
6
7
8
9
10
11
<?php
echo "<table width='600'><tr>";
 
 require_once('captcha/recaptchalib.php');
 $publickey = "Tu clave Publica"; // Debemos remplazarla por la clave Publica otorgada en el registro del reCaptcha
 echo "<td align='center'><div id='Div_captcha'>".recaptcha_get_html($publickey)."</div></td>"; 
 echo '<td align="right"><input type="button" value="Enviar" onclick=contacto();></td></tr>';>echo "</tr></table>";
unset($_SESSION['ses_mensaje_contacto']);
unset($_SESSION['ses_email_contacto']);
unset($_SESSION['ses_nom_contacto']);
?>
<?php
echo "<table width='600'><tr>";

 require_once('captcha/recaptchalib.php');
 $publickey = "Tu clave Publica"; // Debemos remplazarla por la clave Publica otorgada en el registro del reCaptcha
 echo "<td align='center'><div id='Div_captcha'>".recaptcha_get_html($publickey)."</div></td>"; 
 echo '<td align="right"><input type="button" value="Enviar" onclick=contacto();></td></tr>';>echo "</tr></table>";
unset($_SESSION['ses_mensaje_contacto']);
unset($_SESSION['ses_email_contacto']);
unset($_SESSION['ses_nom_contacto']);
?>
1
2
3
4
<input type="hidden" name="modo" id="modo">
</form>
</body>
</html>
<input type="hidden" name="modo" id="modo">
</form>
</body>
</html>

Como se puede ver he dividido el código en distintos bloques para que se puede ver correctamente, pero se trata de el archivo correspondiente al formulario de contacto. Hay varias partes destacables, primero  iniciamos la sesión con session_start(); , necesario para poder declarar y utilizar variables de sesión. Estas variables se mantienen en el sitio sin importar en que página del mismo estemos (simplificando) y las utilizaremos para mantener los datos con los que el usuario relleno el formulario si se equivoca al llenar el reCAPTCHA.

Luego de iniciar la sesión encontramos un poco de html propio de cualquier página y luego viene la función JS contacto(). Esta función se encarga de que el usuario no deje campos vacíos ni ingrese un E-mail con un formato extraño, de esto último se encarga la expresión regular expEmail. Si todo esta correcto la función enviará el formulario contactoform.

El formulario se encuentra más abajo y en caso de que el reCAPTCHA haya sido incorrecto los valores son extraídos de las variables de sesión y cargados mediante el atributo value de los input. Luego viene el código propio del reCAPTCHA, este código es proporcionado por el sitio web donde debemos registrarnos para obtener las claves necesarias para que funcione. En este caso lo único que hay que hacer es colocar nuestra clave pública donde la indica y tener el archivo recaptchalib.php en la carpeta correspondiente, en este caso captcha.

Luego tenemos el botón para enviar con el evento onclick que llama a la función contacto, un detalle es que esta función le asigna el valor a un campo escondido llamado modo, este campo tiene la función de “limitar” el acceso al código donde se enviará el e-mail. El último código importante es la destrucción de las variables de sesión utilizando la función unset, ya que no es conveniente tener variables de sesión asignadas sin utilidad.

Pasamos ahora al archivo (llamando en este caso sContacto.php) donde se verificará el reCAPTCHA y según el resultado se enviará o no el e-mail, este archivo es el que se encuentra “apuntado” en el atributo action del form (formulario).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
require_once('enviaEmail.php');
require_once('captcha/recaptchalib.php');
session_start();
$modo=$_POST['modo'];
if($modo==1) {
 
 $nom=$_POST['txtnombrecontacto'];
 $email=$_POST['txtemailcontacto'];
 $mensaje=$_POST['txtmensajecontacto'];
 
 $mensaje=filter_var($mensaje, FILTER_SANITIZE_STRING);
 $mensaje=mysql_real_escape_string($mensaje);
 
 $nom=filter_var($nom, FILTER_SANITIZE_STRING);
 $nom=mysql_real_escape_string($nom);
 
 $dire=$HTTP_REFERER;
 $privatekey = "Tu clave privada"; //Debemos remplazarla por la clave Privada proporcionada en el registro reCaptcha
 $resp = recaptcha_check_answer ($privatekey,
 $_SERVER["REMOTE_ADDR"],
 $_POST["recaptcha_challenge_field"],
 $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
 $_SESSION['ses_mensaje_contacto']=$mensaje;
 $_SESSION['ses_email_contacto']=$email;
 $_SESSION['ses_nom_contacto']=$nom;
 
 header("location:contacto.php");
 }else {
 
 $asunto="Pedido de Contacto de ".$nom."";
 $contenido="Un mensaje de contacto de ".$nom."<br>
 Email: ".$email."<br>Mensaje:<br><br>".$mensaje."";
 $emailAdmin="admin@miEmail.com"; //Debemos cambiarlo por el Email al que queremos que llegue el pedido de contacto
 
 envioEmail(2,$asunto,$contenido,$emailAdmin);
 
 $_SESSION['ses_mensaje']="Mensaje enviado correctamente, Gracias";
 header("location:mensaje.php"); //Podemos reenviar al usuario a la página que deseemos cambiando la url
 
 }
}
?>
<?php
require_once('enviaEmail.php');
require_once('captcha/recaptchalib.php');
session_start();
$modo=$_POST['modo'];
if($modo==1) {

 $nom=$_POST['txtnombrecontacto'];
 $email=$_POST['txtemailcontacto'];
 $mensaje=$_POST['txtmensajecontacto'];

 $mensaje=filter_var($mensaje, FILTER_SANITIZE_STRING);
 $mensaje=mysql_real_escape_string($mensaje);

 $nom=filter_var($nom, FILTER_SANITIZE_STRING);
 $nom=mysql_real_escape_string($nom);

 $dire=$HTTP_REFERER;
 $privatekey = "Tu clave privada"; //Debemos remplazarla por la clave Privada proporcionada en el registro reCaptcha
 $resp = recaptcha_check_answer ($privatekey,
 $_SERVER["REMOTE_ADDR"],
 $_POST["recaptcha_challenge_field"],
 $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
 $_SESSION['ses_mensaje_contacto']=$mensaje;
 $_SESSION['ses_email_contacto']=$email;
 $_SESSION['ses_nom_contacto']=$nom;

 header("location:contacto.php");
 }else {

 $asunto="Pedido de Contacto de ".$nom."";
 $contenido="Un mensaje de contacto de ".$nom."<br>
 Email: ".$email."<br>Mensaje:<br><br>".$mensaje."";
 $emailAdmin="admin@miEmail.com"; //Debemos cambiarlo por el Email al que queremos que llegue el pedido de contacto

 envioEmail(2,$asunto,$contenido,$emailAdmin);

 $_SESSION['ses_mensaje']="Mensaje enviado correctamente, Gracias";
 header("location:mensaje.php"); //Podemos reenviar al usuario a la página que deseemos cambiando la url

 }
}
?>

Como se puede ver en el código lo primero que hacemos es incluir un archivo donde esta la función para enviar el e-mail, la función necesaria ya la mostramos en este blog aquí. Luego agregamos la librería del reCAPTCHA, seguido del inicio de sesión. Ahora recibimos el modo del que hable antes y si coincide con el número uno seguimos adelante. Lo primero es recibir el resto de los valores del formulario, es decir, nombre, e-mail y mensaje. Luego comprobaremos si el reCAPTCHA ingresado es correcto, no hay que olvidarse de cambiar la clave secreta por la nuestra. En caso de que el reCAPTCHA sea incorrecto se cargan las variables de sesión con los datos y mediante la función header mandamos al usuario nuevamente a la página de contacto. En el caso contrario enviamos el e-mail al administrador utilizando la función enviaEmail() y redirigimos a el usuario a la página mensaje.php donde podría haber un código como el siguiente:

1
2
3
<?php
session_start();
?>
<?php
session_start();
?>
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Mensaje</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Mensaje</title>
</head>
<body>
1
2
3
4
5
<?php
 $mensaje=$_SESSION['ses_mensaje'];
 echo "<br><br><p class='textoGris_M'>".$mensaje."</p>";
 unset($_SESSION['ses_mensaje']);
?>
<?php
 $mensaje=$_SESSION['ses_mensaje'];
 echo "<br><br><p class='textoGris_M'>".$mensaje."</p>";
 unset($_SESSION['ses_mensaje']);
?>
1
2
3
</div>
</body>
</html>
</div>
</body>
</html>

Bueno espero que no haya sido muy confuso y que sea de utilidad, si hay dudas o errores no duden en comentar que contestare a la brevedad.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario