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

add camp-form

Browse source
This commit is contained in:
Chris Cochrun 2023-03-21 15:09:19 -05:00
parent 42497fb4c5
commit eae2232537
7 changed files with 384 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

179
layouts/shortcodes/camp-form.html Normal file
View file

@ -0,0 +1,179 @@
{{ $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" }}
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
<script>
function submitForm(e) {
e.preventDefault();
const form = document.getElementById('form');
const data = new FormData(form);
console.log(data.get("birthdate"));
const birthdate = new Date(data.get("birthdate"));
const age = calculate_age(birthdate);
data.append("age", age);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Logic directing where to send the user after form submission based on results.
// This is how to send them. window.location.href = '/thankyou/';
var payment = document.getElementById('registration').value;
window.location.href = '/camp-health-form?registration=' + payment;
// Need to eventually get the user here: https://secure.myvanco.com/L-Z772/campaign/C-13DM3
}
};
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application"); */
xhr.open("POST", "https://n8n.tfcconnection.org/webhook-test/camp-form");
xhr.send(data);
console.log(data);
console.log("Hallo!");
/* return false; */
}
function calculate_age(dob) {
var diff_ms = Date.now() - dob.getTime();
var age_dt = new Date(diff_ms);
return Math.abs(age_dt.getUTCFullYear() - 1970);
}
function process() {
/* document.getElementById('mt-form').hidden = false */
}
document.addEventListener('DOMContentLoaded', process);
</script>
<div id="mt-form" class="form text-lg w-full">
<form id='form' onsubmit="submitForm(event)" 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="firstname" 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="firstname" name="firstname"
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
<input type="text" id="lastname" name="lastname"
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 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"
class="flex-1 form-input {{ $formClasses }}"
placeholder="First Name">
<input type="text" id="parentlastname" name="parentlastname"
class="flex-1 form-input {{ $formClasses }}"
placeholder="Last Name">
</div>
<label for="birthdate" 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"
class="basis-full form-date {{ $formClasses }}">
<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 }}">
<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 <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></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>
</div>
<label for="homephone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="tel" id="homephone" name="homephone"
class="basis-full form-input {{ $formClasses }}">
<label for="parentemail" class="basis-full">Guardian's Email</label>
<input type="parentemail" 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 }}">
<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 <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<select id="week" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
<option value="week1">Week 1: July 17-21</option>
<option value="week2">Week 2: July 24-28</option>
</select>
<label for="shirt" class="basis-full">T-Shirt Size</label>
<select id="shirt" name="shirt" class="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-10">
<label for="final-agreement">
I understand that in order for my registration to be complete I need to have this form, a health form, and the $65 registration fee.
</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="registration" class="basis-full">
Would you like to pay the registration fee now or later? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
</label>
<div class="basis-full">
<input type="radio" value="now" id="registration" name="registration"
class="form-input {{ $formClasses }}" checked>
<label for="registration" class="">
Now - $65
</label>
</div>
<div class="basis-full">
<input type="radio" value="later" id="registration" name="registration"
class="form-input {{ $formClasses }}">
<label for="registration" class="">
Later - Send $65 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>

14
layouts/shortcodes/floating-button.html Normal file
View file

@ -0,0 +1,14 @@
{{ $icon := resources.Get (printf "icons/%s.svg" ($.Get "icon")) }}
{{ $text := .Get "text" -}}
{{ $link := .Get "link" -}}
<a href="{{ $link }}" class="bg-primary-600 w-40 h-12 hover:bg-primary-900 shadow-md hover:shadow-xl hover:!rounded-full text-neutral-300 rounded-full fixed bottom-4 inset-x-1/2 text-center">
<i class="hover:rounded-full">{{ $text }}</i>
{{ if $icon }}
<span class="relative inline-block align-sub icon">
{{ $icon.Content | safeHTML }}
</span>
{{ else }}
{{ errorf `[BLOWFISH] Shortcode "icon" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (printf "icons/%s.svg" ($.Get 0)) }}
{{ end }}
</a>