Ejemplo jQuery: formulario de contacto con antispam

logo jQuery

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

 

 

Valoración General

[Valoraciones:  8    Promedio:  3.9 de 5]
  • Oscar

    Gracias, me ayudó mucho el ejemplo.

  • Miguel

    Hola.
    Gracias por el esfuerzo pero no me funcionó. Hasta el momento de enviar, en que no llega nada, es el mejor script que he visto (y llevo unos cuantos).
    He hecho de todo (Descomentar, enlazar dentro y fuera de la página pero no llega ningún correo.
    El servidor donde tengo alojado el sitio tiene todos los servicios.
    Alguna idea?
    Gracias de nuevo.

    • Miguel

      Me funcionó, solo era un error en una linea por un espaciado mal puesto.
      Gracias de nuevo.
      Por mi parte solo me quede añadirte a la lista de favoritos y aprender más.
      -saludos-

  • darwin

    Nunca me llega el correo 🙁 pero si me muestra el mensaje que se envio

    • Javier Crego

      La función mail está inhabilitada para el ejemplo, pero para que te funcione en tu servidor php, tendrías que habilitarla.
      Si lees el anterior comentario que puse al tuyo, haciendo eso seguramente te funcione, y si no fuera el caso, puede que se te haya quedado en la carpeta de spam de tu correo electrónico.

      Saludos.

  • Miguel

    Hola Javier, lo primero darte las gracias por tu trabajo. Me baje “proyecto completo #515”, pero no se donde poner mi mail para que me lleguen los correos, uso un correo tipo “info@tu empresa.com” y para recibir los mensajes uso el “microsoft office outlook 2007”. Me podrías ayudar. Desde ya muchas gracias

    • Javier Crego

      Hola Miguel.

      Si te fijas en el archivo mail.php, le puse este comentario:

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

      Pues simplemente con que descomentes la línea donde va puesto tu mail, ya te debería de funcionar. es decir tendrías que dejarlo así:

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

      Un saludo.

  • http://www.dimensionalgroup.net Edgar

    Gracias de nuevo Javier. !!Que descuido mio. No había ingresado las librerías!!. El mail si estaba bien y el funciones.js ya los tenia en el servidor. Ajustado ya el formulario me muestra el … “Mensaje enviado correctamente”. Pero no me llega el correo. Te cuento no se si tenga que ver. Ya antes había sido victima de spam y por eso estaba bloqueado mi formulario y no enviaba correos, a pesar que los mensajes eran de envío correcto. Esa fue la razón del cambio con anti-spam. Mi proveedor me pide captcha, pero no quiero complicarme con eso. Sera que es problema de mi hosting? O sera que olvide otra cosa?. Gracias. Un saludo.

    • Javier Crego

      Si no te llega el correo, pues seguramente sea debido a que te lo marca como spam. Deberás de ir a tu configuración de correo, y decirle que excluya el remitente de tu servidor de correo de tu hosting. A veces con ir a la bandeja de spam de tu correo y marcar cualquiera que veas como spam, se hace ya automático, y ya no te volvería a ocurrir con los siguientes. Pero de no ser así, te tocará ponerle una regla con tu dominio, para que no lo marque como spam.

      De todas formas, en estas líneas del archivo mail.php:

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

      descomentaste la línea de mail y modificaste tu@correo.com por el tuyo no?

      • http://www.dimensionalgroup.net Edgar

        Javier mil y mil gracias por tu tiempo. Yo ya había cambiado la linea del correo en el archivo mail.php y también había revisado la carpeta de spam. Hable con proveedor de hosting y el lío es que ellos tienen bloqueado el smtp (no lo sabia), por lo tanto no hay salida de correos. Van a tratar de habilitarme nuevamente el smtp pero si detectan spam me envían puerto,usuario, y contraseña para que yo configure en mi archivo de envío de correos. (supongo en el mail.php). Si de pronto me complico con esto te puedo pedir ayuda?. Gracias

      • Javier Crego

        Hola de nuevo Edgar.
        Siento el retraso en contestarte, pero anduve bastante ocupado durante unos días.

        En relación a lo que comentaste, si al final te desbloquean el smtp en tu hosting, y tuvieras problemas y te tuvieran que dar una configuración propia de smtp, te comento desde ya que con la función mail de php, no podrías hacerlo, ya que es una función muy básica y no trae configuración de smtp. Tendrías que crearte tú un script aparte, pero es tontería porque para eso ya tienes diversas clases o frameworks que realizan ese cometido, como por ejemplo la más usada: PHPMailer.

        De todas formas, como ví que es algo útil y que más gente puede necesitar, te dejo aquí el artículo que he publicado, por si te hiciera falta y para cualquier duda ya relacionada con mail a través de smtp:

        http://ejemplocodigo.com/ejemplo-php-enviar-emails-con-smtp/

        Saludos.

  • http://www.dimensionalgroup.net Edgar

    Hola, he probado tu proyecto completo 515 (formulario de contacto con antispam) y no me funciona, pico en enviar y no hace nada, se queda ahí. Que sera?. He bajado el zip actualizado de abril 14.
    Gracias por tu ayuda.

    • Javier Crego

      Hola.
      ¿Cómo estás probando el ejemplo, en que servidor (localhost, servidor propio,…)?. Si estás probando el ejemplo, abriendo directamente el archivo html del formulario, no te va a funcionar. Necesitas probarlo en un servidor web apache para que funcione bien el código php que trae. Bien sea mediante XAMPP en localhost o en un hosting propio que tengas contratado.

      Saludos.

      • http://www.dimensionalgroup.net Edgar

        Hola Javier, gracias por tu respuesta. Estoy probando en un servidor web apache, en un hosting que tengo contratado. Este es el link: http://www.dimensionalgroup.net/contactos-modificado.htm. Pase todo casi tal cual tu proyecto, solo quite del formulario el campo “web” y acomode el formulario a mi pagina. Nada mas. Todo lo demas tal cual tu proyecto. Gracias.

      • Javier Crego

        Hola de nuevo.
        Ok, al indicarme el link con tu formulario, he visto que te falta incluirle las librerías de jquery y el archivo js con las funciones para que el formulario funcione.
        Y si no le metes eso, nunca te va a funcionar el formulario.

        Tendrías que meterle dentro del HEAD de tu página, las librerías:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        
        
        <script src="funciones.js"></script>
        
        

        La de jquery, no hace falta que la subas a tu hosting, ya que como ves te puse el link de google y así te valdría. Pero la de funciones.js, sí la necesitas ya que es donde está el método para realizar el envio del formulario. Y por su puesto también tienes que subir al servidor, el archivo mail.php y modificarle el email donde quieras que te envien los formularios.

  • http://www.unicomdata.cl Carlos

    Muy agradecido.

  • http://ea3gat.com Bienve

    Hola, bueno funciona perfectamente, gracias por todo.

  • Bienve

    Hola, he probado Ejemplo jQuery: formulario de contacto con antispam y no me funciona, me deja enviar sin datos, pero no recibo nada, alguna sugerencia.
    Gracias por tu tiempo.

    • Javier Crego

      Hola, ¿dónde lo estás probando? en la DEMO que hay puesta o bajándote el ejemplo?

      Saludos.

      • Bienve

        Hola, gracias por responder, lo he probado bajando el ejemplo y adaptándolo a una página que estoy haciendo para unos amigos.

      • Javier Crego

        Hola!
        Revisé bien el ejemplo, y había un problemilla que ya he arreglado, por tanto ya te debería de funcionar correctamente. Los archivos que deberías reemplazar y volverte a descargar son:

        – funciones.js
        – mail.php

        Lo que me deja en duda, es que antes pusieras que te dejaba enviar correctamente SIN DATOS, cuando la validación de datos del campo “Nombre”, “Email” y “Mensaje” funcionaba perfecto, y si no le metías datos no te dejaba continuar enviando. ¿Te sigue dejando enviar el formulario sin datos?. ¿Qué navegador estás usando?

        Saludos.

      • http:ea3gat.com Bienve

        Hola, gracias por tu atención, no he podido probar el código , utilizo Safari, cuando lo haga te comento, eres muy amable.
        Salu2.
        Si puedes visita mi página, es de aficionado, ya me dirás.