This repository has been archived by the owner on Dec 13, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapplication-form.html
185 lines (147 loc) · 10.4 KB
/
application-form.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
---
---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="application-form.js" async></script>
<script src="console-message.js" async></script>
<title>Application form | Techsmiths</title>
{% include analytics.html %}
</head>
<body>
{% include header.html %}
<div class="section black-background white-text">
<h2>Application Form</h2>
<p class="medium-width-text white-text margin-between">
Applying for cohort starting February 2020
</p>
<p class="medium-width-text white-text margin-between">
All information given here will be treated as confidential.
</p>
<form action="https://online.softwire.com/apply/submit" method="POST" class="medium-width-block-narrow-margins application-form" id="application_form" onsubmit="submitApplicationForm(event);">
<input type="hidden" name="vacancy" value="57">
<input type="hidden" name="inf_appliedBefore" value="No">
<input type="hidden" name="per_preferredStart" value="February Cohort">
<hr>
<h3>Personal Details</h3>
<div class="two-cols">
<input type="text" name="per_forename" id="per_forename" placeholder="First Name *" class="application-form-field">
<input type="text" name="per_surname" id="per_surname" placeholder="Surname *" class="application-form-field">
<input type="text" name="preferred_name" id="preferred_name" placeholder="How should we address you? (optional)" class="application-form-field">
<input type="text" name="preferred_pronoun" id="preferred_pronoun" placeholder="Preferred pronoun (optional)" class="application-form-field">
<input type="email" name="per_primaryEmail" id="per_primaryEmail" placeholder="Email address *" class="application-form-field">
<input type="tel" name="per_primaryTelephone" id="per_primaryTelephone" placeholder="Phone number *" class="application-form-field">
<div class="half-width-label">Do you require a work permit? *</div>
<div class="half-width-options">
<label class="radio-button-label">
<input type="radio" name="add_workPermit" value="Yes">
Yes
</label>
<label class="radio-button-label">
<input type="radio" name="add_workPermit" value="No" checked>
No
</label>
</div>
<div class="half-width-label">How did you hear about us? (optional)</div>
<select class="application-form-field" id="inf_howheard" name="inf_howheard">
<option value="" disabled selected>Please select...</option>
<option value="From a friend">From a friend</option>
<option value="LinkedIn">LinkedIn</option>
<option value="CW Jobs">CW Jobs</option>
<option value="TARGETjobs">TARGETjobs</option>
<option value="Reed">Reed</option>
<option value="Jobbio">Jobbio</option>
<option value="Online search">Online search (e.g. Google)</option>
<option value="Techmeetups London Tech Job Fair 2019">Techmeetups London Tech Job Fair 2019</option>
<option value="Silicon Milkroundabout 2019">Silicon Milkroundabout 2019</option>
<option value="Other Networking Event">Other Networking Event</option>
<option class="other_option" value="Other">Other (please specify)</option>
</select>
<div class="show-for-other"></div>
<input type="text" name="inf_howhearddescription" id="inf_howhearddescription" data-js-placeholder="Please specify here..." placeholder="If other, please specify here..." class="application-form-field show-for-other">
</div>
<hr>
<h3>CV and Covering Letter</h3>
<textarea id="per_coveringLetter" name="per_coveringLetter" rows="5" class="application-form-field"
placeholder="Covering letter * - please include links to any online portfolio work which might be relevant (e.g. github)"></textarea>
<div class="cv-upload">
CV *
<label for="cv_fileUpload" id="cv_fileUpload_label" class="button button-yellow-on-black-on-black">Choose file +</label>
<input type="file" id="cv_fileUpload" name="cv_fileUpload" onchange="cvFileUploadChanged();">
<span id="cv_filename">No file chosen</span>
</div>
<textarea id="inf_additional" name="inf_additional" rows="5" class="application-form-field"
placeholder="Any other information?"></textarea>
<hr>
<h3>Diversity Information</h3>
<p>We are committed to promoting diversity and equality at Softwire, and to help us with this we would be grateful if you could complete the following questions. Your answers allow us to track applicant diversity and to ensure equality in our interview tests. Your answers will not appear on your application and will not influence our decisions in any way.</p>
<p>Please complete this part of the form only if you consent to the use of this information for internal statistical purposes. This information will be kept for five years and will then be used to create anonymised recruitment statistics from which you cannot be identified.</p>
<div class="two-cols">
<div class="half-width-label">What gender do you identify as?</div>
<div class="half-width-options">
<select class="application-form-field" id="per_sex" name="per_sex">
<option value="" disabled selected>Please select...</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Other">Other</option>
<option value="Prefer not to say">Prefer not to say</option>
</select>
</div>
<div class="half-width-label">What is your nationality?</div>
<div class="half-width-options">
<select class="application-form-field" id="add_nationality" name="add_nationality">
<option value="" disabled selected>Please select...</option>
<option value="British">British</option>
<option value="Non British">Non British</option>
<option value="Prefer not to say">Prefer not to say</option>
</select>
</div>
<div class="half-width-label">What is your ethnicity?</div>
<div class="half-width-options">
<select class="application-form-field" id="per_ethnicity" name="per_ethnicity">
<option value="" disabled selected>Please select...</option>
<option value="White">White</option>
<option value="Mixed / multiple ethnic groups">Mixed / multiple ethnic groups</option>
<option value="Asian / Asian British">Asian / Asian British</option>
<option value="Black / African / Caribbean / Black British">Black / African / Caribbean / Black British</option>
<option value="Other">Other ethnic group</option>
<option value="Prefer not to say">Prefer not to say</option>
</select>
</div>
</div>
<hr>
<h3>Declaration</h3>
<div class="declaration-box">
<p>
<b>I confirm that no information has been omitted which is relevant in evaluating me as a potential employee for Techsmiths and that all information supplied is accurate.</b>
<br />
Techsmiths consider information regarding serious misdemeanours to be relevant.
</p>
<p>This information will be processed as per the terms of our Privacy Policy.</p>
<div class="button-row">
<button class="button button-black-on-yellow-on-black" id="submit-button">
<!-- Q: Why is this a button, not an input[type=button]?
A: So the ::after (spinner, tick, cross) can work
Apparently you can't use an ::after on input[type=button] (shrug) -->
Submit
</button>
</div>
<div class="error-message" id="application_form_validation_error">
It looks like you didn't fill in all the required fields.
<br />
We've highlighted the missing fields in red.
</div>
<div class="error-message" id="application_form_sent">Thank you for applying to Techsmiths!</div>
<div class="error-message" id="application_form_failed_to_send">
There seems to be a problem with our application form at the moment.
<br />
Please try emailing us at <a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</form>
</div>
{% include footer.html %}
</body>
</html>