-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
286 lines (193 loc) · 8.68 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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html>
<!--header-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Music Mixing and Mastering Studio">
<meta name="keywords" content="music, music production, mixing, music mixing, mastering, music matering, recording, music recording, studio, recording studio, professional">
<meta name="author" content="Braxton Salyer">
<title>
Scarlet Letters Productions | Contact
</title>
<link rel="stylesheet" href="res/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
</head>
<!--END header-->
<body>
<!--background-->
<div class="backgroundSet">
<div class="backgroundImage">
<div id="contactBackgroundImage">
</div>
</div>
<div class="backgroundFX">
<div id="contactBackgroundFX">
</div>
</div>
</div>
<!--END background-->
<!--foreground-->
<div class="foregroundSet">
<!--navigation-->
<nav>
<!--logo-->
<div id="logo">
<a href="index.html">
Scarlet Letters Productions
</a>
</div>
<!--END logo-->
<!--links-->
<ul id="navLinks">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="aboutMe.html">
About Me
</a>
</li>
<li>
<a href="portfolio.html">
Portfolio
</a>
</li>
<li>
<a class="current" href="contact.html">
Contact
</a>
</li>
</ul>
<!--END links-->
</nav>
<!--END navigation-->
<!-- Header and info -->
<div id="contactHead">
<h1>
Contact
</h1>
<p id="paragraphForeground">
To get a quote for a project, or for more information, please contact me via the form below or by sending an email to [email protected]
</p>
</div>
<!-- END header and info -->
<!-- email form -->
<div class="container formSet">
<form id="javascript_form" class ="container">
<div class="container emailSet">
<input id="email" type="text" name="email" placeholder="Email" />
</div>
<div class="container subjectSet">
<input id="subject" type="text" name="subject" placeholder="Subject" />
</div>
<div class="container messageSet">
<textarea id="message" name="text" placeholder="Message"></textarea>
</div>
<div class="container buttonSet">
<input class="button-primary" type="submit" id="js_send" value="Send" />
</div>
</form>
</div>
<!-- END email form -->
<!--footer-->
<footer id="footer">
<p>
© 2019 Braxton Salyer
</p>
</footer>
<!--END footer-->
</div>
<!--END foreground-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="res/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- email script -->
<script>
//update this with your js_form selector
var form_id_js = "javascript_form";
var data_js = {
"access_token": "w4pswkpxofrq7cb6n0ul311m"
};
//function to check for valid input and inform the user if they failed to give valid input by updating placeholder text
//also resets placeholder text to default values
function showAlert(IDs, placeHolderIDs, values) {
var valid = true;
for (var i = 0; i < IDs.length; ++i) {
if (values[i] === undefined || values[i] === "" || values[i] === placeHolderIDs[i]) { //check that the user gave input
document.getElementById(IDs[i]).placeholder = "Field is Required"; //inform the user they need to add input
valid = false; //update validity
} else {
document.getElementById(IDs[i]).placeholder = placeHolderIDs[i]; //reset placeholder text
document.getElementById(IDs[i]).value = document.getElementById(IDs[i]).defaultValue; //reset input value
}
}
return valid;
}
function js_onSuccess() {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
}
function js_onError(error) {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
}
var sendButton = document.getElementById("js_send");
function js_send() {
sendButton.value='Sending…';
sendButton.disabled=true;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
js_onSuccess();
}
else if(request.readyState == 4) {
js_onError(request.response);
}
};
//input IDs and placeholder text
var IDs = ["email", "subject", "message"];
var placeHolderIDs = ["Email", "Subject", "Message"];
//get input values
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
//add them to an array
var values = [email, subject, message];
//check whether values are valid, inform the user if not
var proceed = showAlert(IDs, placeHolderIDs, values);
//if all values are valid, continue with sending the email
if (proceed) {
subject = subject + " " + email;
data_js['subject'] = subject;
data_js['text'] = message;
var params = toParams(data_js);
request.open("POST", "https://postmail.invotes.com/send", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(params);
} else {
//else reset the send button
sendButton.value ='Send';
sendButton.disabled=false;
}
return false;
}
sendButton.onclick = js_send;
function toParams(data_js) {
var form_data = [];
for ( var key in data_js ) {
form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key]));
}
return form_data.join("&");
}
var js_form = document.getElementById(form_id_js);
js_form.addEventListener("submit", function (e) {
e.preventDefault();
});
</script>
<!-- END email script -->
</body>
</html>