Added registration form page
This commit is contained in:
Kent Joseph T. Palima
+182
-2
@@ -1,10 +1,190 @@
|
|||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import '../styles/apply.scss';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Registration | UP IECEP">
|
<Layout title="Registration | UP IECEP">
|
||||||
<section class="registration-section">
|
<section class="registration-section">
|
||||||
<h1>Registration Portal</h1>
|
<div class="form-container">
|
||||||
<strong>Coming soon</strong>
|
<h1>Registration Portal</h1>
|
||||||
|
|
||||||
|
<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>
|
</section>
|
||||||
</Layout>
|
</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