Library Application Forms Job Application Form

Job Application Form

Apply for an open position at our company. Please fill in all required information.

Form Preview

Full-Time
Part-Time
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="job-form">
  <h3>Job Application Form</h3>
  <p class="form-description">
    Apply for an open position at our company. Please fill in all required information.
  </p>

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

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

  <div class="form-group">
    <label for="position">Position:</label>
    <select id="position" name="position" required>
      <option value="">Select a position</option>
      <option value="software-engineer">Software Engineer</option>
      <option value="product-manager">Product Manager</option>
      <option value="designer">Designer</option>
    </select>
  </div>

  <div class="form-group">
    <label>Availability:</label>
    <div class="checkbox-group">
      <div class="checkbox-item">
        <input type="checkbox" id="fulltime" name="availability[]" value="full-time">
        <label for="fulltime">Full-Time</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="parttime" name="availability[]" value="part-time">
        <label for="parttime">Part-Time</label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="motivation">Why do you want this job?</label>
    <textarea id="motivation" name="motivation" 
              placeholder="Write your motivation" required></textarea>
  </div>

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

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

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

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

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

.job-form input[type="text"],
.job-form input[type="email"],
.job-form select,
.job-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;
}

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

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

.job-form select {
  cursor: pointer;
}

.job-form .checkbox-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.job-form .checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.job-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #00ff88;
  cursor: pointer;
}

.job-form .checkbox-item label {
  font-size: 0.85rem;
  color: #888888;
  cursor: pointer;
  margin-bottom: 0;
}

.job-form textarea {
  resize: vertical;
  min-height: 100px;
}

.job-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;
}

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

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

<!-- HTML with Tailwind Classes -->
<form action="https://000form.com/f/your-endpoint" 
      method="POST"
      class="job-form-container max-w-2xl mx-auto p-8 bg-[#0d0d0d] border border-[#1a1a1a] rounded-xl">
  
  <h3 class="text-2xl font-semibold text-[#fafafa] mb-2 tracking-tight">
    Job Application Form
  </h3>
  
  <p class="text-sm text-[#888888] mb-6 leading-relaxed">
    Apply for an open position at our company. Please fill in all required information.
  </p>

  <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 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">Email:</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">Position:</label>
    <select name="position"
            class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] focus:border-[#00ff88] transition-all cursor-pointer"
            required>
      <option value="">Select a position</option>
      <option value="software-engineer">Software Engineer</option>
      <option value="product-manager">Product Manager</option>
      <option value="designer">Designer</option>
    </select>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Availability:</label>
    <div class="flex flex-col sm:flex-row gap-6 mt-2">
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="availability[]" value="full-time"
               class="w-[18px] h-[18px] cursor-pointer">
        <span class="text-sm text-[#888888]">Full-Time</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="availability[]" value="part-time"
               class="w-[18px] h-[18px] cursor-pointer">
        <span class="text-sm text-[#888888]">Part-Time</span>
      </label>
    </div>
  </div>

  <div class="mb-6">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Why do you want this job?</label>
    <textarea name="motivation" rows="4"
              placeholder="Write your motivation"
              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 min-h-[100px]"
              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 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 submissions directly to your inbox.

Related Application Forms

Rental Application Form

Property rental application

View form →

Vendor Application Form

Supplier registration form

View form →

Scholarship Application Form

Educational financial aid form

View form →