-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfale-en.html
152 lines (144 loc) · 6.35 KB
/
fale-en.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html>
<!-- JAVASCRIPT -->
<script src="https://www.google.com/recaptcha/api.js?render=6Ld8U8AeAAAAAD-1OuR_aWEqjZv4DR1VVEaie5Ac"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./jsis/bootstrap.bundle.min.js"></script>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="robots" content="index,follow">
<meta name="author" content="CarvalhoCortes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="cssis/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="cssis/bootstrap.css">
<link rel="stylesheet" type="text/css" href="cssis/fontis.css">
<link rel="stylesheet" type="text/css" href="cssis/formatis.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>Carvalho Cortes - Fale comigo</title>
</head>
<body class="container div-100">
<div class="row div-100 justify-content-center">
<header class="align-self-start p-2">
<nav class="navbar navbar-expand-lg navbar-dark p-0">
<div class="container-fluid p-0 justify-content-end">
<button class="navbar-toggler p0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="col-12 navbar-nav justify-content-between">
<a class="p-2 link-primary" href="./index-en.html">Home</a>
<a class="p-2 link-primary" href="./cv-en.html">Curriculum vitæ</a>
<a class="p-2 link-primary" href="./hobbies-en.html">Hobbies</a>
<a class="p-2 link-primary" href="./voluntario-en.html">Volunteer</a>
<a class="p-2 link-primary" href="./index.html">PT-BR</a>
</div>
</div>
</div>
</nav>
</header>
<main class="row align-self-center p-3 SFProDisplayLight" style="height: 75%">
<div class="container-fluid border-1 bg-light f-pretim p-3 p-md-4 p-lg-5 rounded-3 shadow-sm" >
<div class="row">
<p class="display-4 text-center p-3">Contact</p>
</div>
<form class="row align-item-around" id="mensagis" action="vai.php" method="get">
<div class="col-12 col-md-6 p-3 verifiquis">
<label for="firstName" class="form-label">First Name*</label>
<input
type="text"
name="firstName"
id="firstName"
required
class="form-control"
placeholder="John" />
<i class="bi bi-check-circle-fill okisis nomisis" hidden></i>
<i class="bi bi-exclamation-circle-fill nokisis" hidden></i>
<p class="text-danger">Error Message</p>
</div>
<div class="col-12 col-md-6 p-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" name="lastName" id="lastName" class="form-control" placeholder="Doe" />
</div>
<div class="col-12 p-3 verifiquis">
<label for="eMail" class="form-label">E-mail*</label>
<input type="email" name="eMail" id="eMail" required class="form-control" placeholder="[email protected]" />
<i class="bi bi-check-circle-fill okisis emailzis" hidden></i>
<i class="bi bi-exclamation-circle-fill nokisis" hidden></i>
<p class="text-danger">Error Message</p>
</div>
<div class="col-12 p-3">
<label for="message" class="form-label">Message</label>
<textarea name="message" id="message" class="form-control" placeholder="Message..."></textarea>
</div>
<div class="submit-group text-center p-3">
<input type="submit" value="ENVIAR" class="btn btn-primary"/>
</div>
</form>
</div>
</main>
<!-- JAVASCRIPT -->
<script src="./jsis/app-en.js"></script>
<script>
$('#mensagis').submit(function() {
event.preventDefault();
validateForm(); //marca onde o formulário pode ter erros
const errin = isFormValid(); //verifica se teve erros no formulário
if(errin==true){
//se não teve erros
//recupera os valores das variáveis
let firstName = $('#firstName').val();
let lastName = $("#lastName").val();
let eMail = $("#eMail").val();
let message = $("#message").val();
//roda o reCaptcha
grecaptcha.ready(function() {
//gera o token
grecaptcha.execute('6Ld8U8AeAAAAAD-1OuR_aWEqjZv4DR1VVEaie5Ac', {action: 'submit'}).then(function(token) {
//cria um item invisível no formulario com o valor do token
$('#mensagis').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
//manda execultar o PHP
$.post(
//Qual PHP vai rodar
"vai.php",
//Váriaveis que serão enviadas
{
token: token,
firstName: firstName,
lastName: lastName,
eMail: eMail,
message: message
},
function(result) {
if(result.success) {
//caso o reCaptcha diga que ok
alert('Your email has been sent successfully.');
//limpa o formulario
document.getElementById("mensagis").reset();
//retira o check em frente os campos requiridos
document.querySelector('.nomisis').setAttribute('hidden','');
document.querySelector('.emailzis').setAttribute('hidden','');
} else {
//Suspeita de bot
alert('I am really sorry. Try again later.');
}
}
);
});
});
}else {
//não deixa processar o email
event.preventDefault();
}
});
</script>
<footer class="col-12 align-self-end">
<div class="container p-2">
<p class="text-sm-center about">Fonts made from <a href="http://www.onlinewebfonts.com">www.onlinewebfonts.com</a> is licensed by CC by 3.0 . This site use bootstrap 5.1. Licensed under the MIT license and is copyright 2021 Twitter </p>
</div>
</footer>
</div>
</body>
</html>