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

switching to a better naming scheme for fields in form

Browse source
This commit is contained in:
Chris Cochrun 2024-04-25 21:33:41 -05:00
parent c3bf1e3a9f
commit 3353f59268
1 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
layouts/shortcodes/camp-form.html
View file

@ -6,26 +6,26 @@
<form id='form' hx-post="https://api.tfcconnection.org/camp-form" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap"> <form id='form' hx-post="https://api.tfcconnection.org/camp-form" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Camp Form</h3> <h3 class="basis-full">Camp Form</h3>
<div class="basis-full flex flex-wrap my-4"> <div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label> <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/> <br/>
<input type="text" id="firstname" name="firstname" <input type="text" id="first-name" name="first-name"
placeholder="First Name" class="peer flex-1 form-input {{ $formClasses }}" placeholder="First Name" class="peer flex-1 form-input {{ $formClasses }}"
required> required>
<input type="text" id="lastname" name="lastname" <input type="text" id="last-name" name="last-name"
placeholder="Last Name" class="peer flex-1 form-input {{ $formClasses }}" placeholder="Last Name" class="peer flex-1 form-input {{ $formClasses }}"
required> required>
<label for="parentfirstname" 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> <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="parentfirstname" name="parentfirstname" <input type="text" id="parent-first-name" name="parent-first-name"
class="peer flex-1 form-input {{ $formClasses }}" class="peer flex-1 form-input {{ $formClasses }}"
placeholder="First Name" required> placeholder="First Name" required>
<input type="text" id="parentlastname" name="parentlastname" <input type="text" id="parent-last-name" name="parent-last-name"
class="peer flex-1 form-input {{ $formClasses }}" class="peer flex-1 form-input {{ $formClasses }}"
placeholder="Last Name" required> placeholder="Last Name" required>
</div> </div>
<label for="birthdate" class="basis-full">When were you born? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label> <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="birthdate" name="birthdate" <input type="date" id="birth-date" name="birth-date"
class="basis-full form-date {{ $formClasses }}" required> 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> <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> <select id="gender" name="gender" class="basis-full form-select {{ $formClasses }}" required>
@ -85,8 +85,8 @@
<label for="grade" class="">College Freshman</label> <label for="grade" class="">College Freshman</label>
</div> </div>
<label for="parentphone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label> <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="parentphone" name="parentphone" <input type="tel" id="parent-phone" name="parent-phone"
class="basis-full peer form-input {{ $formClasses }} class="basis-full peer form-input {{ $formClasses }}
invalid:text-[#f39] invalid:ring-[#f39] invalid:text-[#f39] invalid:ring-[#f39]
focus:invalid:ring-[#f39] focus:invalid:ring-[#f39]
@ -111,10 +111,10 @@
--> -->
<div class="basis-full flex flex-wrap"> <div class="basis-full flex flex-wrap">
<label for="parentemail" class="basis-full">Guardian's Email <label for="parent-email" class="basis-full">Guardian's Email
<span class='inline-block text-[#f39] text-sm align-sub'>* required</span> <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
</label> </label>
<input type="parentemail" id="parentemail" name="parentemail" <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]+)*$" pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="basis-full peer form-input class="basis-full peer form-input
{{ $formClasses }} {{ $formClasses }}
@ -167,20 +167,20 @@
</label> </label>
</div> </div>
</div> </div>
<label for="health" class="basis-full my-2"> <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. 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> </label>
<div class="basis-full mt-4"> <div class="basis-full mt-4">
<input type="radio" value="now" id="health" name="health" <input type="radio" value="now" id="health-form" name="health-form"
class="form-input {{ $formClasses }}" checked> class="form-input {{ $formClasses }}" checked>
<label for="health" class=""> <label for="health-form" class="">
Now Now
</label> </label>
</div> </div>
<div class="basis-full mb-4"> <div class="basis-full mb-4">
<input type="radio" value="later" id="health" name="health" <input type="radio" value="later" id="health-form" name="health-form"
class="form-input {{ $formClasses }}"> class="form-input {{ $formClasses }}">
<label for="health" class=""> <label for="health-form" class="">
Later Later
</label> </label>
</div> </div>