/* Ensure Inter font is applied */
body {
font-family: ‘Inter’, sans-serif;
}
.submit-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
background: linear-gradient(to right, #6366f1, #8b5cf6); /* Indigo to Violet */
color: white;
border: none;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.submit-button:hover {
background: linear-gradient(to right, #4f46e5, #7c3aed); /* Darker shades on hover */
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
transform: translateY(-2px);
}
.submit-button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}
.loading-spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #fff;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Modal specific styles for show/hide */
#customModal.show {
opacity: 1;
visibility: visible;
}
#customModal.show > div { /* Target modal-content */
transform: translateY(0);
}
/* Basic form element styling (can be overridden by Tailwind) */
input[type=”text”], input[type=”tel”], select {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.2s;
}
input[type=”text”]:focus, input[type=”tel”]:focus, select:focus {
outline: none;
border-color: #6366f1; /* Indigo 500 */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
label {
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
display: block;
}
.error-message {
color: #ef4444; /* Red 500 */
font-size: 0.875rem;
margin-top: 0.25rem;
display: none; /* Hidden by default */
}

👩‍🏫 Teacher Registration

Name:

Subject:

Grade Range:

Qualification:

WhatsApp Number:

Daily Class Timing:

Weekly Allotted Time (in hours):

Weekdays Available:

Platform:

Select
Zoom
Google Meet
Microsoft Teams
Other

// This script runs on the frontend page.
// It handles client-side validation and visual feedback.
document.addEventListener(‘DOMContentLoaded’, function() {
const form = document.getElementById(‘teacherRegistrationForm’);
const submitButton = document.getElementById(‘submitButton’);
const buttonText = document.getElementById(‘buttonText’);
const spinner = document.getElementById(‘spinner’);
const customModal = document.getElementById(‘customModal’);
const modalHeader = document.getElementById(‘modalHeader’);
const modalBody = document.getElementById(‘modalBody’);
const modalButton = document.getElementById(‘modalButton’);

// Function to show custom modal
function showModal(header, body, callback = null) {
modalHeader.textContent = header;
modalBody.textContent = body;
customModal.classList.add(‘show’);
modalButton.onclick = () => {
customModal.classList.remove(‘show’);
if (callback) callback();
};
}

// Client-side validation function
function validateForm() {
let isValid = true;
const fields = [
{ id: ‘teacher_name’, errorId: ‘nameError’, message: ‘Name is required.’ },
{ id: ‘teacher_subject’, errorId: ‘subjectError’, message: ‘Subject is required.’ },
{ id: ‘grade_range’, errorId: ‘gradeError’, message: ‘Grade Range is required.’ },
{ id: ‘qualification’, errorId: ‘qualificationError’, message: ‘Qualification is required.’ },
{ id: ‘whatsapp’, errorId: ‘whatsappError’, message: ‘Valid WhatsApp Number is required.’ },
{ id: ‘daily_timing’, errorId: ‘dailyTimingError’, message: ‘Daily Class Timing is required.’ },
{ id: ‘weekly_time’, errorId: ‘weeklyTimeError’, message: ‘Weekly Allotted Time is required.’ },
{ id: ‘weekdays’, errorId: ‘weekdaysError’, message: ‘Weekdays Available is required.’ },
{ id: ‘platform’, errorId: ‘platformError’, message: ‘Platform is required.’ }
];

fields.forEach(field => {
const input = document.getElementById(field.id);
const error = document.getElementById(field.errorId);
if (!input.value.trim()) {
error.textContent = field.message;
error.style.display = ‘block’;
isValid = false;
} else {
error.style.display = ‘none’;
}
});

// Specific validation for WhatsApp number (basic check for digits and optional +)
const whatsappInput = document.getElementById(‘whatsapp’);
const whatsappError = document.getElementById(‘whatsappError’);
const whatsappValue = whatsappInput.value.trim();
if (whatsappValue && !/^\+?[0-9\s-]+$/.test(whatsappValue)) {
whatsappError.textContent = ‘Please enter a valid WhatsApp number (digits, spaces, hyphens, and optional +).’;
whatsappError.style.display = ‘block’;
isValid = false;
} else if (!whatsappValue) { // Re-check if it’s empty after trim
whatsappError.textContent = ‘Valid WhatsApp Number is required.’;
whatsappError.style.display = ‘block’;
isValid = false;
} else {
whatsappError.style.display = ‘none’;
}

return isValid;
}

form.addEventListener(‘submit’, async function(event) {
event.preventDefault(); // Prevent default form submission initially

// Reset messages and hide spinner
buttonText.style.display = ‘inline-block’;
spinner.style.display = ‘none’;
submitButton.disabled = false;

if (!validateForm()) {
showModal(‘Validation Error’, ‘Please fill in all required fields correctly.’);
return;
}

// Show loading state
buttonText.style.display = ‘none’;
spinner.style.display = ‘block’;
submitButton.disabled = true;

// Allow the loading spinner to show for a brief moment before native submission
// This delay ensures the user sees the loading state before the page reloads.
await new Promise(resolve => setTimeout(resolve, 500));

// Now, re-submit the form programmatically. This will trigger your PHP.
form.submit();
});
});

100% purchase money back to your customer

Teachers joining list

Teachers joining list

Login

Sign up for Pe Lucky