{{ $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); 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">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">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> <label for="parentemail" class="basis-full">What is your parent's email address?</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-full form-input {{ $formClasses }}"> <div class="basis-full my-8"> <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">What is your address? {{ $requiredField }}</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 flex flex-wrap items-center my-8"> <div class="flex-auto flex flex-wrap items-center"> <label for="cellphone" class="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="mr-4">Parent phone</label> <input type="tel" id="homephone" name="homephone" class="flex-auto form-input {{ $formClasses }}"> </div> <div class="flex-auto flex flex-wrap items-center"> <label for="email" class="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="flex-auto form-input {{ $formClasses }}"> </div> </div> <label for="school" class="basis-full my-4">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="">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">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">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">Do you attend church regularly?</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"> 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">Please rank the trips you'd like to go on: 1 being your first choice and 3 being your last choice. If you cannot go on a trip for sure, please use the X.</label> <div class="basis-full grid grid-cols-1 gap-8 lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-1 items-center mb-8"> <div class=""> <label for="trip-1">Miriam's Hope</label> <select id="trip-1" name="trip-1" class="form-select {{ $formClasses }}"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="X">X</option> </select> </div> <div class="flex-auto basis-1/3"> <label for="trip-2" class="basis-1/2">Cary Mississippi</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="3">3</option> <option value="X">X</option> </select> </div> <div class="flex-auto basis-1/3"> <label for="trip-3" class="basis-full">Colorado/Nebraska</label> <select id="trip-3" name="trip-3" class="flex-auto form-select {{ $formClasses }}"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="X">X</option> </select> </div> </div> <div class="basis-full mt-10"> <label for="tripnotes" class="p-4"> Do you have any other notes for us regarding this 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"> 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"> 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>