-
Notifications
You must be signed in to change notification settings - Fork 1
/
contact.html
105 lines (92 loc) · 4.9 KB
/
contact.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<title>Inicio</title>
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="css/contact.css" />
</head>
<body>
<section id="contact" class="lined-paper-background">
<header>
<h1>¿Consultas? ¿Sugerencias?</h1>
</header>
<div class="text">
<p>Puedes enviarnos un mensaje utilizando el formulario que está a continuación. ¡Te responderemos a la brevedad!</p>
</div>
<form name="contact" action="" method="post" id="contactForm" onsubmit="validateMail();
return false;">
<div class="leftGroup left">
<input id="firstName" name="firstName" type="text" title="First Name" value="" size="30" maxlength="2048" placeholder="Tu nombre">
<div class="clr"></div>
<input id="lastName" name="lastName" type="text" title="Last Name" value="" size="30" maxlength="2048" placeholder="Tu apellido">
<div class="clr"></div>
<input id="email" name="email" type="email" title="Email" value="" size="30" maxlength="2048" placeholder="Tu correo">
<div class="clr"></div>
<input id="phone" name="phone" type="tel" title="Phone" value="" size="30" maxlength="2048" placeholder="Tu teléfono">
<div class="clr"></div>
</div>
<div class="rightGroup right">
<textarea id="message" name="message" placeholder="Tu mensaje"></textarea>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="fullWidthGroup">
<button class="m-btn black right no-margin" type="submit">Enviar Mensaje <i class="icon-share-alt icon-white"></i></button>
<div class="result right"></div>
<div class="clr"></div>
</div>
</form>
<div class="clr"></div>
<div id="byMail">
<p>¿Prefieres utilizar tu correo para contactarnos? Escribenos a <a href="mailto:contacto@conociendonostv.com">contacto@conociendonostv.com</a></p>
</div>
<div class="clr"></div>
</section>
<script>
function validateMail(){
hasError = false;
emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
firstName = $("#firstName").val();
lastName = $("#lastName").val();
email = $("#email").val();
phone = $("#phone").val();
message = $("#message").val();
if(firstName != "" && lastName != "" && email != "" && emailReg.test(email) && message != ""){
$.ajax({
type: "POST",
url: "php/sendMail.php",
data:{
sfn: firstName,
sln: lastName,
sm: email,
sp: phone,
msg: message
},
success: function(data){
$("#contactForm .result").removeClass("warning success").addClass("success");
$("#contactForm .result").html('<i class="fa fa-check-circle"></i> Tu mensaje has sido enviado correctamente');
$("#contactForm input, #contactForm textarea").each(function(){
$(this).val("");
})
},
error: function(data){
$("#contactForm .result").removeClass("warning success").addClass("warning");
$("#contactForm .result").html('<i class="fa fa-times-circle"></i> Ups! No podemos enviar el mensaje, intenta más tarde.');
}
});
}else{
$("#contactForm .result").removeClass("warning success").addClass("warning");
$("#contactForm .result").html('<i class="fa fa-exclamation-circle"></i> Completa los campos requeridos');
}
/*
console.log(firstName);
console.log(lastName);
console.log(email);
console.log(phone);
console.log(message);
*/
}
</script>
</body>