<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form id="guardval" method="post" action="https://static.test.idealss.net/waiver-test/display.html">
<div class="adultboxes" id="form2" class="answer_list">
<div class="boxes">
<h3>STEP 1<br><br>PARENT OR GUARDIAN PERSONAL INFORMATION</h3>
<div>
<h4>Guardian Name:</h4>
<div class="form-group col-lg-6">
<input id="txtGuardFirst" type="text" name="First Name" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<div class="form-group col-lg-6">
<input id="txtGuardLast" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<h4>Birthdate</h4>
<!-- <div class="date-dropdowns form-group">
<input class="form-control date-picker" id="txtGuardAge" name="txtGuardAge" data-toggle="datepicker" required>
</div>-->
<div class="form-group date-dropdowns col-lg-4">
<select name="month" id="txtGuardMonth" data-validation="required" required>
<option value=""> - Month - </option>
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtGuardDay" data-validation="required" required>
<option value=""> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="yearpicker"id="txtGuardYear" data-validation="required" required>
<option value=""> - Year - </option>
</select>
<script>
for (i = new Date().getFullYear(); i > 1900; i--)
{
$('#txtGuardYear').append($('<option />').val(i).html(i));
}
</script>
</div>
<div style="padding:10px;">
<input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('minorinformation');"/>
</div>
</div>
</div>
</div>
<!-- ---------------------------------------Minor Information------------------------------------ -->
<div id="minorinformation" style="display:none;">
<div class="boxes">
<h3>STEP 2<br><br>FILL OUT MINOR INFORMATION</h3>
<div>
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<h4 class="control-label" for="field1">Minor Information:</h4>
<div id="minor_fields"></div>
<div class="controls" id="profs">
<div id="minorInfo">
<div class="form-group col-lg-5">
<input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" required>
</div>
<div class="form-group col-lg-2">
<input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1">
</div>
<div class="form-group col-lg-5">
<input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<!-- <div class="form-group">
<input class="form-control date-picker txtMinorDate1" id="txtMinorDate1" name="minorDate1" data-toggle="datepicker" required>
</div><br> -->
<div class="" id="">
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtMinorMonth1" data-validation="required" required>
<option value=""> - Month - </option>
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtMinorDay1" data-validation="required" required>
<option value=""> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="yearpicker"id="txtMinorYear1" data-validation="required" required>
<option value=""> - Year - </option>
</select>
<script>
for (i = new Date().getFullYear(); i > 1900; i--)
{
$('#txtMinorYear1').append($('<option />').val(i).html(i));
}
</script>
</div>
</div>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
</div>
</div>
</div>
</div>
<div style="padding:10px;">
<input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('contactminor');"/>
</div>
</div>
</div>
<!-- -----------------------------------------End Minor Information------------------------------ -->
<div id="contactminor" style="display:none;">
<div class="boxes">
<h3>STEP 3<br><br>PARENT OR GUARDIAN CONTACT INFORMATION</h3>
<p>Adult Contact Information</p>
<h4>Address:</h4>
<div class="form-group">
<input id="txtGuardAddress" type="text" name="Address" placeholder="Address" class="form-control" data-validation="required" required>
</div>
<h4>City:</h4>
<div class="form-group col-lg-4">
<input id="txtGuardCity" type="text" name="City" placeholder="City" class="form-control" data-validation="required" required>
</div>
<div class="form-group col-lg-4">
<input id="txtGuardState" type="text" name="State/Province" placeholder="Province" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<div class="form-group col-lg-4">
<input id="txtGuardZip" type="text" name="Postal Code" placeholder="Postal Code" class="form-control" data-minlength="6" data-validation="required" required>
</div>
<h4>Contact:</h4>
<div class="form-group col-lg-6">
<input id="txtGuardPhone" type="text" name="Phone Number" placeholder="Phone Number" class="form-control" pattern="[0-9]{1,}" data-validation="required" required>
</div>
<div class="form-group col-lg-6">
<input id="txtGuardEmail" type="email" name="Email" placeholder="Email" class="form-control" data-validation="email">
</div>
<div style="padding:10px;"><input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('terms');"
/></div>
</div>
<!-- -----------------------------------End Adult + Minor Form----------------------------------- -->
<div id="terms" style="display:none;">
<div class="boxes">
<h3>STEP 4<br><br>TERMS AND CONDITIONS AGREEMENT</h3>
<div>
<p>
<strong>Flying Squirrel Customer Waiver, Release of Liability, Indemnity and Assumption of Risk Agreement</strong><br>
<br>
<div style="height:200px;width:100%;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto; background:white; padding:10px; max-width:900px;">In consideration of being permitted by HAMILTON TRAMPOLINE, ULC, doing business
as “FLYING SQUIRREL”, to participate in its activities and to
use its equipment and facilities, now and in the future, I hereby agree to
<strong>release, indemnify and forever discharge</strong> FLYING SQUIRREL,
its agents, owners, members, shareholders, officers, directors, managers,
partners, employees, volunteers, manufacturers, participants, lessors, affiliates,
its subsidiaries, related and affiliated entities, successors and assigns
(the “RELEASED PARTIES”), on behalf of myself, my spouse, my
child(ren), my parent(s), my heir(s), assign(s), personal representative(s)
and estate as follows: I acknowledge that my participation in the activities
provided at FLYING SQUIRREL’S trampoline and entertainment facility
entails known and unknown risks that could result in physical or emotional
injury, paralysis, death, or damage to myself, to property or to third parties.
I understand that such risks simply cannot be eliminated without jeopardizing
the essential qualities of the activity. <strong>The risks include, among other things and without limitation:</strong> exposure of participants to the risk of cuts and bruises, sprained or broken
wrists and ankles, concussions, dislocations, head/neck injuries, and in
some cases more serious injuries, including paralysis or death. Traveling
to and from trampoline locations raises the possibility of any manner of
transportation accidents. Double bouncing (more than one person per trampoline)
can create a rebound effect causing serious injury. Flipping and running
and bouncing off the walls is dangerous and can cause serious injury, and
must be done at the participants own risk. Similar risks are also inherent
in using the Foam Pits, Dunking Hoops, Slack Line, Ninja Course, Rope Swing
and any other attractions and/or devices present at the facility. In any
event, if you or your child is injured, you or your child may require medical
assistance, at your own, sole expense. Furthermore, FLYING SQUIRREL employees
have difficult jobs to perform. They strive for the highest standards of
safety, but they are not infallible. They might be unaware of a participant’s
fitness or abilities. They may give incomplete warnings or instructions,
and the equipment being used might become loose, out of adjustment, or malfunction.
There is also a risk that FLYING SQUIRREL employees may be negligent in,
among other things, monitoring and supervising use of its equipment and facilities
and in the maintenance and repair of its equipment and facilities. I expressly
agree and promise to voluntarily accept and assume all of the risks existing
in the activities present at FLYING SQUIRREL. My participation in these activities
is purely voluntary, and I elect to participate in spite of all known, and
unknown risks. <strong>I hereby voluntarily release, forever discharge, and agree to defend, indemnify and hold harmless RELEASED PARTIES from any and all claims, demands, or causes of action, which are in any way connected with my participation in this activity or my use of FLYING SQUIRREL’S equipment or facilities, including any such claims which allege negligent acts or omissions of RELEASED PARTIES.</strong> Should FLYING SQUIRREL or anyone acting on their behalf, be required to incur
attorney’s fees and costs to enforce this agreement, I agree to indemnify
and hold them harmless for all such fees and costs. This means that I will
pay all of those attorney’s fees and costs myself. I certify that I
have adequate insurance to cover any injury or damage that I may cause or
suffer while participating in the activities present at FLYING SQUIRREL,
or else I agree to bear the costs of such injury or damage myself. I further
certify that I am willing to assume the risk of any medical or physical condition
that I may have, pre- existing or otherwise. In the event that I file a lawsuit
against FLYING SQUIRREL for any reason, I agree to do so solely in the Province
of Alberta and I further agree that the substantive law of Alberta shall
apply in that action without regard to the conflict of the law rules of that
Province. I agree that if any portion of this agreement is found to be void
or unenforceable, the remaining portions shall remain in full force and effect.
I agree as an adult participant, or the Parent/Legal Guardian of a minor
participant, in consideration of being permitted to participate at FLYING
SQUIRREL, grant FLYING SQUIRREL, and all RELEASED PARTIES, the irrevocable
right and permission to photograph and/or record me or my child(ren)/ward(s)
in connection with FLYING SQUIRREL to use the photograph and/or recording
for all purposes, including advertising and promotional purposes, in any
manner in any and all media now or hereafter known, in perpetuity throughout
the world, without restriction as to alteration. I waive any right to inspect
or approve the use of the photograph and/or recording, and acknowledge and
agree that the rights granted to this release are without compensation of
any kind. All photographs and/or recordings are the exclusive property of
FLYING SQUIRREL. <strong> If the participant is a minor, I agree that this Waiver, Release of Liability, Indemnity and Assumption of Risk Agreement (this “RELEASE”) is made on behalf of that minor participant and that all of the releases, waivers and promises herein are binding on that minor participant. I represent that I have full authority as Parent or Legal Guardian of the minor participant to bind the minor participant to this Release. </strong> <strong> If the participant is a minor, I further agree to defend, indemnify and hold harmless FLYING SQUIRREL from any and all claims or suits for personal injury, property damage or otherwise </strong> which are brought by, or on behalf of the minor, and which are in any way
connected with such use or participation by the minor, including injuries
or damages caused by the negligence of RELEASED PARTIES, except injuries
or damages caused by the gross negligence or willful misconduct of the party
seeking indemnity. I confirm that I have not consumed any alcohol, drugs,
or participated in any other activity which might impair my ability to safely
participate in the activity prior to or during the course of my partaking
in any of the activities located at FLYING SQUIRREL’S facility. I confirm
that I have had sufficient time to read and understand this Release in its
entirety. I understand that this Release represents the entire agreement
between myself and FLYING SQUIRREL (and the RELEASED PARTIES), and is binding
on myself and anyone claiming through or under me. I on my own behalf am
executing this Release freely and voluntarily without any compulsion on the
part of FLYING SQUIRREL or any of the RELEASED PARTIES. In consideration
of not being required to sign a new copy of this RELEASE before each visit,
I further agree that <strong> this RELEASE shall apply to all future visits by me and by the minor participant until he/she is 18 years old in full, including all provisions of this Agreement. </strong> By signing this document, I acknowledge that if anyone is hurt or property
damaged during my participation in any of the FLYING SQUIRREL activities,
I may be found by a court of law to have waived my or the minor participant’s
right to maintain a lawsuit against FLYING SQUIRREL or any RELEASED PARTIES
on the basis of any claim from which I have released them herein. I have
had sufficient opportunity to read this entire document. <strong> I have read and understood it, and I agree to be bound by its terms.</strong></div>
</p>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="txtGuardAgree" class="" data-validation="required" data-validation-error-msg="You must agree to our terms" required>I have read and agree to the terms above.
</label>
</div>
</div>
<p>Please sign below to verify the above is correct to the best of your knowledge</p>
<div id="txtGuardSignature" class="sig"></div>
<div style="padding:10px;"><button type="button" id="clearButtonminor" onclick="$('#txtGuardSignature').jSignature('clear')">Clear Signature</button></div>
<div style="padding:10px;"><input class="btnSubmit" type="submit" id="btnMinor" name="submit" value="Submit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
@charset "utf-8";
/* CSS Document */
body{
background:none repeat scroll 0 0 #000000;
margin: 25px;
padding: 0px;
color: white;
background-color:#000;
}
h1{
color:#fff;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Responsive {
width: 90%;
height: 100%;
min-width: 200px;
max-width: 900px;
padding: 0px;
}
.InfoWrapper {
background: #ffffff;
border:5px solid #FF29EA;
border-radius: 20px;
font-weight: bold;
font-size: 135%;
color: #000000;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 10px;
}
[id^=txtMinorDate] {
border-radius: 5px;
text-align: center;
margin: 10px;
height: 40px;
font-size: 14pt;
width:100%;
max-width:200px;
}
.add-more {
margin-top: 10px;
color:#fff;
}
.remove-me {
margin-left:5px;
}
.date-picker {
width:100%;
max-width:200px;
text-align:center;
font-size:1.4em;
}
#signatureadult > canvas, #signature > canvas {
background-color:#fff;
}
#startWiaver {
font-size: 34px !important;
padding: 10px !important;
width: 100% !important;
max-width: 400px;
}
/* #nameval > div:nth-child(6) > button, #nameval > div:nth-child(7) > button, #nameval > div:nth-child(8) > button {
background:#E10F78;
color:#fff;
}*/
input[type="button"], input[type="submit"], button, #clearButtonadult, #clearButtonminor, .btn{
margin-bottom: 15px !important;
background: #E10F78;
color: #fff;
font-family: Sans-serif;
font-size: 1.4em;
/*height: 60px;*/
/*width: 100%;*/
/*max-width: 180px;*/
/*line-height: 60px;*/
margin: 0px 10px;
text-align: center;
border: 0;
transition: all 0.3s ease 0s;
border-radius: 5px;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover, .btn:hover {
/*background: #ff655a;*/ /*Change button color animation*/
/*box-shadow: inset 0 0 0 3px #1f53a5;*/ /*Inset Border Animation*/
-webkit-transform: scale(1.3); /*Grow Animation*/
-ms-transform: scale(1.3);
transform: scale(1.3);
/*-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8); /*Shrink Animation*/
}
#nextWaiver {
font-size: 34px !important;
padding: 10px !important;
width: 100% !important;
}
.boxes {
background: gainsboro;
border: 5px;
border-style: solid;
border-radius: 20px;
}
/*<!-----------------------------------------textboxes-------------------------------------->*/
input[type="text"], input[type="email"], input[type="date"], select {
border-radius:5px;
text-align:center;
height:40px;
font-size:14pt;
width:95%
}
input[type="checkbox"] {
width:30px;
height:17px;
position:inherit !important;
}
/*-------------------------------------------Input Fields------------------------------------*/
#minorinformation > div.boxes > div > div.select > select {
width:65px;
}
#form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(2), #form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(3), #form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(4), #holder > div > form:nth-child(2) > input[type="text"]:nth-child(3) {
width:50px;
}
/* #contactadult > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(3), #contactminor > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(4) {
width:95px;
}*/
#contactadult > div.boxes > form:nth-child(5) > input[type="text"]:nth-child(2) {
width:105px;
}
/*#contactadult > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(2), #contactminor > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(3) {
width:75px;
}*/
#termsadult > div > div > div:nth-child(9) > form > input[type="text"], #terms > div > div > div:nth-child(9) > form > input[type="text"] {
width:95px;
}
#conval > input[type="text"]:nth-child(2), #contactminor > div.boxes > input[type="text"], #contactminor > div.boxes > form:nth-child(3) > input[type="text"], {
width: 100% !important;
max-width: 630px !important;
}
#conval > input[type="text"]:nth-child(2) {
width:100%;
max-width:715px;
}
#txtEmailAddress, #txtminoremail {
max-width:395px;
width:90%;
}
#txtaddress, #txtminoraddress {
width:90%;
}
/*--------------------------------------------JQ Validate Error--------------------------------------*/
select.error, textarea.error, input.error {
border: 2px #ff0000;
border-style: solid;
}
#txtFirstName-error, #txtLastName-error, #dob_year-error, #Address-error, #City-error, #State\2f Province-error, #txtPostalCode-error, #txtPhoneNumber-error, #txtEmailAddress-error {
background-color: #ef6666;
color: #fff;
border-radius: 5px;
z-index: -1;
box-shadow: 5px 5px 5px #888888;
}
/*-----------------------------------------Bootstrap Validation--------------------------------------------*/
.form-group {
&.has-error {
padding: 10px;
background:
/* On "top" */
repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
pink 10px,
pink 20px
),
/* on "bottom" */
linear-gradient(
to bottom,
lightpink,
lightpink
);
}
}
<!-- ----------------------------Adult Form Buttons---------------------------------------- -->
function showonlyone(thechosenone) {
$('.adultboxes').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
<!-- ----------------------------Minor Form Buttons---------------------------------------- -->
function toggleDiv(divID) {
$("#" + divID).toggle(200);
}
<!-- ----------------------------add more minors---------------------------------------- -->
var child = 1;
function minor_fields() {
child++;
var objTo = document.getElementById('minor_fields')
var divminors = document.createElement("div");
divminors.setAttribute("class", "form-group removeclass"+child);
var rdiv = 'removeclass'+child;
divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
child + '" type="text" name="minorFirst' + child +
'" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
child + '" type="text" name="minorMiddle' + child +
'" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
child + '" type="text" name="minorLast' + child +
'" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
'" data-validation="required" required><option value=""> - Year - </option></select><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields('+ child +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';
objTo.appendChild(divminors)
}
function remove_minor_fields(rid) {
$('.removeclass'+rid).remove();
}
