Added registration form page
This commit is contained in:
Kent Joseph T. Palima
+181
-1
@@ -1,10 +1,190 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import '../styles/apply.scss';
|
||||
---
|
||||
|
||||
<Layout title="Registration | UP IECEP">
|
||||
<section class="registration-section">
|
||||
<div class="form-container">
|
||||
<h1>Registration Portal</h1>
|
||||
<strong>Coming soon</strong>
|
||||
|
||||
<div class="description-text">
|
||||
<p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
|
||||
<p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
|
||||
</div>
|
||||
|
||||
<!-- ELIGIBILITY CHECK -->
|
||||
<div id="eligibility-section" class="eligibility-card">
|
||||
<h3>Eligibility Check</h3>
|
||||
<p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
|
||||
|
||||
<div class="radio-group">
|
||||
<p>Are you currently a BS Electronics Engineering student?</p>
|
||||
<label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
|
||||
<label><input type="radio" name="isBSECE" value="no" /> No</label>
|
||||
</div>
|
||||
|
||||
<div class="radio-group">
|
||||
<p>Are you graduating this semester?</p>
|
||||
<label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
|
||||
<label><input type="radio" name="isGraduating" value="no" /> No</label>
|
||||
</div>
|
||||
|
||||
<button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
|
||||
</div>
|
||||
|
||||
<!-- INELIGIBLE MESSAGE (Hidden by default) -->
|
||||
<div id="ineligible-message" class="hidden-message">
|
||||
<p>Unfortunately, you are ineligible to join UP IECEP.</p>
|
||||
<p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
|
||||
</div>
|
||||
|
||||
<!-- THE ACTUAL FORM (Hidden by default) -->
|
||||
<!-- PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
|
||||
<form id="apply-form" class="hidden-form" action="https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec">
|
||||
<h3>Applicant Details</h3>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
|
||||
<input type="text" id="fullName" name="fullName" required placeholder="DELA CRUZ, Juan M." />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="nickname">Nickname</label>
|
||||
<input type="text" id="nickname" name="nickname" required placeholder="Juan" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="studentNumber">Student Number <span>(Format: 20XXXXXXX)</span></label>
|
||||
<input type="text" id="studentNumber" name="studentNumber" pattern="20\d{7}" required placeholder="20XXXXXXX" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="yearStanding">Year Standing</label>
|
||||
<select id="yearStanding" name="yearStanding" required>
|
||||
<option value="" disabled selected>Select your year standing</option>
|
||||
<option value="I">I</option>
|
||||
<option value="II">II</option>
|
||||
<option value="III">III</option>
|
||||
<option value="IV">IV</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
|
||||
<input type="tel" id="mobileNumber" name="mobileNumber" pattern="09\d{9}" required placeholder="09XXXXXXXXX" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" required placeholder="jdelacruz@up.edu.ph" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
|
||||
<input type="text" id="facebookLink" name="facebookLink" required placeholder="facebook.com/IECEPUPD" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="source">How did you learn about UP IECEP?</label>
|
||||
<select id="source" name="source" required>
|
||||
<option value="" disabled selected>Select an option</option>
|
||||
<option value="Family">Family</option>
|
||||
<option value="Friends">Friends</option>
|
||||
<option value="Social Media">Social Media</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
|
||||
<textarea id="funActivities" name="funActivities" rows="4" placeholder="Share your ideas here!"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
|
||||
<p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
|
||||
</form>
|
||||
|
||||
<!-- SUCCESS MESSAGE (Hidden by default) -->
|
||||
<div id="success-message" class="hidden-message success">
|
||||
<h3>Application Submitted!</h3>
|
||||
<p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
// Elements
|
||||
const eligibilitySection = document.getElementById('eligibility-section');
|
||||
const checkBtn = document.getElementById('check-eligibility-btn');
|
||||
const ineligibleMsg = document.getElementById('ineligible-message');
|
||||
const mainForm = document.getElementById('apply-form') as HTMLFormElement;
|
||||
const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
|
||||
const loadingMsg = document.getElementById('loading-msg');
|
||||
const successMsg = document.getElementById('success-message');
|
||||
|
||||
// Eligibility Logic
|
||||
if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
|
||||
checkBtn.addEventListener('click', () => {
|
||||
// Get the selected values safely
|
||||
const isBSECENode = document.querySelector('input[name="isBSECE"]:checked') as HTMLInputElement;
|
||||
const isGraduatingNode = document.querySelector('input[name="isGraduating"]:checked') as HTMLInputElement;
|
||||
|
||||
if (!isBSECENode || !isGraduatingNode) {
|
||||
alert("Please answer both eligibility questions to proceed.");
|
||||
return;
|
||||
}
|
||||
|
||||
const isBSECE = isBSECENode.value;
|
||||
const isGraduating = isGraduatingNode.value;
|
||||
|
||||
// Hide the eligibility card
|
||||
eligibilitySection.style.display = 'none';
|
||||
|
||||
// Check criteria: Must be ECE (yes) and NOT graduating (no)
|
||||
if (isBSECE === 'yes' && isGraduating === 'no') {
|
||||
mainForm.style.display = 'block'; // Show the form!
|
||||
} else {
|
||||
ineligibleMsg.style.display = 'block'; // Show rejection message
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Form Submission Logic
|
||||
if (mainForm) {
|
||||
mainForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault(); // Stop normal page reload
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.style.display = 'none';
|
||||
if(loadingMsg) loadingMsg.style.display = 'block';
|
||||
|
||||
// Send the data to the Google Script silently
|
||||
fetch(mainForm.action, {
|
||||
method: 'POST',
|
||||
body: new FormData(mainForm)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.result === 'success') {
|
||||
mainForm.style.display = 'none'; // Hide form
|
||||
if(successMsg) successMsg.style.display = 'block'; // Show success message
|
||||
} else {
|
||||
alert('There was an error submitting your form. Please try again.');
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.style.display = 'block';
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('A network error occurred. Please try again.');
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.style.display = 'block';
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,160 @@
|
||||
@import './variables.scss';
|
||||
|
||||
.registration-section {
|
||||
padding-block: 8rem;
|
||||
padding-inline: 1rem;
|
||||
min-height: 100vh;
|
||||
background-color: #f9fafb; /* Light background to make the white form pop */
|
||||
|
||||
.form-container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
margin-bottom: 2.5rem;
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #4a4a4a;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.privacy-notice {
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
/* Eligibility Card */
|
||||
.eligibility-card {
|
||||
background-color: $background-accent;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid $secondary;
|
||||
|
||||
h3 { margin-bottom: 1rem; color: $dark; }
|
||||
|
||||
.radio-group {
|
||||
margin-bottom: 1.5rem;
|
||||
p { margin-bottom: 0.5rem; font-weight: 600; }
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 1.5rem;
|
||||
cursor: pointer;
|
||||
input { margin-right: 0.5rem; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden Utilities */
|
||||
.hidden-message {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background-color: #fef2f2;
|
||||
border: 1px solid #fca5a5;
|
||||
border-radius: 0.5rem;
|
||||
p { color: #991b1b; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
|
||||
&.success {
|
||||
background-color: #f0fdf4;
|
||||
border-color: #86efac;
|
||||
h3 { color: #166534; font-size: 1.5rem; margin-bottom: 1rem; }
|
||||
p { color: #15803d; }
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-form { display: none; }
|
||||
|
||||
/* Main Form Styling */
|
||||
form {
|
||||
margin-top: 2rem;
|
||||
h3 {
|
||||
color: $primary;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid $background-accent;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: $dark;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="email"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary;
|
||||
box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
textarea { resize: vertical; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.submit-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($primary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Adjustments */
|
||||
@media screen and (max-width: 768px) {
|
||||
.registration-section {
|
||||
padding-top: 6rem;
|
||||
.form-container {
|
||||
padding: 1.5rem;
|
||||
h1 { font-size: 2rem; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user