HTML/CSS + Tailwind

Scholarship
Application Form

Library Application Forms Scholarship Application Form

Scholarship Application Form

Apply for educational scholarships and financial aid opportunities.

Form Preview

Scholarship Application Form

Apply for educational scholarships and financial aid opportunities.

Student information

Academic information

Scholarship details

This is a preview. The actual form will be fully interactive.

Get the code

Copy and paste this code into your website. Don't forget to replace your-endpoint with your actual 000form endpoint URL.

HTML Complete HTML form with 000form endpoint 
<form action="https://000form.com/f/your-endpoint" method="POST" class="scholarship-form">
  <h3>Scholarship Application Form</h3>
  <p class="form-description">
    Apply for educational scholarships and financial aid opportunities.
  </p>

  <h4>Student information</h4>

  <div class="form-group">
    <label for="full_name">Full Name</label>
    <input type="text" id="full_name" name="full_name" placeholder="Enter your full name" required>
  </div>

  <div class="form-group">
    <label for="dob">Date of Birth</label>
    <input type="text" id="dob" name="dob" placeholder="MM/DD/YYYY" required>
  </div>

  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
  </div>

  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
  </div>

  <h4>Academic information</h4>

  <div class="form-group">
    <label for="institution">School/University</label>
    <input type="text" id="institution" name="institution" placeholder="Name of institution" required>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="graduation_year">Graduation Year</label>
      <input type="text" id="graduation_year" name="graduation_year" placeholder="YYYY" required>
    </div>
    <div class="form-group">
      <label for="gpa">GPA</label>
      <input type="text" id="gpa" name="gpa" placeholder="0.0 - 4.0" required>
    </div>
  </div>

  <div class="form-group">
    <label for="major">Major/Field of Study</label>
    <input type="text" id="major" name="major" placeholder="Your major" required>
  </div>

  <h4>Scholarship details</h4>

  <div class="form-group">
    <label for="scholarship_name">Scholarship Name</label>
    <input type="text" id="scholarship_name" name="scholarship_name" placeholder="Name of scholarship" required>
  </div>

  <div class="form-group">
    <label for="amount">Amount Requested</label>
    <input type="text" id="amount" name="amount" placeholder="$" required>
  </div>

  <div class="form-group">
    <label for="statement">Personal Statement</label>
    <textarea id="statement" name="statement" placeholder="Write your personal statement here..." required></textarea>
  </div>

  <button type="submit" class="submit-btn">Submit Scholarship Application</button>
</form>
CSS Styling for the scholarship application form 
.scholarship-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
}

.scholarship-form h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.scholarship-form .form-description {
  font-size: 0.9rem;
  color: #888888;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.scholarship-form h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #00ff88;
  margin: 1.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #2a2a2a;
}

.scholarship-form .form-group {
  margin-bottom: 1.25rem;
}

.scholarship-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 0.5rem;
}

.scholarship-form input[type="text"],
.scholarship-form input[type="email"],
.scholarship-form input[type="tel"],
.scholarship-form select,
.scholarship-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #111111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  color: #fafafa;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  font-family: inherit;
}

.scholarship-form textarea {
  min-height: 120px;
  resize: vertical;
}

.scholarship-form input:focus,
.scholarship-form select:focus,
.scholarship-form textarea:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15);
}

.scholarship-form input::placeholder,
.scholarship-form textarea::placeholder {
  color: #555555;
}

.scholarship-form .form-row {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.scholarship-form .form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.scholarship-form .submit-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #00ff88;
  border: none;
  border-radius: 8px;
  color: #050505;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.scholarship-form .submit-btn:hover {
  background: #fafafa;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.15);
}

@media (max-width: 768px) {
  .scholarship-form {
    padding: 1.5rem;
  }
  
  .scholarship-form .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
}
Tailwind CSS Tailwind version with external CSS file 
<!-- Add Tailwind CSS CDN to your <head> -->
<script src="https://cdn.tailwindcss.com"></script>

<form action="https://000form.com/f/your-endpoint" 
      method="POST"
      class="max-w-2xl mx-auto p-8 bg-[#0d0d0d] border border-[#1a1a1a] rounded-xl font-sans">
  
  <h3 class="text-2xl font-semibold text-[#fafafa] mb-2 tracking-tight">
    Scholarship Application Form
  </h3>
  
  <p class="text-sm text-[#888888] mb-6 leading-relaxed">
    Apply for educational scholarships and financial aid opportunities.
  </p>

  <h4 class="text-lg font-semibold text-[#00ff88] mb-4 pb-2 border-b border-dashed border-[#2a2a2a]">
    Student information
  </h4>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Full Name</label>
    <input type="text" name="full_name"
           placeholder="Enter your full name"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Date of Birth</label>
    <input type="text" name="dob"
           placeholder="MM/DD/YYYY"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Email Address</label>
    <input type="email" name="email"
           placeholder="Enter your email"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Phone Number</label>
    <input type="tel" name="phone"
           placeholder="Enter your phone number"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <h4 class="text-lg font-semibold text-[#00ff88] mt-6 mb-4 pb-2 border-b border-dashed border-[#2a2a2a]">
    Academic information
  </h4>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">School/University</label>
    <input type="text" name="institution"
           placeholder="Name of institution"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="flex flex-col sm:flex-row gap-4 mb-5 mt-2">
    <div class="flex-1">
      <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Graduation Year</label>
      <input type="text" name="graduation_year" placeholder="YYYY"
             class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
             required>
    </div>
    <div class="flex-1">
      <label class="block text-sm font-semibold text-[#e6edf3] mb-2">GPA</label>
      <input type="text" name="gpa" placeholder="0.0 - 4.0"
             class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
             required>
    </div>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Major/Field of Study</label>
    <input type="text" name="major"
           placeholder="Your major"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <h4 class="text-lg font-semibold text-[#00ff88] mt-6 mb-4 pb-2 border-b border-dashed border-[#2a2a2a]">
    Scholarship details
  </h4>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Scholarship Name</label>
    <input type="text" name="scholarship_name"
           placeholder="Name of scholarship"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Amount Requested</label>
    <input type="text" name="amount"
           placeholder="$"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all"
           required>
  </div>

  <div class="mb-6">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Personal Statement</label>
    <textarea name="statement"
              placeholder="Write your personal statement here..."
              rows="5"
              class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all resize-y"
              required></textarea>
  </div>

  <button type="submit"
          class="w-full py-3 px-6 bg-[#00ff88] text-[#050505] font-semibold rounded-lg hover:bg-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-[#00ff88]/20">
    Submit Scholarship Application
  </button>
</form>

How to use this form

  1. Copy the HTML code and paste it into your website where you want the form to appear.
  2. Copy the CSS code and add it to your stylesheet, or use the Tailwind version if you're using Tailwind CSS.
  3. Replace your-endpoint in the form action with your actual 000form endpoint URL.
  4. That's it! Your form will start receiving scholarship applications directly to your inbox.

Related Application Forms

Job Application Form

Minimal job application form

View form →

Rental Application Form

Property rental application

View form →

Internship Application Form

Student internship application

View form →