Library Application Forms Rental Application Form

Rental Application Form

Please complete this rental application form to begin the tenant screening process.

Form Preview

Personal details

Current address

Employment

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="rental-form">
  <h3>Rental Application Form</h3>
  <p class="form-description">
    Please complete this rental application form to begin the tenant screening process.
  </p>

  <h4>Personal details</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="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone" 
           placeholder="Enter your phone number" required>
  </div>

  <h4>Current address</h4>

  <div class="form-group">
    <label for="street_address">Street Address</label>
    <input type="text" id="street_address" name="street_address" 
           placeholder="Street Address" required>
    <input type="text" id="apt_suite" name="apt_suite" 
           placeholder="Apt/Suite (optional)">
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="city">City</label>
      <input type="text" id="city" name="city" placeholder="City" required>
    </div>
    <div class="form-group">
      <label for="state">State</label>
      <input type="text" id="state" name="state" placeholder="State" required>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="zip">ZIP Code</label>
      <input type="text" id="zip" name="zip" placeholder="ZIP Code" required>
    </div>
    <div class="form-group">
      <label for="country">Country</label>
      <input type="text" id="country" name="country" 
             placeholder="USA" value="USA">
    </div>
  </div>

  <h4>Employment</h4>

  <div class="form-group">
    <label for="employer">Current Employer</label>
    <input type="text" id="employer" name="employer" 
           placeholder="Employer name" required>
  </div>

  <div class="form-group">
    <label for="income">Monthly Income</label>
    <input type="text" id="income" name="income" placeholder="$" required>
  </div>

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

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

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

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

.rental-form h4:first-of-type {
  margin-top: 0;
}

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

.rental-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #e6edf3;
  margin-bottom: 0.35rem;
}

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

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

.rental-form input::placeholder {
  color: #555555;
}

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

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

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

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

@media (max-width: 768px) {
  .rental-form {
    padding: 1.5rem;
  }
  
  .rental-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>

<!-- HTML with Tailwind Classes -->
<form action="https://000form.com/f/your-endpoint" 
      method="POST"
      class="rental-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">
    Rental Application Form
  </h3>
  
  <p class="text-sm text-[#888888] mb-6 leading-relaxed">
    Please complete this rental application form to begin the tenant screening process.
  </p>

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

  <div class="mb-5">
    <label class="block text-sm font-medium text-[#e6edf3] mb-1">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 mt-2"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-medium text-[#e6edf3] mb-1">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 mt-2"
           required>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-medium text-[#e6edf3] mb-1">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 mt-2"
           required>
  </div>

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

  <div class="mb-5">
    <label class="block text-sm font-medium text-[#e6edf3] mb-1">Street Address</label>
    <input type="text" name="street_address"
           placeholder="Street Address"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all mt-2 mb-2"
           required>
    <input type="text" name="apt_suite"
           placeholder="Apt/Suite (optional)"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all mt-2">
  </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-medium text-[#e6edf3] mb-1">City</label>
      <input type="text" name="city" placeholder="City"
             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-medium text-[#e6edf3] mb-1">State</label>
      <input type="text" name="state" placeholder="State"
             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="flex flex-col sm:flex-row gap-4 mb-5">
    <div class="flex-1">
      <label class="block text-sm font-medium text-[#e6edf3] mb-1">ZIP Code</label>
      <input type="text" name="zip" placeholder="ZIP Code"
             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-medium text-[#e6edf3] mb-1">Country</label>
      <input type="text" name="country" value="USA"
             class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all">
    </div>
  </div>

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

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

  <div class="mb-6">
    <label class="block text-sm font-medium text-[#e6edf3] mb-1">Monthly Income</label>
    <input type="text" name="income"
           placeholder="$"
           class="w-full px-4 py-3 bg-[#111111] border border-[#1a1a1a] rounded-lg text-[#fafafa] placeholder-[#555555] focus:border-[#00ff88] transition-all mt-2"
           required>
  </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

Job Application Form

Minimal job application form

View form →

Vendor Application Form

Supplier registration form

View form →

Scholarship Application Form

Educational financial aid form

View form →