apply form

This tailwind example is contributed by Anonymous, on 17-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 10

Fork Fullscreen

@if (showDetailsModal && selectedApplication) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-xl">

<div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-800">
          Application Details
        </h2>

<button
          type="button"
          class="text-2xl text-gray-500 hover:text-gray-800"
          (click)="closeDetailsModal()">
          &times;
        </button>
      </div>

<div>
          <p class="text-sm text-gray-500">Application ID</p>
          <p class="font-medium">{{ selectedApplication.id || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Child Name</p>
          <p class="font-medium">{{ selectedApplication.childName || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Grade Level</p>
          <p class="font-medium">{{ selectedApplication.gradeLevel || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Section</p>
          <p class="font-medium">{{ selectedApplication.section || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Submitted Date</p>
          <p class="font-medium">
            {{ selectedApplication.submittedDate
              ? (selectedApplication.submittedDate | date:'dd MMM yyyy')
              : 'N/A' }}
          </p>
        </div>

<div>
          <p class="text-sm text-gray-500">Application Status</p>
          <p class="font-medium">{{ selectedApplication.status || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Admission Fee</p>
          <p class="font-medium">
            {{ selectedApplication.feeAmount != null
              ? ('₹' + selectedApplication.feeAmount)
              : 'N/A' }}
          </p>
        </div>

<div>
          <p class="text-sm text-gray-500">Fee Due Date</p>
          <p class="font-medium">
            {{ selectedApplication.feeDueDate
              ? (selectedApplication.feeDueDate | date:'dd MMM yyyy')
              : 'N/A' }}
          </p>
        </div>

</div>

<div class="mt-6 flex justify-end">
        <button
          type="button"
          class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700"
          (click)="closeDetailsModal()">
          Close
        </button>
      </div>

</div>
  </div>
}

<!-- admissionForm = {
  childFullName: '',
  childDateOfBirth: '',
  childGender: '',
  previousSchoolName: '',
  transportRequired: false,
  declarationAccepted: false
};

birthCertificate: File | null = null;
birthCertificateError = '';

openAdmissionForm(schoolClass: any) {
  this.selectedClass = schoolClass;
  this.admissionForm = {
    childFullName: '',
    childDateOfBirth: '',
    childGender: '',
    previousSchoolName: '',
    transportRequired: false,
    declarationAccepted: false
  };
  this.birthCertificate = null;
  this.birthCertificateError = '';
  this.showAdmissionModal = true;
}

onBirthCertificateSelected(event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0] ?? null;

this.birthCertificate = null;
  this.birthCertificateError = '';

if (!file) return;

const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg'];
  const validExtension = /\.(pdf|jpe?g)$/i.test(file.name);

if (!allowedTypes.includes(file.type) || !validExtension) {
    this.birthCertificateError = 'Only PDF and JPG files are allowed.';
    input.value = '';
    return;
  }

if (file.size > 5 * 1024 * 1024) {
    this.birthCertificateError = 'File size must not exceed 5 MB.';
    input.value = '';
    return;
  }

this.birthCertificate = file;
}

submitAdmissionForm() {
  const namePattern = /^[A-Za-z ]+$/;

if (!namePattern.test(this.admissionForm.childFullName.trim())) {
    alert('Child name must contain alphabets and spaces only.');
    return;
  }

if (!this.birthCertificate) {
    this.birthCertificateError = 'Birth certificate is required.';
    return;
  }

if (!this.admissionForm.declarationAccepted) {
    alert('Please accept the declaration.');
    return;
  }

// Connect this form to the admission API.
  // Send form fields and birthCertificate using FormData.
  alert('Form validated. Connect the admission API to submit.');
} -->

//view my application
@if (showPaymentModal && selectedPaymentApplication) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
      <h2 class="text-xl font-bold text-gray-800">
        Admission Fee Payment
      </h2>

<div class="mt-5 space-y-4 rounded-lg bg-gray-50 p-4">
        <div class="flex justify-between">
          <span class="text-gray-500">Application ID</span>
          <span class="font-medium">{{ selectedPaymentApplication.id }}</span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Child Name</span>
          <span class="font-medium">{{ selectedPaymentApplication.childName }}</span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Admission Fee</span>
          <span class="font-bold text-blue-700">
            ₹{{ selectedPaymentApplication.feeAmount }}
          </span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Due Date</span>
          <span class="font-medium">
            {{ selectedPaymentApplication.feeDueDate
              ? (selectedPaymentApplication.feeDueDate | date:'dd MMM yyyy')
              : 'N/A' }}
          </span>
        </div>
      </div>

<div class="mt-6 flex justify-end gap-3">
        <button
          type="button"
          class="rounded-lg border border-gray-300 px-4 py-2 text-sm"
          (click)="closePaymentModal()"
        >
          Cancel
        </button>

<button
          type="button"
          class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
          (click)="payAdmissionFee()"
        >
          Pay Now
        </button>
      </div>
    </div>
  </div>
}

--view my application
@if (showDetailsModal && selectedApplication) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-xl">