Bootstrap Contact Form with Character Counter — Free Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscontact-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-3">Send us a message</h5>
      <form id="bscontactForm" novalidate>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Email</label>
          <input type="email" class="form-control" id="bscontactEmail" required>
        </div>
        <div class="mb-1">
          <label class="form-label small fw-semibold d-flex justify-content-between">
            <span>Message</span>
            <span class="text-muted" id="bscontactCount">0 / 280</span>
          </label>
          <textarea class="form-control" id="bscontactMessage" rows="4" maxlength="280" required></textarea>
        </div>
        <p class="small text-danger mb-3 d-none" id="bscontactWarn">Keep it under 280 characters.</p>
        <button type="submit" class="btn btn-dark w-100 fw-bold">Send message</button>
        <p class="small text-success mt-2 mb-0 d-none" id="bscontactSuccess">Message sent — we'll reply within a day.</p>
      </form>
    </div>
  </div>
</div>

.bscontact-card { width: 400px; border: 1px solid #eceef1; border-radius: 14px; }

const form = document.getElementById('bscontactForm');
const email = document.getElementById('bscontactEmail');
const message = document.getElementById('bscontactMessage');
const countEl = document.getElementById('bscontactCount');
const warn = document.getElementById('bscontactWarn');
const success = document.getElementById('bscontactSuccess');
const LIMIT = 280;

message.addEventListener('input', () => {
  const len = message.value.length;
  countEl.textContent = len + ' / ' + LIMIT;
  const near = len >= LIMIT - 20;
  countEl.classList.toggle('text-danger', near);
  countEl.classList.toggle('text-muted', !near);
  warn.classList.toggle('d-none', len < LIMIT);
});

form.addEventListener('submit', e => {
  e.preventDefault();
  success.classList.add('d-none');
  email.classList.toggle('is-invalid', !email.checkValidity());
  message.classList.toggle('is-invalid', !message.value.trim());

  if (!email.checkValidity() || !message.value.trim()) return;

  success.classList.remove('d-none');
  form.reset();
  countEl.textContent = '0 / ' + LIMIT;
  countEl.classList.remove('text-danger');
  countEl.classList.add('text-muted');
  [email, message].forEach(f => f.classList.remove('is-invalid'));
});