Chris Cochrun
d0ebf6baab
Front end of mt-form is basically ready. There could be some tweaks to wording here and there, but it's mostly done. Will need to adjust how it sends the form when we actually send it on, but for now, it's ready.
392 lines
20 KiB
HTML
392 lines
20 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);
|
|
|
|
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;
|
|
console.log(res);
|
|
}
|
|
});
|
|
|
|
/* var xhr = new XMLHttpRequest();
|
|
* xhr.onreadystatechange = function() {
|
|
* if (this.readyState == 4 && this.status == 200) {
|
|
* // Logic directing where to send the user after form submission based on results.
|
|
* // This is how to send them. window.location.href = '/thankyou/';
|
|
|
|
* var payment = document.getElementById('registration').value;
|
|
* window.location.href = '/mt-health-form?mtregistration=' + payment;
|
|
* // Need to eventually get the user here: https://secure.myvanco.com/L-Z772/campaign/C-13DM3
|
|
* }
|
|
* }; */
|
|
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application"); */
|
|
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application");
|
|
* 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() {
|
|
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
|
|
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">
|
|
<div class="p-2">
|
|
<input type="checkbox" name="student-agree" id="student-agree"
|
|
onclick="process()" class="form-checkbox {{ $formClasses }}" />
|
|
<label for="student-agree">I agree to the above</label>
|
|
</div>
|
|
<div class="p-2">
|
|
<input type="checkbox" name="adult-agree" id="adult-agree"
|
|
onclick="process()" class="form-checkbox {{ $formClasses }}" />
|
|
<label for="adult-agree">Parent agrees to the above</label>
|
|
</div>
|
|
</div>
|
|
|
|
<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">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?</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 mx-2">What is your parent's first and last name?</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>
|
|
<div class="basis-full my-4">
|
|
<div class="">
|
|
<label for="birthdate" class="">When were you born?</label>
|
|
<input type="date" id="birthdate" name="birthdate"
|
|
class="form-date {{ $formClasses }}">
|
|
</div>
|
|
<div class="">
|
|
<label for="gender" class="">Gender</label>
|
|
<select id="gender" name="gender" class="form-select {{ $formClasses }}">
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</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='inline-block text-[#f39] text-sm align-middle'>* 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>
|
|
<div class="flex-auto flex flex-wrap items-center">
|
|
<label for="cellphone" class="basis-1/4 mr-4">Cell phone</label>
|
|
<input type="tel" id="cellphone" name="cellphone"
|
|
class="flex-auto form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="flex-auto flex flex-wrap items-center">
|
|
<label for="homephone" class="basis-1/4 mr-4">Parent phone</label>
|
|
<input type="tel" id="homephone" name="homephone"
|
|
class="flex-auto form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-full flex items-center">
|
|
<label for="email" class="basis-1/4 mr-4">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="basis-3/4 form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-full flex items-center">
|
|
<label for="parentemail" class="basis-1/4 mr-4">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="basis-3/4 form-input {{ $formClasses }}">
|
|
</div>
|
|
|
|
<label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
|
|
<input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
|
|
|
|
<div class="basis-full my-4">
|
|
<label for="grade" class=" mx-2">Grade</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>
|
|
</div>
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<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-4 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>
|
|
<div class="basis-full flex flex-wrap my-4">
|
|
<div class="basis-1/2 flex flex-wrap items-center">
|
|
<label for="tfcgroup" class="flex-initial">TFC Group</label>
|
|
<select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
|
|
<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>
|
|
</div>
|
|
<div class="basis-1/2 flex flex-wrap items-center">
|
|
<label for="shirt" class="flex-initial">T-Shirt Size</label>
|
|
<select id="shirt" name="shirt" class="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>
|
|
</div>
|
|
<div class="basis-full my-4 mb-8 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-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
|
|
</div>
|
|
|
|
<label class="basis-full mt-8 mx-2" for="trip">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.</label>
|
|
<select id="trip" name="trip" class="form-select {{ $formClasses }} basis-full items-center mb-8">
|
|
<option value="New Mexico">New Mexico</option>
|
|
<option value="Mexico">Mexico</option>
|
|
</select>
|
|
<!-- <div class="flex-auto basis-1/3">
|
|
<label for="trip-2" class="basis-1/2">Mexico</label>
|
|
<select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="X">X</option>
|
|
</select>
|
|
</div> -->
|
|
|
|
<div class="basis-full mt-10">
|
|
<label for="tripnotes" class="p-4">
|
|
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-toward-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-toward-work" name="attitude-toward-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>
|
|
<div class="basis-full my-10">
|
|
<label for="final-agreement" class="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.
|
|
</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
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<label for="registration" class="basis-full px-2">
|
|
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>
|
|
<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>
|
|
</form>
|
|
</div>
|
|
|