Styled Tailwind CSS Contact Form Template + Endpoint

<!-- SounnyForms + Tailwind CSS Contact Form -->
<form 
  action="https://forms.sounny.com/f/YOUR_EMAIL@DOMAIN.COM" 
  method="POST" 
  class="max-w-xl mx-auto bg-white p-8 rounded-2xl shadow-lg border border-slate-100 space-y-6"
>
  <div>
    <h3 class="text-2xl font-bold text-slate-900 tracking-tight">Get in Touch</h3>
    <p class="text-sm text-slate-500 mt-1">Fill out the form below and we'll reply within 24 hours.</p>
  </div>

  <!-- Honeypot anti-spam (invisible to human visitors) -->
  <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off" />

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
      <label class="block text-xs font-semibold uppercase tracking-wider text-slate-700 mb-1">First Name</label>
      <input 
        type="text" 
        name="firstName" 
        required 
        placeholder="Jane" 
        class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition"
      />
    </div>
    <div>
      <label class="block text-xs font-semibold uppercase tracking-wider text-slate-700 mb-1">Last Name</label>
      <input 
        type="text" 
        name="lastName" 
        required 
        placeholder="Doe" 
        class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition"
      />
    </div>
  </div>

  <div>
    <label class="block text-xs font-semibold uppercase tracking-wider text-slate-700 mb-1">Email Address</label>
    <input 
      type="email" 
      name="email" 
      required 
      placeholder="jane@example.com" 
      class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition"
    />
  </div>

  <div>
    <label class="block text-xs font-semibold uppercase tracking-wider text-slate-700 mb-1">Your Message</label>
    <textarea 
      name="message" 
      rows="4" 
      required 
      placeholder="How can we help your team?" 
      class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition"
    ></textarea>
  </div>

  <button 
    type="submit" 
    class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-xl transition duration-150 ease-in-out shadow-md shadow-orange-500/20 active:scale-[0.99]"
  >
    Send Inquiry
  </button>
</form>