Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>formu</title>
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<style type="text/css">
.cuerpo {
border: thin solid #69F;
height: 600px;
width: 650px;
}
.div-primeros-campos {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.nombre {
}
.email {
}
.telefono {
}
.localidad {
}
.lugardetrabajo {
}
.dimension {
}
.archivos {
}
.consulta {
}
.encuesta {
}
.botonenviarlo {
clear: right;
float: right;
}
.perfect {
text-align: center;
display: block;
background-color: #3CF;
width: 200px;
right: auto;
clip: rect(auto,auto,auto,auto);
clear: left;
float: left;
}
.perfect2 {
text-align: center;
display: block;
clear: left;
float: left;
background-color: #000;
width: 400px;
right: auto;
clip: rect(auto,auto,auto,auto);
color: #FFF;
}
.perfect3 {
text-align: center;
display: block;
clear: left;
float: left;
background-color: #F00;
width: 400px;
right: auto;
clip: rect(auto,auto,auto,auto);
color: #000;
}
.transparente {
display: none;
}
.errores{
-wedkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 5px rgba(0,0,0,0.3);
background: red;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
color: #fff;
display: none;
font-size: 13px;
margin-top: -23px;
width: 250px;
text-align: center;
position: absolute;
padding: 5px;
margin-left: 200px;
font-family: "Open Sans";
}
</style>
</head>
<body>
<form method="post" name="formulariotipopresupuesto" class="cuerpo" id="formulario2">
<div class="div-primeros-campos">
<input name="nombre" type="text" class="nombre" id="nombre" placeholder=" *Nombre"/>
<div id="mensaje1" class="errores">DEBE INGRESAR SU NOMBRE!</div>
</div>
<div class="div-primeros-campos"><input name="email" type="text" class="email" id="email" placeholder=" *E-Mail" />
<div id="mensaje2" class="errores">DEBE INGRESAR UN EMAIL CORRECTO!</div>
</div>
<div class="div-primeros-campos"><input name="telefono" type="text" class="telefono" placeholder=" Telefono" /> </div>
<div class="div-primeros-campos"><input name="localidad" type="text" class="localidad" id="localidad" placeholder=" *Localidad" />
<div id="mensaje3" class="errores">NECESITAMOS SABER SU LOCALIDAD!</div>
</div>
<div>
Indique cual sería nuestra área de trabajo:
<br />
Puede elegir más de una opción. <div id="mensaje4" class="errores">SELECCIONE AL MENOS UNA OPCIÓN!</div>
</div>
<div>
<table width="633" class="lugardetrabajo">
<tr>
<td width="251"><label>
<input type="checkbox" name="lugardetrabajo[]" value="Interior de una casa." />
Interior de una casa.</label></td>
<td width="415"><label>
<input type="checkbox" name="lugardetrabajo[]" value="Local de comidas (Ej. Pizzería, rotisería, heladería)" />
Local de comidas (Ej. Pizzería, rotisería, heladería)</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Exterior de una casa (Ej. jardín)." />
Exterior de una casa (Ej. jardín).</label></td>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Un negocio (Ej. Maxi quiosco, ferretería)" />
Un negocio (Ej. Maxi quiosco, ferretería)</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Casa y jardín completos." />
Casa y jardín completos.</label></td>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Un salón (Ej. Iglesia, salón de fiestas)" />
Un salón (Ej. Iglesia, salón de fiestas)</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Un techo." />
Un techo.</label></td>
<td><label>
<input type="checkbox" name="lugardetrabajo[]" value="Escuela o Institución (Ej. Colegio, Jardín de infantes)" />
Escuela o Institución (Ej. Colegio, Jardín de infantes)</label></td>
</tr>
</table>
</div>
<div>De qué tamaño aproximado considera que es el total del lugar a tratar:</div>
<div>
<table width="218" class="dimension">
<tr>
<td><label>
<input type="radio" name="dimension" value="Grande"/>
Grande.</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="dimension" value="Mediano"/>
Mediano</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="dimension" value="Chico"/>
Chico.</label></td>
</tr>
</table>
<div id="mensaje5" class="errores">SELECCIONE UN TAMAÑO APROXIMADO!</div>
</div>
<div><textarea name="consulta" cols="" rows="" class="consulta" id="consulta" placeholder=" *Describa aquí su problema..."></textarea>
<div id="mensaje6" class="errores">POR FABOR, DESCRIBA SU PROBLEMA!</div>
</div>
<div>Como conoció nuestra web?<div id="mensaje8" class="errores">POR FABOR, ELIJA UNA RESPUESTA...</div></div>
<div><select name="encuesta" id="encuesta" class="encuesta" >
<option>-Por Facebook.</option>
<option>-A traves de otra web.</option>
<option>-Por revista publicitaria.</option>
<option>-Buscando en Google</option>
<option selected="selected">-Elija una respuesta...</option>
</select></div>
<div id="perfecto" class="perfect" style="display:none">enviado!</div>
<div id="road" class="perfect2 transparente" >pensando...</div>
<div id="fracaso" class="perfect3" style="display:none">Hubo un error al enviar su consulta, por favor, reenvíela!</div>
<input name="boton" type="submit" class="botonenviarlo" value="Enviar" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/funcionesdos.js"></script>
</body>
</html>Código Javascript :
jQuery(document).ready(function($) {
$('#formulario2').submit(function(e) {
e.preventDefault();
if( validarDatos() ) {
var data = $(this).serialize(); // Así te aseguras de que todos los datos sean enviados
$.ajax({
url: 'envio.php',
type: 'post',
data: data,
success: function(data) { // No haces nada con data
$("#mensaje8").fadeOut();
$('.perfect2').hide();
$('#perfecto').delay(500).fadeIn('slow');
$('form[name=formulariotipopresupuesto]').get(0).reset();
$('#perfecto').delay(5000).fadeOut('slow');
},
error: function() {
$('#fracaso').delay(500).fadeIn('slow');
}
});
}
});
function validarDatos() {
var nombre = $(".nombre").val();
email = $(".email").val();
validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
telefono = $(".telefono");
localidad= $(".localidad").val();
consulta = $(".consulta").val();
encuesta= $(".encuesta").val();
if (nombre == "") {
$("#mensaje1").fadeIn();
$("#nombre").focus();
return false;
}else
$("#mensaje1").fadeOut();
if(email == "" || !validacion_email.test(email)) {
$("#mensaje2").fadeIn();
$("#email").focus();
return false;
}else
$("#mensaje2").fadeOut();
if(localidad == "") {
$("#mensaje3").fadeIn();
$("#localidad").focus();
return false;
}else
$("#mensaje3").fadeOut();
if($('input[type=checkbox]:checked').length <= 0) {
$("#mensaje4").fadeIn();
return false;
}else
$("#mensaje4").fadeOut();
if($('input[type=radio]:checked').length <= 0) {
$("#mensaje5").fadeIn();
return false;
}else
$("#mensaje5").fadeOut();
if(consulta == ""){
$("#mensaje6").fadeIn();
$("#consulta").focus();
return false;
}else
$("#mensaje6").fadeOut();
if(encuesta == "-Elija una respuesta..."){
$("#mensaje8").fadeIn();
return false;
} else {
$('.perfect2').removeClass('transparente');
}
return true;
}
});Código PHP :
<?php // Guardar los datos recibidos en variables: $nombre = $_POST['nombre']; $email = $_POST['email']; $telefono = $_POST['telefono']; $localidad = $_POST['localidad']; $encuesta = $_POST['encuesta']; $consulta = $_POST['consulta']; $lugardetrabajo= $_POST['lugardetrabajo']; $dimension= $_POST['dimension']; // Definir el correo de destino: $dest = "[email protected]"; // Estas son cabeceras que se usan para evitar que el correo llegue a SPAM: $headers = "From: $nombre <$email>\r\n"; $headers .= "X-Mailer: PHP5\n"; $headers .= 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; // Aqui definimos el asunto y armamos el cuerpo del mensaje $asunto = "Consulta desde formulario BARRIER web site."; $cuerpo = "Este mensaje fue enviado por ".$nombre."<br>"; $cuerpo .= "Su Email es: ".$email."<br>"; $cuerpo .= "Numero de telefono: ".$telefono."<br>"; $cuerpo .= "Vive en: ".$localidad."<br>"; $cuerpo .= "Como conocio la pagina web? ".$_POST['encuesta'] . "<br>"; $cuerpo .= "El lugar a tratar es: ".$lugardetrabajo."<br>"; $cuerpo .= "Considera que el tamaño total del lugar a tratar es: ".$dimension. "<br>"; $cuerpo .= "Consulta: ".$consulta. "<br>"; $cuerpo .= "Enviado el: " . date('d/m/Y', time()); // Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido: if($nombre != '' && $email != '' && $telefono != '' && $encuesta != '' && $consulta != ''){ mail($dest,$asunto,$cuerpo,$headers); //ENVIAR! //Enviando auto respuesta. $pfw_header = "From: [email protected]\n" . "Reply-To: [email protected]\n"; $headers = "From: $nombre <$email>\r\n"; $pfw_subject = "Tu consulta fue recibida"; $pfw_email_to = "$email"; // Estas son cabeceras que se usan para evitar que el correo llegue a SPAM: $headers = "From: $nombre <$email>\r\n"; $headers .= "X-Mailer: PHP5\n"; $headers .= 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $pfw_message = "Muchas Gracias $nombre por contactar con BARRIER Control De Plagas\n" . "Tu consulta fue recibida satisfactoriamente. \n" . "Nos pondremos en contanto contigo lo antes posible a tu E-mail: $email \n" . "Si no respondemos por e-mail nos comunicaremos al: $telefono \n" . " \n" . "--------------------------------------------------------------------------\n" . "Por favor de NO responda este mensaje ya que es generado Automaticamente.\n" . "BARRIER-Control De Plagas.\n" . "Tel: (011) 4233-7274.\n" . "www.barrierplagas.com.ar.\n"; @mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ; } ?>
