181 lines
9.1 KiB
HTML
181 lines
9.1 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" }}
|
|
|
|
<script>
|
|
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 = false
|
|
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">
|
|
<form action="" autocomplete="on" method="post" target="_parent" class="items-center flex flex-wrap">
|
|
<h3 class="basis-full">Mission Trip Application</h3>
|
|
<div class="basis-1/2">
|
|
<label for="firstname" class="">What is your first name?</label>
|
|
<br/>
|
|
<input type="text" id="firstname" name="firstname"
|
|
placeholder="First Name" class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="lastname" class="">What is your last name</label>
|
|
<br/>
|
|
<input type="text" id="lastname" name="lastname"
|
|
placeholder="Last Name" class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="parentfirstname" class="">What is your parent's first name?</label>
|
|
<input type="text" id="parentfirstname" name="parentfirstname"
|
|
class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="parentlastname" class="">What is your parent's last name?</label>
|
|
<input type="text" id="parentlastname" name="parentlastname"
|
|
class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="birthday" class="">When were you born?</label>
|
|
<input type="date" id="birthday" name="birthday"
|
|
class="form-date {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="age" class="">Age</label>
|
|
<input type="number" id="age" name="age" class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<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 class="basis-1/2"></div>
|
|
<div class="basis-1/2 mt-10">
|
|
<label for="street" class="">Street Address</label>
|
|
<input type="text" id="street" name="street" class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="city" class="basis-1/4">City</label>
|
|
<input type="text" id="city" name="city" class="basis-1/4 form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="state" class="basis-1/4">State</label>
|
|
<input type="text" id="state" name="state" class="basis-1/4 form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2 mb-10">
|
|
<label for="zip" class="basis-1/4">Zip Code</label>
|
|
<input type="text" id="zip" name="zip" class="basis-1/4 form-input {{ $formClasses }}">
|
|
</div>
|
|
<label for="image" class="">Please give us a picture you'd like to use on prayer cards.</label>
|
|
<input type="file" id="image" name="image" class="file:m-4 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 ">
|
|
<br/>
|
|
<label for="cellphone" class="">Cell phone</label>
|
|
<input type="tel" id="cellphone" name="cellphone"
|
|
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
|
|
<label for="homephone" class="">Home phone</label>
|
|
<input type="tel" id="homephone" name="homephone"
|
|
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
|
|
<label for="email" class="">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="form-input {{ $formClasses }}">
|
|
<label for="school" class="">School</label>
|
|
<input type="text" id="school" name="school" class="form-input {{ $formClasses }}">
|
|
|
|
<div class="basis-full">
|
|
<label for="grade" class="">Grade</label>
|
|
<br/>
|
|
<input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}">
|
|
<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>
|
|
<label for="parentemail" class="">ParentEmail</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="form-input {{ $formClasses }}">
|
|
<div class="basis-1/2">
|
|
<label for="pastorfirstname" class="">What is your pastor's first name?</label>
|
|
<input type="text" id="pastorfirstname" name="pastorfirstname"
|
|
class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="pastorlastname" class="">What is your pastor's last name?</label>
|
|
<input type="text" id="pastorlastname" name="pastorlastname"
|
|
class="form-input {{ $formClasses }}">
|
|
</div>
|
|
<div class="basis-full">
|
|
<label for="churchattendance" class="">Do you attend church regularly?</label>
|
|
<br/>
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="yes" class="form-input {{ $formClasses }}">
|
|
<label for="churchattendance" class="">Yes</label>
|
|
<br/>
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="no" class="form-input {{ $formClasses }}">
|
|
<label for="churchattendance" class="">No</label>
|
|
<br/>
|
|
<input type="radio" id="churchattendance" name="churchattendance"
|
|
value="other" class="form-input {{ $formClasses }}">
|
|
<label for="churchattendance" class="">Other</label>
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label for="tfcgroup" class="">TFC Group</label>
|
|
<select id="tfcgroup" name="tfcgroup" class="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="codell">Codell</option>
|
|
<option value="colby">Colby</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="h-12" style="display: flex;"></div>
|
|
|
|
<iframe
|
|
id="form"
|
|
class="mt-form w-full h-screen"
|
|
src="https://tbl.tfcconnection.org/dashboard/#/nc/form/771dc7dc-9a82-49e4-abfe-0fd7b72281f2?embed"
|
|
frameborder="0"
|
|
style="background: transparent; border: 1px solid #ddd">
|
|
</iframe>
|