This repository has been archived by the owner on Jan 21, 2018. It is now read-only.
forked from IvanFon/SpacesimWebsite
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
170 lines (139 loc) · 6.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>OCE SpaceSim</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content=
"OCESS is a non-profit organization dedicated to informing and involving students from across Ontario about space and science." name=
"description">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet"><!-- Styles only for contact form -->
<link href="css/contactForm.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script><!-- Use validate.js -->
<script src="js/validate.min.js"></script><!-- Use bootbox.js -->
<script src="js/bootbox.min.js"></script><!-- Use the jQuery character counter -->
<script src="js/jquery.charactercounter.js"></script>
</head>
<body>
<div id="menu-container">
</div>
<header class="header">
</header>
<div class="container">
<div class="page-header">
<h1>Contact Us</h1>
</div>
<!-- Well to hold the form -->
<div class="well col-md-4 col-md-offset-4">
<!-- New form done in Bootstrap -->
<!-- The <label>s are styled with the .sr-only class. They are there so that screen readers can tell which form input is which. -->
<form action="php/send.php" id="contactForm" method="post" name="contactForm">
<!-- First name field -->
<label class="sr-only" for="first_name">First Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon">First Name:</span> <input class="form-control" id="first_name" name=
"first_name" type="text">
</div>
<br>
<!-- Last name field -->
<label class="sr-only" for="last_name">Last Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon">Last Name:</span> <input class="form-control" id="last_name" name=
"last_name" type="text">
</div>
<br>
<!-- Email field -->
<label class="sr-only" for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon">Email:</span> <input class="form-control" id="email" name="email"
type="text">
</div>
<br>
<!-- Organization field -->
<label class="sr-only" for="organization">Organization</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon">Organization:</span> <input class="form-control" id="organization"
name="organization" type="text">
</div>
<br>
<!-- Comments field -->
<label class="sr-only" for="comments">Comments</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon">Comments:</span>
<textarea class="form-control" id="comments" name="comments">
</textarea>
</div>
<br>
<!-- Submit button -->
<div class="input-group text-center center-block">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
<br>
<p>If you have any issues with the form, you may email us directly at <a href="mailto:ocespacesim@gmail.com">ocespacesim@gmail.com</a>.</p>
</div>
</div>
<br>
<br>
<footer class="footer">
</footer>
<!-- Validate the contact form using validate.js. This code must be at the bottom of the page to ensure the form is loaded first. -->
<script>
$(function(){
$("#comments").characterCounter({
// Limit comments box to 1000 characters
limit: 1000,
// Use a <p> to wrap counter
counterWrapper: "div",
// Use ".help-block" CSS class for counter
counterCssClass: "counterNormal",
// The format that the counter will display. 1% is replaced with the remaining character count
counterFormat: "%1 characters remaining",
// CSS class when the counter limit is exceeded
counterExceededCssClass: "counterExceeded"
});
});
// Create the validate.js object that will validate the form
var validator = new FormValidator('contactForm', [{
// Validate first name form field
name: 'first_name',
display: 'first name',
rules: 'required'
}, {
// Validate last name form field
name: 'last_name',
display: 'last name',
rules: 'required'
}, {
// Validate email form field
name: 'email',
rules: 'required|valid_email'
}, {
// Validate organization form field
name: 'organization',
rules: 'required'
}, {
// Validate comments form field
name: 'comments',
rules: 'required|max_length[1000]'
}], function (errors, event) {
// Report errors to user
if (errors.length > 0) {
// Convert errors into a string
var errorString = "";
for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
errorString += errors[i].message + '<br>';
}
// Make an alert using bootbox.js telling the user of the form validation errors
bootbox.alert(errorString, function() {
// Callback not needed here
});
}
});
</script>
</body>
</html>