unfortunately this is the change to the new zola based website
This commit is contained in:
Chris Cochrun
parent
308c4fb9c5
commit
fa74bbe4b3
866 changed files with 3737 additions and 118270 deletions
245
templates/shortcodes/camp_form.html
Normal file
245
templates/shortcodes/camp_form.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
{% set 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" -%}
|
||||
{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
|
||||
|
||||
<div id="mt-form" class="form text-lg w-full">
|
||||
<form id='form'
|
||||
hx-post="/api/camp-form"
|
||||
hx-encoding="multipart/form-data"
|
||||
autocomplete="on"
|
||||
method="post"
|
||||
target="_parent"
|
||||
class="w-full items-center flex flex-wrap">
|
||||
|
||||
<h3 class="basis-full">Camp Form</h3>
|
||||
<div class="basis-full flex flex-wrap my-4">
|
||||
<label for="first-name" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<br/>
|
||||
<input type="text" id="first-name" name="first-name"
|
||||
placeholder="First Name" class="peer flex-1 form-input {{ formClasses }}"
|
||||
required>
|
||||
<input type="text" id="last-name" name="last-name"
|
||||
placeholder="Last Name" class="peer flex-1 form-input {{ formClasses }}"
|
||||
required>
|
||||
|
||||
<label for="parent-first-name" class="basis-full mt-2">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<input type="text" id="parent-first-name" name="parent-first-name"
|
||||
class="peer flex-1 form-input {{ formClasses }}"
|
||||
placeholder="First Name" required>
|
||||
<input type="text" id="parent-last-name" name="parent-last-name"
|
||||
class="peer flex-1 form-input {{ formClasses }}"
|
||||
placeholder="Last Name" required>
|
||||
</div>
|
||||
|
||||
<label for="birth-date" class="basis-full">When were you born? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<input type="date" id="birth-date" name="birth-date"
|
||||
class="basis-full form-date {{ formClasses }}" required>
|
||||
<label for="gender" class="basis-full">Gender <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<select id="gender" name="gender" class="basis-full form-select {{ formClasses }}" required>
|
||||
<option value="Male">Male</option>
|
||||
<option value="Female">Female</option>
|
||||
</select>
|
||||
|
||||
<div class="basis-full flex flex-wrap my-4">
|
||||
<label for="street" class="basis-full">What is your address? <span class='inline-block text-[#f39] text-sm align-sub'>* 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 }}"
|
||||
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 my-4">
|
||||
<label for="grade" class="">Grade this Fall <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<br/>
|
||||
<input type="radio" id="grade" name="grade" value="6"
|
||||
class="form-input {{ formClasses }}" checked>
|
||||
<label for="grade" class="">6th</label>
|
||||
<br/>
|
||||
<input type="radio" id="grade" name="grade" value="7"
|
||||
class="form-input {{ formClasses }}" checked>
|
||||
<label for="grade" class="">7th</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>
|
||||
<br/>
|
||||
<input type="radio" id="grade" name="grade" value="college-freshman"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="grade" class="">College Freshman</label>
|
||||
</div>
|
||||
|
||||
<label for="parent-phone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<input type="tel" id="parent-phone" name="parent-phone"
|
||||
class="basis-full peer form-input {{ formClasses }}
|
||||
invalid:text-[#f39] invalid:ring-[#f39]
|
||||
focus:invalid:ring-[#f39]
|
||||
focus:invalid:border-[#f39]"
|
||||
required pattern="\(?\d{3}\)? ?-?\d{3} ?-?\d{4}"/>
|
||||
|
||||
<!-- <div id="warning-phone"
|
||||
class="invisible flex
|
||||
rounded-lg h-0
|
||||
peer-invalid:p-2
|
||||
peer-invalid:visible
|
||||
peer-empty:invisible
|
||||
peer-empty:h-0
|
||||
peer-empty:mb-0
|
||||
peer-invalid:basis-full
|
||||
peer-invalid:mb-32">
|
||||
|
||||
<span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
Make sure you have included a valid phone number for your guardian so we can contact them. Numbers are in the format "999-999-9999 or 0123456789". Make sure to include an area code.
|
||||
</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="basis-full flex flex-wrap">
|
||||
|
||||
<label for="parent-email" class="basis-full">Guardian's Email
|
||||
<span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
|
||||
</label>
|
||||
<input type="email" id="parent-email" name="parent-email"
|
||||
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
|
||||
class="basis-full peer form-input
|
||||
{{ formClasses }}
|
||||
invalid:text-[#F39]
|
||||
invalid:ring-[#f39]
|
||||
focus:invalid:ring-[#f39]
|
||||
focus:invalid:border-[#f39]">
|
||||
|
||||
<div id="warning-email"
|
||||
class="invisible flex
|
||||
rounded-lg h-0
|
||||
peer-invalid:p-2 peer-invalid:visible
|
||||
peer-invalid:basis-full
|
||||
peer-invalid:mb-24">
|
||||
|
||||
<span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
Make sure you have included an email for your guardian so we can contact them. Emails are in the format "name@website.end".
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<label for="allergies" class="basis-full">Do you have any food allergies?</label>
|
||||
<input type="text" id="allergies" name="allergies"
|
||||
class="basis-full form-input {{ formClasses }}">
|
||||
|
||||
<label for="week" class="basis-full">My Camp Plan (The first week is filled, so if you'd like to be on a waiting list, you'll have to check the second option.)<span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<select id="week" name="week" class="flex-auto form-select {{ formClasses }}">
|
||||
<option value="week1">Week 1: July 21-25</option>
|
||||
<option value="week2">Week 2: July 28-Aug 1</option>
|
||||
<!-- <option value="waiting-list">Week 2: July 29-Aug 2, but on a waiting list for week 1</option> -->
|
||||
</select>
|
||||
|
||||
<label for="shirt" class="basis-full">T-Shirt Size <span class='inline-block text-[#f39] text-sm'>all t-shirts are in adult sizes only</span></label>
|
||||
<select id="shirt" name="shirt" class="mb-8 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 class="basis-full my-2">
|
||||
<label for="final-agreement">
|
||||
I understand that in order to go to camp I need to have this form, a health form, and the total cost paid.
|
||||
</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 <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<label for="health-form" class="basis-full my-2">
|
||||
Would you like to fill out the health form now or later? Your health form is not required right now, but you cannot go to camp without one.
|
||||
</label>
|
||||
<div class="basis-full mt-4">
|
||||
<input type="radio" value="now" id="health-form" name="health-form"
|
||||
class="form-input {{ formClasses }}" checked>
|
||||
<label for="health-form" class="">
|
||||
Now
|
||||
</label>
|
||||
</div>
|
||||
<div class="basis-full mb-4">
|
||||
<input type="radio" value="later" id="health-form" name="health-form"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="health-form" class="">
|
||||
Later
|
||||
</label>
|
||||
</div>
|
||||
<label for="registration" class="basis-full my-2">
|
||||
Would you like to pay the registration fee or the full cost now or later?
|
||||
</label>
|
||||
<!-- For early bird prices -->
|
||||
<div class="basis-full mt-4">
|
||||
<input type="radio" value="now" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}" checked>
|
||||
<label for="registration" class="">
|
||||
Now - $85
|
||||
</label>
|
||||
</div>
|
||||
<div class="basis-full">
|
||||
<input type="radio" value="full" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="registration" class="">
|
||||
Full Cost - $185
|
||||
</label>
|
||||
</div>
|
||||
<div class="basis-full mb-4">
|
||||
<input type="radio" value="later" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="registration" class="">
|
||||
Later - Send $85 or $185 to the TFC Office
|
||||
</label>
|
||||
</div>
|
||||
<!-- For after early bird prices -->
|
||||
<!-- <div class="basis-full mt-4">
|
||||
<input type="radio" value="now" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}" checked>
|
||||
<label for="registration" class="">
|
||||
Now - $100
|
||||
</label>
|
||||
</div>
|
||||
<div class="basis-full">
|
||||
<input type="radio" value="full" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="registration" class="">
|
||||
Full Cost - $200
|
||||
</label>
|
||||
</div>
|
||||
<div class="basis-full mb-4">
|
||||
<input type="radio" value="later" id="registration" name="registration"
|
||||
class="form-input {{ formClasses }}">
|
||||
<label for="registration" class="">
|
||||
Later - Send $100 or $200 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue