HTML/CSS + Tailwind

Internship
Application Form

Library Application Forms Internship Application Form

Internship Application Form

Apply for internship positions at our company.

Form Preview

Internship Application Form

Apply for internship positions at our company.

Personal information

Education

Internship 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="internship-form">
  <h3>Internship Application Form</h3>
  <p class="form-description">
    Apply for internship positions at our company.
  </p>

  <h4>Personal 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="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
  </div>

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

  <h4>Education</h4>

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

  <div class="form-row">
    <div class="form-group">
      <label for="major">Major:</label>
      <input type="text" id="major" name="major" placeholder="Your major" required>
    </div>
    <div class="form-group">
      <label for="graduation">Graduation:</label>
      <input type="text" id="graduation" name="graduation" placeholder="MM/YYYY" required>
    </div>
  </div>

  <h4>Internship details</h4>

  <div class="form-group">
    <label for="position">Position:</label>
    <select id="position" name="position" required>
      <option value="">Select a position</option>
      <option value="software-engineering">Software Engineering</option>
      <option value="product-management">Product Management</option>
      <option value="design">Design</option>
      <option value="marketing">Marketing</option>
      <option value="data-science">Data Science</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" class="checkbox-label">Full-Time</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="parttime" name="availability[]" value="part-time">
        <label for="parttime" class="checkbox-label">Part-Time</label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="start_date">Start Date:</label>
    <input type="text" id="start_date" name="start_date" placeholder="MM/DD/YYYY" required>
  </div>

  <div class="form-group">
    <label for="motivation">Why are you interested in this internship?</label>
    <textarea id="motivation" name="motivation" placeholder="Write your motivation" required></textarea>
  </div>

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

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

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

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

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

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

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

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

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

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

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

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

.internship-form .checkbox-group {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

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

.internship-form .checkbox-item input {
  width: auto;
  margin: 0;
}

.internship-form .checkbox-item label {
  margin: 0;
  cursor: pointer;
}

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

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

@media (max-width: 768px) {
  .internship-form {
    padding: 1.5rem;
  }
  
  .internship-form .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .internship-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>

<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">
    Internship Application Form
  </h3>
  
  <p class="text-sm text-[#888888] mb-6 leading-relaxed">
    Apply for internship positions at our company.
  </p>

  <h4 class="text-lg font-semibold text-[#00ff88] mb-4 pb-2 border-b border-dashed border-[#2a2a2a]">
    Personal 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">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">Phone:</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]">
    Education
  </h4>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">University:</label>
    <input type="text" name="university"
           placeholder="Name of university"
           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">Major:</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>
    <div class="flex-1">
      <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Graduation:</label>
      <input type="text" name="graduation" placeholder="MM/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>

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

  <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-engineering">Software Engineering</option>
      <option value="product-management">Product Management</option>
      <option value="design">Design</option>
      <option value="marketing">Marketing</option>
      <option value="data-science">Data Science</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-4">
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="availability[]" value="full-time">
        <span class="text-sm text-[#e6edf3]">Full-Time</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="availability[]" value="part-time">
        <span class="text-sm text-[#e6edf3]">Part-Time</span>
      </label>
    </div>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Start Date:</label>
    <input type="text" name="start_date"
           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-6">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Why are you interested in this internship?</label>
    <textarea name="motivation"
              placeholder="Write your motivation"
              rows="4"
              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 Internship 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 internship 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 →

Vendor Application Form

Register as a vendor or supplier

View form →