Ejemplo jQuery: formulario de contacto con antispam

Ejemplo de código fuente con jQuery, de un formulario de contacto con validación de campos requeridos y sistema antispam sin la necesidad de tener que utilizar ningún CAPTCHA.

Descripción del ejemplo

En este ejemplo lo que haremos es que el formulario de contacto, se envie mediante jQuery sin recarga de página, e informando al usuario si no ha introducido los campos obligatorios y utilizando un sistema antispam que expliqué en ejemplo-php-evitar-spam-en-formularios-de-contacto-sin-captchas pero en lugar de hacerlo mediante PHP, lo haremos todo mediante jquery.

Utilizaremos un método llamado cargaSendMail() en el evento onClick del botón de enviar, que será el encargado de verificar todo el formulario y de llamar al archivo php que enviará los datos al email que hayamos configurado.

Código

Código jQuery.

function cargaSendMail(){
 
 
    $(".c_error").remove();
 
	var filter= /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
    var s_email = $('#c_mail').val();
    var s_name = $('#c_name').val();    
    var s_msg = $('#c_msg').val();
	var s_spam_textbox1 = $('#c_spam_textbox1').val();
	var s_spam_textbox2 = $('#c_spam_textbox2').val();
	
	
    if (filter.test(s_email)){
    sendMail = "true";
	
    $('#c_mail').css("border-color","");   	
    } else{
    $('#c_mail').after("<span id='c_error_mail' class='c_error'>Ingrese e-mail valido.</span>");
	$(".c_error").css("color","Red");
    $('#c_mail').css("border-color","Red");   
    sendMail = "false";
    }
    if (s_name.length == 0 ){
    $('#c_name').after( "<span id='c_error_name' class='c_error'>Ingrese su nombre.</span>" );
	$(".c_error").css("color","Red");
	$('#c_name').css("border-color","Red");  	
    var sendMail = "false";
    } else{
	$('#c_name').css("border-color","");
    }	
    if (s_msg.length == 0 ){
    $('#c_msg').after( "<span id='c_error_msg' class='c_error'>Ingrese mensaje.</span>" );
	$(".c_error").css("color","Red");
	$('#c_msg').css("border-color","Red");
    var sendMail = "false";
    } else{
	$('#c_msg').css("border-color","");
    }		
	//Si el primer textbox se deja en blanco
    if (s_spam_textbox1.length == 0 ){
	    var s_Bot1 = "false";
    } 
    //Si el segundo textbox no se modifica
	if (s_spam_textbox2 == "http://" ){
		var s_Bot2 = "false";
    }
	if (s_Bot1 == "false" && s_Bot2 == "false"){
		spamBot = "false";
	}
	else { spamBot = "true"; }

	
    
    if(sendMail == "true" && spamBot == "false" ){
     
     var datos = {
 
            "nombre" : $('#c_name').val(),
 
            "email" : $('#c_mail').val(),
			 
			"url" : $('#c_url').val(),
						  
			"telefono" : $('#c_telefono').val(),
 
            "mensaje" : $('#c_msg').val(),
			
			"cenviar" : $('#c_enviar').val()
			 
     };
 
     $.ajax({
 
             data:  datos,
             // hacemos referencia al archivo mail.php
             url:   'mail.php',
 
             type:  'post',
 
             beforeSend: function () {
 
                    $("#c_enviar").val("Enviando...");
 
             },
 
             success:  function (response) {
 
                    $('form')[0].reset(); 
                    $("#c_enviar").val("Enviar Mensaje");
                    $("#c_information p").html(response);
					$("#c_information").css({
											"background-color": "#DFF2BF",
											"color": "#4F8A10",
											"background-image": "url('img/exito.png')"
					});				
					$("#c_information").text( "¡Mensaje enviado correctamente!" );
                    $("#c_information").fadeIn('slow');
					
 
             }
	 
     });
 
	}
 
}

Código HTML del formulario.

	<div id="fcontacto">
		<!-- bloque confirmacion de envio oculto  -->
		<div id="c_information" class="hide">
			<p></p>
		</div>
		<!-- fin bloque confirmacion de envio -->
		<br>
		
		<!-- inicio formulario -->
		<form id="c_form" name="contact">
			<div>
				<p>
					<input name="nombre" id="c_name" type="text" size="22" tabindex="1" placeholder="Tu nombre... (*)" />
				</p>
				<p>
					<input name="email" id="c_mail" type="email" size="22" tabindex="2" placeholder="Tu email... (*)" />
				</p>
				<p>
					<input name="url" id="c_url" type="text" size="22" tabindex="3" placeholder="Tu web..." />
				</p>
				<p>
					<input name="telefono" id="c_telefono" type="number" size="22" tabindex="4" placeholder="Tu teléfono..." />
				</p>
			</div>
			<div>
				<p>
					<textarea name="mensaje" id="c_msg" cols="50" rows="14" tabindex="5" placeholder="Escribe aquí tu mensaje... (*)" ></textarea>
				</p>
			</div>
			<div id="spam">
				<label>Dejar esto en blanco</label>
				<input type="text" id="c_spam_textbox1" name="spam_textoblanco" />
				<label>No cambiar esto</label>
				<input type="text" id="c_spam_textbox2" value="http://" name="spam_webvacia" />
			</div>									
			<p>
				<label>(*) Campos Requeridos</label>
				<input name="cenviar" type="button" id="c_enviar" tabindex="6" value="Enviar Mensaje" onclick="cargaSendMail()" />       
			</p>

			
		</form>
		<!-- fin formulario -->
		
	</div>

Código CSS.

/* Hacemos display a none para que no se muestre al usuario los campos antispam */

#spam{display:none;}

Código PHP para enviar el email.

<?php



if(isset($_POST['cenviar'])){


	if(isset($_POST['nombre'])){
		$nombre = $_POST['nombre'];
	}
	if(isset($_POST['email'])){
		$email = $_POST['email'];
	}
	if(isset($_POST['url'])){
		$url = $_POST['url'];
	}
	if(isset($_POST['telefono'])){
		$telefono = $_POST['telefono'];
	}
	if(isset($_POST['mensaje'])){
		$mensaje = $_POST['mensaje'];
	}
	// Si cualquier línea es más larga de 70 caracteres, se debería usar wordwrap()
	$mensaje = wordwrap($mensaje, 70, "\r\n");



	$msj = "De: ".$nombre."\r\n";
	$msj .= "Email: ".$email."\r\n";
	$msj .= "Fecha: ".date("d-m-Y H:i:s")."\r\n";
	$msj .= "Web: ".$url."\r\n";
	$msj .= "Telefono: ".$telefono."\r\n\n\n\n";
	$msj .= "Mensaje: ".$mensaje;


	/***** Zona de envio con la funcion MAIL de php *****/
	// Para probarlo, descomentas esta linea:
	
	//mail('tu@correo.com', 'Asunto: Probando formulario de contacto...', $msj);

}
else die("El acceso directo a este archivo no es permitido.");

	
	
?>

Demo del ejemplo

VER DEMO

Descargar ejemplo