Back to Form
Form Section

Admission Form Section

#Form Section#Best Form#Form#Contact Form

Live preview

Source code

html
<!-- Admission Form Section -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="card border-0 shadow rounded-4 overflow-hidden">
          <div class="bg-primary py-3 px-4">
            <h4 class="text-white mb-0 h5"><i class="bi bi-file-earmark-text me-2"></i>Online Admission Form</h4>
          </div>
          <div class="card-body p-4 p-md-5">
            <form id="admissionForm">
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label fw-semibold">Full Name</label>
                  <input type="text" class="form-control" placeholder="Type your Name" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold">Phone Number</label>
                  <input type="tel" class="form-control" placeholder="017xxxxxxxx" required>
                </div>
                <div class="col-12">
                  <label class="form-label fw-semibold">Email Address</label>
                  <input type="email" class="form-control" placeholder="yourname@example.com" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold">Select Trade</label>
                  <select class="form-select" required>
                    <option value="" selected disabled>Choose Trade...</option>
                    <option>Computer Technology</option>
                    <option>Electrical Works</option>
                    <option>Mechanical Trade</option>
                    <option>Automobile Engineering</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold">Gender</label>
                  <div class="mt-2">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked>
                      <label class="form-check-label" for="male">Male</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="gender" id="female" value="female">
                      <label class="form-check-label" for="female">Female</label>
                    </div>
                  </div>
                </div>
                <div class="col-12 mt-4 text-center">
                  <button type="submit" class="btn btn-primary px-5 py-2 rounded-pill fw-bold">Submit Application</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
  .form-control:focus,
  .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
  }

</style>

More designs in this section