TFC/tfcconnection
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mostly css and some other tweaks to mission trip form

Browse source
This commit is contained in:
Chris Cochrun 2024-01-04 12:54:26 -06:00
parent 81bf6a53e3
commit 9b8ec651d8
2 changed files with 105 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

104
layouts/shortcodes/mt-form.html
View file

@ -73,7 +73,7 @@
<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>
<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 }}">
@ -81,7 +81,7 @@
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>
<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">
@ -89,11 +89,7 @@
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="basis-full my-4">
<div class="">
<label for="birthdate" class="">When were you born?</label>
<input type="date" id="birthdate" name="birthdate"
@ -108,12 +104,12 @@
</div>
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="street" class="basis-full">What is your address? {{ $requiredField }}</label>
<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="flex-auto form-input {{ $formClasses }}"
class="basis-full form-input {{ $formClasses }}"
placeholder="City" required>
<input type="text" id="state" name="state"
class="flex-auto form-input {{ $formClasses }}"
@ -122,29 +118,34 @@
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 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>
<label for="school" class="basis-full my-4">What school do you go to?</label>
<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="">Grade</label>
<label for="grade" class=" mx-2">Grade</label>
<br/>
<input type="radio" id="grade" name="grade" value="8"
class="form-input {{ $formClasses }}" checked>
@ -167,7 +168,7 @@
<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>
<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">
@ -179,10 +180,10 @@
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>
<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">Do you attend church regularly?</label>
<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>
@ -228,37 +229,30 @@
</div>
</div>
<div class="basis-full my-4 mb-8 flex flex-wrap">
<label for="image" class="basis-full">
<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">Please rank the trips you'd like to go on: 1 being your first choice and 2 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">New Mexico</label>
<select id="trip-1" name="trip-1" class="form-select {{ $formClasses }}">
<option value="1">1</option>
<option value="2">2</option>
<option value="X">X</option>
</select>
</div>
<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>
<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">
Do you have any other notes for us regarding this trip?
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"
@ -347,7 +341,7 @@
placeholder=""></textarea>
</div>
<div class="basis-full my-10">
<label for="final-agreement">
<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">
@ -358,7 +352,7 @@
</label>
</div>
</div>
<label for="registration" class="basis-full">
<label for="registration" class="basis-full px-2">
Would you like to pay the registration fee now or later?
</label>
<div class="basis-full">