Library Application Forms Vendor Application Form

Vendor Application Form

Register your business as a vendor or supplier for our company.

Form Preview

Company information

Contact person

Business address

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="vendor-form">
  <h3>Vendor Application Form</h3>
  <p class="form-description">
    Register your business as a vendor or supplier for our company.
  </p>

  <h4>Company information</h4>

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

  <div class="form-group">
    <label for="business_type">Business Type:</label>
    <select id="business_type" name="business_type" required>
      <option value="">Select business type</option>
      <option value="sole-proprietorship">Sole Proprietorship</option>
      <option value="partnership">Partnership</option>
      <option value="llc">LLC</option>
      <option value="corporation">Corporation</option>
      <option value="non-profit">Non-Profit</option>
    </select>
  </div>

  <div class="form-group">
    <label for="tax_id">Tax ID / EIN:</label>
    <input type="text" id="tax_id" name="tax_id" 
           placeholder="XX-XXXXXXX" required>
  </div>

  <h4>Contact person</h4>

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

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

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

  <h4>Business 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>
  </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>

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

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

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

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

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

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

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

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

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

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

.vendor-form select {
  cursor: pointer;
}

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

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

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

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

@media (max-width: 768px) {
  .vendor-form {
    padding: 1.5rem;
  }
  
  .vendor-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="vendor-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">
    Vendor Application Form
  </h3>
  
  <p class="text-sm text-[#888888] mb-6 leading-relaxed">
    Register your business as a vendor or supplier for our company.
  </p>

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

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Company Name:</label>
    <input type="text" name="company_name"
           placeholder="Enter your company 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">Business Type:</label>
    <select name="business_type"
            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 business type</option>
      <option value="sole-proprietorship">Sole Proprietorship</option>
      <option value="partnership">Partnership</option>
      <option value="llc">LLC</option>
      <option value="corporation">Corporation</option>
      <option value="non-profit">Non-Profit</option>
    </select>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Tax ID / EIN:</label>
    <input type="text" name="tax_id"
           placeholder="XX-XXXXXXX"
           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]">
    Contact person
  </h4>

  <div class="mb-5">
    <label class="block text-sm font-semibold text-[#e6edf3] mb-2">Full Name:</label>
    <input type="text" name="contact_name"
           placeholder="Enter contact 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="contact_email"
           placeholder="Enter email address"
           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="contact_phone"
           placeholder="Enter 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]">
    Business address
  </h4>

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

  <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 Vendor 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.