diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 1c06548..366568e 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1349,6 +1349,139 @@ select { margin-bottom: 0; } +.form-input,.form-textarea,.form-select,.form-multiselect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +.form-input::placeholder,.form-textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +.form-input::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +.form-input::-webkit-date-and-time-value { + min-height: 1.5em; +} + +.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; +} + +.form-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +.form-checkbox,.form-radio { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +.form-checkbox { + border-radius: 0px; +} + +.form-checkbox:focus,.form-radio:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +.form-checkbox:checked,.form-radio:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +.form-checkbox:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + .sr-only { position: absolute; width: 1px; @@ -1449,6 +1582,10 @@ select { margin: 1rem; } +.m-2 { + margin: 0.5rem; +} + .m-0 { margin: 0px; } @@ -1771,6 +1908,22 @@ select { flex-grow: 1; } +.basis-1\/2 { + flex-basis: 50%; +} + +.basis-1 { + flex-basis: 0.25rem; +} + +.basis-full { + flex-basis: 100%; +} + +.basis-1\/4 { + flex-basis: 25%; +} + .-translate-y-8 { --tw-translate-y: -2rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1810,6 +1963,22 @@ select { flex-wrap: wrap; } +.place-content-center { + place-content: center; +} + +.place-items-center { + place-items: center; +} + +.content-center { + align-content: center; +} + +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } @@ -1956,6 +2125,11 @@ select { background-color: rgba(var(--color-neutral), 0.5); } +.bg-neutral-500 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); +} + .bg-neutral-100\/50 { background-color: rgba(var(--color-neutral-100), 0.5); } @@ -2046,6 +2220,11 @@ select { object-position: left; } +.object-center { + -o-object-position: center; + object-position: center; +} + .p-4 { padding: 1rem; } @@ -2054,6 +2233,10 @@ select { padding: 0.5rem; } +.p-3 { + padding: 0.75rem; +} + .p-0 { padding: 0px; } @@ -2303,6 +2486,11 @@ select { color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } +.text-\[\#fff\] { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .text-primary-300 { --tw-text-opacity: 1; color: rgba(var(--color-primary-300), var(--tw-text-opacity)); @@ -2338,6 +2526,16 @@ select { color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important; } +.text-neutral-100 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); +} + +.text-neutral-50 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-50), var(--tw-text-opacity)); +} + .\!no-underline { text-decoration-line: none !important; } @@ -2354,6 +2552,26 @@ select { text-decoration-color: rgba(var(--color-neutral-300), 1); } +.placeholder-neutral-100::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity)); +} + +.placeholder-neutral-100::placeholder { + --tw-placeholder-opacity: 1; + color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity)); +} + +.placeholder-neutral-300::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity)); +} + +.placeholder-neutral-300::placeholder { + --tw-placeholder-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity)); +} + .opacity-0 { opacity: 0; } @@ -2378,6 +2596,24 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.ring-2 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-offset-2 { + --tw-ring-offset-width: 2px; +} + +.ring-offset-neutral-50 { + --tw-ring-offset-color: rgba(var(--color-neutral-50), 1); +} + +.ring-offset-neutral-500 { + --tw-ring-offset-color: rgba(var(--color-neutral-500), 1); +} + .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -3123,10 +3359,137 @@ body:has(#menu-controller:checked) { } } +.file\:m-4::file-selector-button { + margin: 1rem; +} + +.file\:mr-4::file-selector-button { + margin-right: 1rem; +} + +.file\:rounded-full::file-selector-button { + border-radius: 9999px; +} + +.file\:rounded-lg::file-selector-button { + border-radius: 0.5rem; +} + +.file\:border-0::file-selector-button { + border-width: 0px; +} + +.file\:border-2::file-selector-button { + border-width: 2px; +} + +.file\:bg-neutral-50::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity)); +} + +.file\:bg-primary-50::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-50), var(--tw-bg-opacity)); +} + +.file\:bg-neutral-500::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); +} + +.file\:bg-primary-500::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)); +} + +.file\:bg-primary-100::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); +} + +.file\:bg-neutral-400::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity)); +} + +.file\:bg-neutral-100::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity)); +} + +.file\:bg-neutral-200::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity)); +} + +.file\:p-4::file-selector-button { + padding: 1rem; +} + +.file\:py-2::file-selector-button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.file\:px-4::file-selector-button { + padding-left: 1rem; + padding-right: 1rem; +} + +.file\:py-4::file-selector-button { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.file\:text-sm::file-selector-button { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.file\:font-semibold::file-selector-button { + font-weight: 600; +} + +.file\:text-neutral-700::file-selector-button { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); +} + +.file\:text-primary-700::file-selector-button { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); +} + +.file\:text-primary-300::file-selector-button { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); +} + +.file\:text-neutral-100::file-selector-button { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); +} + .first\:mt-8:first-child { margin-top: 2rem; } +.checked\:bg-primary-500:checked { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)); +} + +.checked\:bg-neutral-500:checked { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); +} + +.checked\:text-neutral-500:checked { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); +} + .hover\:border-transparent:hover { border-color: transparent; } @@ -3151,6 +3514,11 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; } +.hover\:bg-neutral-500:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); +} + .hover\:text-primary-600:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-600), var(--tw-text-opacity)); @@ -3192,6 +3560,75 @@ body:has(#menu-controller:checked) { text-underline-offset: 2px; } +.hover\:ring-2:hover { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.hover\:ring-primary-500:hover { + --tw-ring-opacity: 1; + --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity)); +} + +.hover\:file\:bg-neutral-100::file-selector-button:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity)); +} + +.hover\:file\:bg-primary-300::file-selector-button:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity)); +} + +.hover\:file\:p-9::file-selector-button:hover { + padding: 2.25rem; +} + +.hover\:file\:px-5::file-selector-button:hover { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.hover\:file\:px-6::file-selector-button:hover { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.hover\:file\:text-primary-100::file-selector-button:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-100), var(--tw-text-opacity)); +} + +.hover\:file\:text-primary-700::file-selector-button:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); +} + +.hover\:file\:text-primary-500::file-selector-button:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-500), var(--tw-text-opacity)); +} + +.hover\:file\:ring-2::file-selector-button:hover { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.hover\:file\:ring-primary-500::file-selector-button:hover { + --tw-ring-opacity: 1; + --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity)); +} + +.hover\:file\:ring-offset-2::file-selector-button:hover { + --tw-ring-offset-width: 2px; +} + +.hover\:file\:ring-offset-transparent::file-selector-button:hover { + --tw-ring-offset-color: transparent; +} + .focus\:translate-y-0:focus { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -3202,6 +3639,16 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } +.focus\:text-primary-500:focus { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-500), var(--tw-text-opacity)); +} + +.focus\:text-primary-200:focus { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-200), var(--tw-text-opacity)); +} + .focus\:outline-dotted:focus { outline-style: dotted; } @@ -3214,6 +3661,29 @@ body:has(#menu-controller:checked) { outline-color: transparent; } +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-primary-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity)); +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +.focus\:ring-offset-neutral-500:focus { + --tw-ring-offset-color: rgba(var(--color-neutral-500), 1); +} + +.focus\:ring-offset-transparent:focus { + --tw-ring-offset-color: transparent; +} + .group:hover .group-hover\:text-primary-600 { --tw-text-opacity: 1; color: rgba(var(--color-primary-600), var(--tw-text-opacity)); diff --git a/layouts/shortcodes/mt-form.html b/layouts/shortcodes/mt-form.html index 1073204..0c6b1f9 100644 --- a/layouts/shortcodes/mt-form.html +++ b/layouts/shortcodes/mt-form.html @@ -1,3 +1,4 @@ +{{ $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() { @@ -6,11 +7,12 @@ var parentAgree = document.getElementById("adult-agree").checked; console.log(parentAgree); if (studentAgree && parentAgree) { - document.getElementById('form').hidden = false + document.getElementById('mt-form').hidden = false console.log("WOOHOO"); } else { document.getElementById('form').hidden = true + document.getElementById('mt-form').hidden = false console.log("NEGATORY"); } } @@ -19,15 +21,154 @@ <div class="m-4"> <div class="p-2"> - <input type="checkbox" name="student-agree" id="student-agree" onclick="process()" /> + <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()" /> + <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