Vacation Request Form: Google Form and HTML Form Template
Vacation Request Form: Google Form Template
Managers can use this Vacation Request Form to receive requests from employees want to go for a vacation.
Description of Vacation Request Form
This form has nine section. First section in this form asks to write Name of the applicant.
Next sections expects to write your e-mail address.
Next section you to supply your phone number.
Next section expects you to write provided Supervisor Name.
Next section expected to mention of Supervisor Email Address.
Next section expects you to do you choose in any type of the following time-off requested? Options are Vacation,Sick Leave,Maternity/Paternity,Sick,Bereavement,Jury Duty,Time off without pay and Other.
Next section expects you to write your Available start date? Format accepted is mm/dd/yyyy.
Next section expects you to write your Available end date? Format accepted is mm/dd/yyyy.
The last section asks for your opinion - Time-off comments you write your opinion in this section.
Complete the Vacation Request Form and click submit.
Vacation Request Form: HTML Form Template
Display of Vacation Request HTML Form Template:
HTML Form Source Code:
<form target="_self"
id="bootstrapForm"
method="POST">
<fieldset>
<h2>Vacation Request Form<br><small></small></h2>
</fieldset>
<fieldset>
<legend for="1874755157">Name</legend>
<div class="form-group">
<input id="1729637716" type="text" name="entry.1729637716" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="184780103">Email</legend>
<div class="form-group">
<input id="1770396749" type="text" name="entry.1770396749" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="376082603">Phone Number</legend>
<div class="form-group">
<input id="589094590" type="text" name="entry.589094590" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="2142154710">Supervisor Name </legend>
<div class="form-group">
<input id="800262949" type="text" name="entry.800262949" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="1741391905">Supervisor Email Address</legend>
<div class="form-group">
<input id="408866130" type="text" name="entry.408866130" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="919003939">Type of time-off requested</legend>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Vacation" required>
Vacation
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Sick Leave" required>
Sick Leave
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Maternity/Paternity" required>
Maternity/Paternity
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Sick" required>
Sick
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Bereavement" required>
Bereavement
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Jury Duty" required>
Jury Duty
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Time off without pay" required>
Time off without pay
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.1409180901" value="Other" required>
Other
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend for="1833993761">Start Date</legend>
<div class="form-group">
<input type="date" id="1989254035_date" placeholder="8/23/2019" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="861643251">End Date</legend>
<div class="form-group">
<input type="date" id="1403025287_date" placeholder="8/23/2019" class="form-control" required>
</div>
</fieldset>
<fieldset>
<legend for="388489461">Time-off comments</legend>
<div class="form-group">
<textarea id="1357270616" name="entry.1357270616" class="form-control" required></textarea>
</div>
</fieldset>
<input type="hidden" name="fvv" value="1">
<input type="hidden" name="fbzx" value="5356028641311999799">
<input type="hidden" name="pageHistory" value="0">
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha256-2Pjr1OlpZMY6qesJM68t2v39t+lMLvxwpa8QlRjJroA=" crossorigin="anonymous"></script>
<script>
$('#bootstrapForm').submit(function (event) {
event.preventDefault()
var extraData = {}
{
/* Parsing input date id=1989254035 */
var dateField = $("#1989254035_date").val()
var timeField = $("#1989254035_time").val()
let d = new Date(dateField)
if (!isNaN(d.getTime())) {
extraData["entry.1989254035_year"] = d.getFullYear()
extraData["entry.1989254035_month"] = d.getMonth() + 1
extraData["entry.1989254035_day"] = d.getUTCDate()
}
if (timeField && timeField.split(':').length >= 2) {
let values = timeField.split(':')
extraData["entry.1989254035_hour"] = values[0]
extraData["entry.1989254035_minute"] = values[1]
}
}
{
/* Parsing input date id=1403025287 */
var dateField = $("#1403025287_date").val()
var timeField = $("#1403025287_time").val()
let d = new Date(dateField)
if (!isNaN(d.getTime())) {
extraData["entry.1403025287_year"] = d.getFullYear()
extraData["entry.1403025287_month"] = d.getMonth() + 1
extraData["entry.1403025287_day"] = d.getUTCDate()
}
if (timeField && timeField.split(':').length >= 2) {
let values = timeField.split(':')
extraData["entry.1403025287_hour"] = values[0]
extraData["entry.1403025287_minute"] = values[1]
}
}
$('#bootstrapForm').ajaxSubmit({
data: extraData,
dataType: 'jsonp', // This won't really work. It's just to use a GET instead of a POST to allow cookies from different domain.
error: function () {
// Submit of form should be successful but JSONP callback will fail because Google Forms
// does not support it, so this is handled as a failure.
alert('Form Submitted. Thanks.')
// You can also redirect the user to a custom thank-you page:
// window.location = 'http://www.mydomain.com/thankyoupage.html'
}
})
})
</script>
</body>
</html>
Previous: Scholarship Application Form: Google Form Template
Next:
Professional References Form: Google Form Template
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/form-template/vacation-request-form.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics