404 lines
22 KiB
HTML
404 lines
22 KiB
HTML
{% set formClasses = "bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" -%}
|
|
{% set requiredField = "inline-block text-[#f39] text-xs align-super" -%}
|
|
|
|
<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);
|
|
|
|
let base = "/api/mt-form";
|
|
/* let base = "http://localhost:4242/mt-form"; */
|
|
|
|
fetch(base, {
|
|
method: "POST",
|
|
body: data
|
|
}).then((res) => {
|
|
console.log(res);
|
|
if (res.ok) {
|
|
var payment = document.getElementById('registration').value;
|
|
window.location.href = '/mt-health-form?mtregistration=' + payment +
|
|
"&firstName=" + data.get('firstname') +
|
|
"&lastName=" + data.get('lastname') +
|
|
"&parentFirstName=" + data.get('parentfirstname') +
|
|
"&parentLastName=" + data.get('parentlastname') +
|
|
"&birthdate=" + data.get('birthdate') +
|
|
"&street=" + data.get('street') +
|
|
"&city=" + data.get('city') +
|
|
"&state=" + data.get('state') +
|
|
"&zip=" + data.get('zip') +
|
|
"&parentPhone=" + data.get('parentphone');
|
|
console.log(res);
|
|
}
|
|
});
|
|
}
|
|
|
|
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() {
|
|
var studentAgree = document.getElementById("student-agree").checked;
|
|
console.log(studentAgree);
|
|
var parentAgree = document.getElementById("adult-agree").checked;
|
|
console.log(parentAgree);
|
|
if (studentAgree && parentAgree) {
|
|
document.getElementById('mt-form').hidden = false
|
|
document.getElementById('form').hidden = false
|
|
console.log("WOOHOO");
|
|
}
|
|
else {
|
|
/* document.getElementById('form').hidden = true
|
|
* document.getElementById('mt-form').hidden = true */
|
|
console.log("NEGATORY");
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', process);
|
|
</script>
|
|
|
|
<div class="m-4 grid grid-cols-2 gap-2">
|
|
<div class="flex rounded-md p-4 bg-gray-700">
|
|
<input type="checkbox" name="student-agree" id="student-agree"
|
|
onclick="process()" class="basis-1/3 cursor-pointer peer form-checkbox size-6 self-center" />
|
|
<label for="student-agree" class="ml-4 block cursor-pointe self-center">I agree to the above</label>
|
|
</div>
|
|
<div class="flex rounded-md p-4 bg-gray-700">
|
|
<input type="checkbox" name="adult-agree" id="adult-agree"
|
|
onclick="process()" class="basis-1/3 cursor-pointer peer form-checkbox size-6 self-center" />
|
|
<label for="adult-agree" class="ml-4 block cursor-pointer self-center">My parent agrees to the above</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mt-form" class="form text-lg w-full">
|
|
<form id='form'
|
|
hx-post="/api/mt-form"
|
|
hx-encoding="multipart/form-data"
|
|
autocomplete="on"
|
|
method="post"
|
|
target="_parent"
|
|
class="w-full items-center flex flex-wrap">
|
|
<h3 class="basis-full">Mission Trip Application</h3>
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<label for="firstname" class="basis-full mx-2">What is your first and last name?
|
|
<span class='{{ requiredField }}'>* required</span></label>
|
|
<br/>
|
|
<input type="text" id="firstname" name="firstname" required
|
|
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 mx-2">What is your parent's first and last name?
|
|
<span class='{{ requiredField }}'>* 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 mx-2">When were you born?</label>
|
|
<input type="date" id="birthdate" name="birthdate"
|
|
class="form-date {{ formClasses }}">
|
|
<label for="gender" class="basis-full mt-4 mx-2">Gender</label>
|
|
<div class="mx-2 grid w-full grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
|
|
<div>
|
|
<input type="radio" name="gender" id="gender-male" value="male" class="peer hidden" checked />
|
|
<label for="gender-male" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Male</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="radio" name="gender" id="gender-female" value="female" class="peer hidden" />
|
|
<label for="gender-female" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Female</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<label for="street" class="basis-full mx-2">What is your address? <span class='{{ requiredField }}'>* 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="basis-full 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>
|
|
|
|
<label for="cellphone" class="basis-full mr-4 ml-2">Cell phone</label>
|
|
<input type="tel" id="cellphone" name="cellphone"
|
|
class="flex-auto form-input {{ formClasses }}">
|
|
<label for="parentphone" class="basis-full mr-4 ml-2">Parent phone</label>
|
|
<input type="tel" id="parentphone" name="parentphone"
|
|
class="flex-auto form-input {{ formClasses }}">
|
|
<label for="email" class="basis-full mr-4 ml-2">Email</label>
|
|
<input type="email" id="email" name="email"
|
|
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
|
|
class="flex-auto form-input {{ formClasses }}">
|
|
<label for="parentemail" class="basis-full mr-4 ml-2">Parent's email?</label>
|
|
<input type="email" id="parentemail" name="parentemail"
|
|
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
|
|
class="flex-auto form-input {{ formClasses }}">
|
|
|
|
<label for="school" class="basis-full mx-2">What school do you go to?</label>
|
|
<input type="text" id="school" name="school" class="basis-full form-input {{ formClasses }}">
|
|
|
|
<label for="grade" class="basis-full mx-2 mt-2">Grade</label>
|
|
<div class="mx-2 mb-2 grid w-full lg:grid-cols-5 md:grid-cols-5 gap-2 rounded-xl bg-gray-500 p-2">
|
|
<div>
|
|
<input type="radio" name="grade" id="grade-8" value="8" class="peer hidden" checked />
|
|
<label for="grade-8" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">8th</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="radio" name="grade" id="grade-freshman" value="freshman" class="peer hidden" />
|
|
<label for="grade-freshman" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Freshman</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="radio" name="grade" id="grade-sophomore" value="sophomore" class="peer hidden" />
|
|
<label for="grade-sophomore" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Sophomore</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="grade" id="grade-junior" value="junior" class="peer hidden" />
|
|
<label for="grade-junior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Junior</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="grade" id="grade-senior" value="senior" class="peer hidden" />
|
|
<label for="grade-senior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Senior</label>
|
|
</div>
|
|
</div>
|
|
<div class="basis-full flex flex-wrap my-2">
|
|
<label for="pastorfirstname" class="basis-full mx-2">What is your pastor's name and number?</label>
|
|
<input type="text" id="pastorfirstname" name="pastorfirstname"
|
|
class="flex-auto form-input {{ formClasses }}"
|
|
placeholder="First Name">
|
|
<input type="text" id="pastorlastname" name="pastorlastname"
|
|
class="flex-auto form-input {{ formClasses }}"
|
|
placeholder="Last Name">
|
|
<input type="tel" id="pastorphone" name="pastorphone"
|
|
class="flex-auto form-input {{ formClasses }}"
|
|
placeholder="Phone Number">
|
|
</div>
|
|
<div class="basis-full my-2 flex flex-wrap items-center">
|
|
<label for="church" class="basis-full mx-2">What church do you attend?</label>
|
|
<input type="text" id="church" name="church"
|
|
class="basis-full form-input {{ formClasses }}">
|
|
<label for="churchattendance" class="basis-full mt-8 mx-2">Do you attend church regularly? <code id="layout" class="inline-block text-secondary-500">Regularly being 3 times a month</code></label>
|
|
<div class="basis-full flex flex-wrap items-center">
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="yes" class="flex-none form-input {{ formClasses }}" checked>
|
|
<label for="churchattendance" class="flex-auto">Yes</label>
|
|
</div>
|
|
<div class="basis-full flex flex-wrap items-center">
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="no" class="flex-none form-input {{ formClasses }}">
|
|
<label for="churchattendance" class="flex-auto">No</label>
|
|
</div>
|
|
<div class="basis-full flex flex-wrap items-center">
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="other" class="flex-none form-input {{ formClasses }}">
|
|
<input type="text" id="churchattendanceother" name="churchattendanceother"
|
|
class="flex-auto form-input {{ formClasses }}" placeholder="Other">
|
|
</div>
|
|
</div>
|
|
<label for="tfcgroup" class="basis-full mx-2">TFC Group</label>
|
|
<select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
|
|
<option value="Phillipsburg">Phillipsburg</option>
|
|
<option value="Atwood">Atwood</option>
|
|
<option value="Northern Valley">Northern Valley</option>
|
|
<option value="Southern Valley">Southern Valley</option>
|
|
<option value="Thunder Ridge">Thunder Ridge</option>
|
|
<option value="Logan">Logan</option>
|
|
<option value="Wakeeney">Wakeeney</option>
|
|
<option value="Codell">Codell</option>
|
|
<option value="Colby">Colby</option>
|
|
</select>
|
|
<label for="shirt" class="basis-full mx-2 mt-4">T-Shirt Size</label>
|
|
<select id="shirt" name="shirt" class="mb-4 basis-full flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
|
|
<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-4 mb-4 flex flex-wrap">
|
|
<label for="image" class="basis-full mx-2">
|
|
Please give us a picture you'd like to use on prayer cards.
|
|
</label>
|
|
<input type="file" id="image" name="image"
|
|
class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gray-500 file:text-gray-100 hover:file:bg-blue-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-blue-500 hover:file:ring-blue-500">
|
|
</div>
|
|
|
|
<h4 class="mx-2 mb-4">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</h4>
|
|
<div class="mx-2 grid w-full lg:grid-cols-3 md:grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
|
|
<div>
|
|
<input type="radio" name="trip" id="1" value="tulsa" class="peer hidden" checked />
|
|
<label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="radio" name="trip" id="2" value="rehoboth" class="peer hidden" />
|
|
<label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="radio" name="trip" id="3" value="mexico" class="peer hidden" />
|
|
<label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Mexico</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="basis-full mt-10">
|
|
<label for="tripnotes" class="p-4 mx-2">
|
|
Is there a trip you cannot go on due to scheduling conflicts? Or do you have any other things you'd wish to inform us about regarding a specific trip?
|
|
</label>
|
|
<br/>
|
|
<textarea id="tripnotes" name="tripnotes"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder="notes..."></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="relationship-with-jesus" class="p-4">
|
|
Describe your relationship with the Lord this past year.
|
|
</label>
|
|
<br/>
|
|
<textarea id="relationship-with-jesus" name="relationship-with-jesus"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="testimony" class="p-4">
|
|
Tell us how your relationship with Jesus began. (How you became a Christian)
|
|
</label>
|
|
<br/>
|
|
<textarea id="testimony" name="testimony"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="involvement-with-group" class="p-4">
|
|
In the last year, how have you been involved in the ministry of TFC (or your church/youth group)?
|
|
</label>
|
|
<br/>
|
|
<textarea id="involvement-with-group" name="involvement-with-group"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="reasons-for-trip-choice" class="p-4">
|
|
Why did you choose the team you applied for as your first choice? (Please let us know if you are unable to do any trip due to previous commitments.)
|
|
</label>
|
|
<br/>
|
|
<textarea id="reasons-for-trip-choice" name="reasons-for-trip-choice"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="strengths" class="p-4">
|
|
The strengths and talents you would bring to this year's team are:
|
|
</label>
|
|
<br/>
|
|
<textarea id="strengths" name="strengths"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="weaknesses" class="p-4">
|
|
Some negative traits that might effect my attitude are:
|
|
</label>
|
|
<br/>
|
|
<textarea id="weaknesses" name="weaknesses"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full mt-10">
|
|
<label for="previous-trip-info" class="p-4">
|
|
If you were a part of a previous TFC Mission Trip team, tell us how the trip changed your life?
|
|
</label>
|
|
<br/>
|
|
<textarea id="previous-trip-info" name="previous-trip-info"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full my-10">
|
|
<label for="attitude-torward-work" class="p-4">
|
|
If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say?
|
|
</label>
|
|
<br/>
|
|
<textarea id="attitude-torward-work" name="attitude-torward-work"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<div class="basis-full my-10">
|
|
<label for="relevant-notes" class="p-4">
|
|
Is there anything else you would like to tell us about yourself that might be relevant as we consider you for a mission trip?
|
|
</label>
|
|
<br/>
|
|
<textarea id="relevant-notes" name="relevant-notes"
|
|
class="form-input w-full h-64 {{ formClasses }}"
|
|
placeholder=""></textarea>
|
|
</div>
|
|
<label for="final-agreement" class="basis-full px-2">
|
|
I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed. <span class="{{ requiredField }}">* required</span>
|
|
</label>
|
|
<div class="basis-full">
|
|
<input type="radio" value="yes" id="final-agreement" name="final-agreement"
|
|
class="form-input {{ formClasses }}" required>
|
|
<label for="final-agreement" class="">
|
|
I understand
|
|
</label>
|
|
</div>
|
|
<label for="registration" class="basis-full px-2 mt-10">
|
|
Would you like to pay the registration fee now or later?
|
|
</label>
|
|
<div class="basis-full">
|
|
<input type="radio" value="now" id="registration" name="registration"
|
|
class="form-input {{ formClasses }}" checked>
|
|
<label for="registration" class="">
|
|
Now - $25
|
|
</label>
|
|
</div>
|
|
<div class="basis-full">
|
|
<input type="radio" value="later" id="registration" name="registration"
|
|
class="form-input {{ formClasses }}">
|
|
<label for="registration" class="">
|
|
Later - Send $25 to the TFC Office
|
|
</label>
|
|
</div>
|
|
<label for="health-form" class="basis-full px-2 mt-10">
|
|
Would you like to fill out the health form before paying?
|
|
</label>
|
|
<div class="basis-full">
|
|
<input type="radio" value="yes" id="registration" name="health-form"
|
|
class="form-input {{ formClasses }}" checked>
|
|
<label for="registration" class="">
|
|
Yes
|
|
</label>
|
|
</div>
|
|
<div class="basis-full">
|
|
<input type="radio" value="no" id="registration" name="health-form"
|
|
class="form-input {{ formClasses }}">
|
|
<label for="registration" class="">
|
|
No
|
|
</label>
|
|
</div>
|
|
<div class="basis-full mt-8">
|
|
<button type="submit" class="content-right rounded-lg bg-blue-700 h-12 w-24 focus:bg-blue-900 focus:ring focus:ring-blue-700 hover:bg-blue-900 float-right">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|