Chris Cochrun
a1aa4ca9bf
These requirements are to ensure emails from parents are added to the camp-form
250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
|
|
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
|
|
|
|
<script>
|
|
function submitForm(e) {
|
|
e.preventDefault();
|
|
const form = document.getElementById('form');
|
|
const data = new FormData(form);
|
|
|
|
console.log(data.get("birthdate"));
|
|
const birthdate = new Date(data.get("birthdate"));
|
|
const age = calculate_age(birthdate);
|
|
data.append("age", age);
|
|
|
|
if (data.get("parentemail") == "") {
|
|
document.getElementById('warning-email').style.visibility = 'visible';
|
|
document.getElementById('warning-email').style.height = '';
|
|
document.getElementById('warning-email').style.margin = '';
|
|
return false;
|
|
} else {
|
|
document.getElementById('warning-email').style.visibility = 'hidden';
|
|
document.getElementById('warning-email').style.height = '0';
|
|
document.getElementById('warning-email').style.margin = '0';
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
let payment = data.get('registration');
|
|
console.log(payment);
|
|
let health = data.get('health');
|
|
console.log(health);
|
|
if (health === 'later') {
|
|
if (payment === 'now')
|
|
window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JPJ';
|
|
else if (payment === 'full')
|
|
window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JQE';
|
|
else
|
|
window.location.href = '/thankyou/';
|
|
}
|
|
else {
|
|
if (payment === 'later')
|
|
window.location.href = '/thankyou/';
|
|
else
|
|
window.location.href = '/camp-health-form?registration=' + payment;
|
|
}
|
|
|
|
}
|
|
};
|
|
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application"); */
|
|
xhr.open("POST", "https://n8n.tfcconnection.org/webhook/camp-form");
|
|
xhr.send(data);
|
|
console.log(data);
|
|
console.log("Hallo!");
|
|
/* return false; */
|
|
}
|
|
|
|
function calculate_age(dob) {
|
|
var diff_ms = Date.now() - dob.getTime();
|
|
var age_dt = new Date(diff_ms);
|
|
|
|
return Math.abs(age_dt.getUTCFullYear() - 1970);
|
|
}
|
|
|
|
function process() {
|
|
/* document.getElementById('mt-form').hidden = false */
|
|
document.getElementById('warning-email').style.visibility = 'hidden';
|
|
document.getElementById('warning-email').style.height = '0';
|
|
document.getElementById('warning-email').style.margin = '0';
|
|
}
|
|
document.addEventListener('DOMContentLoaded', process);
|
|
</script>
|
|
|
|
<div id="mt-form" class="form text-lg w-full">
|
|
<form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
|
|
<h3 class="basis-full">Camp Form</h3>
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<label for="firstname" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<br/>
|
|
<input type="text" id="firstname" name="firstname"
|
|
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
|
|
<input type="text" id="lastname" name="lastname"
|
|
placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<label for="parentfirstname" class="basis-full">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<input type="text" id="parentfirstname" name="parentfirstname"
|
|
class="flex-1 form-input {{ $formClasses }}"
|
|
placeholder="First Name">
|
|
<input type="text" id="parentlastname" name="parentlastname"
|
|
class="flex-1 form-input {{ $formClasses }}"
|
|
placeholder="Last Name">
|
|
</div>
|
|
|
|
<label for="birthdate" class="basis-full">When were you born? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<input type="date" id="birthdate" name="birthdate"
|
|
class="basis-full form-date {{ $formClasses }}">
|
|
<label for="gender" class="basis-full">Gender <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<select id="gender" name="gender" class="basis-full form-select {{ $formClasses }}">
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<label for="street" class="basis-full">What is your address? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<input type="text" id="street" name="street"
|
|
class="basis-full form-input {{ $formClasses }}"
|
|
placeholder="Street Address" required>
|
|
<input type="text" id="city" name="city"
|
|
class="flex-auto form-input {{ $formClasses }}"
|
|
placeholder="City" required>
|
|
<input type="text" id="state" name="state"
|
|
class="flex-auto form-input {{ $formClasses }}"
|
|
placeholder="State" required>
|
|
<input type="text" id="zip" name="zip"
|
|
class="flex-auto form-input {{ $formClasses }}"
|
|
placeholder="Zip Code" required>
|
|
</div>
|
|
|
|
<div class="basis-full my-4">
|
|
<label for="grade" class="">Grade this Fall <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="6"
|
|
class="form-input {{ $formClasses }}" checked>
|
|
<label for="grade" class="">6th</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="7"
|
|
class="form-input {{ $formClasses }}" checked>
|
|
<label for="grade" class="">7th</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="8"
|
|
class="form-input {{ $formClasses }}" checked>
|
|
<label for="grade" class="">8th</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="freshman"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="grade" class="">Freshman</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="sophomore"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="grade" class="">Sophomore</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="junior"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="grade" class="">Junior</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="senior"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="grade" class="">Senior</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="college-freshman"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="grade" class="">College Freshman</label>
|
|
</div>
|
|
|
|
<label for="parentphone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<input type="tel" id="parentphone" name="parentphone"
|
|
class="basis-full form-input {{ $formClasses }}">
|
|
|
|
<label for="parentemail" class="basis-full">Guardian's Email <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<input type="parentemail" id="parentemail" name="parentemail"
|
|
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
|
|
class="basis-full form-input {{ $formClasses }}" required>
|
|
|
|
<label for="allergies" class="basis-full">Do you have any food allergies?</label>
|
|
<input type="text" id="allergies" name="allergies"
|
|
class="basis-full form-input {{ $formClasses }}">
|
|
|
|
<label for="week" class="basis-full">My Camp Plan <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
|
<select id="week" name="week" class="flex-auto form-select {{ $formClasses }}">
|
|
<option value="week1">Week 1: July 17-21</option>
|
|
<option value="week2">Week 2: July 24-28</option>
|
|
</select>
|
|
|
|
<label for="shirt" class="basis-full">T-Shirt Size <span class='inline-block text-[#f39] text-sm'>all t-shirts are in adult sizes only</span></label>
|
|
<select id="shirt" name="shirt" class="mb-8 flex-auto form-select {{ $formClasses }}">
|
|
<option value="small">Small</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="large">Large</option>
|
|
<option value="xl">XL</option>
|
|
<option value="xxl">2XL</option>
|
|
<option value="xxxl">3XL</option>
|
|
</select>
|
|
|
|
<div class="basis-full my-2">
|
|
<label for="final-agreement">
|
|
I understand that in order to go to camp I need to have this form, a health form, and the total cost paid.
|
|
</label>
|
|
<div class="my-4">
|
|
<input type="radio" value="yes" id="final-agreement" name="final-agreement"
|
|
class="form-input {{ $formClasses }}" required>
|
|
<label for="final-agreement" class="mt-4">
|
|
I understand <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<label for="health" class="basis-full my-2">
|
|
Would you like to fill out the health form now or later? Your health form is not required right now, but you cannot go to camp without one.
|
|
</label>
|
|
<div class="basis-full mt-4">
|
|
<input type="radio" value="now" id="health" name="health"
|
|
class="form-input {{ $formClasses }}" checked>
|
|
<label for="health" class="">
|
|
Now
|
|
</label>
|
|
</div>
|
|
<div class="basis-full mb-4">
|
|
<input type="radio" value="later" id="health" name="health"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="health" class="">
|
|
Later
|
|
</label>
|
|
</div>
|
|
<label for="registration" class="basis-full my-2">
|
|
Would you like to pay the registration fee or the full cost now or later?
|
|
</label>
|
|
<div class="basis-full mt-4">
|
|
<input type="radio" value="now" id="registration" name="registration"
|
|
class="form-input {{ $formClasses }}" checked>
|
|
<label for="registration" class="">
|
|
Now - $65
|
|
</label>
|
|
</div>
|
|
<div class="basis-full">
|
|
<input type="radio" value="full" id="registration" name="registration"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="registration" class="">
|
|
Full Cost - $165
|
|
</label>
|
|
</div>
|
|
<div class="basis-full mb-4">
|
|
<input type="radio" value="later" id="registration" name="registration"
|
|
class="form-input {{ $formClasses }}">
|
|
<label for="registration" class="">
|
|
Later - Send $65 or $165 to the TFC Office
|
|
</label>
|
|
</div>
|
|
<div class="basis-full mt-8">
|
|
<button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
|
|
</div>
|
|
|
|
<div id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
|
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
|
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
|
Make sure you have included an email for your guardian so we can contact them.
|
|
</span>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|