Get the next one in your inbox.
One email when we publish something worth reading. No spam — appropriately enough, we'd know.
A fully styled Tailwind CSS contact form wired to a live FormBridge endpoint, plus a small fetch handler so submissions don't leave the page.
Get an instant summary, key takeaways, action items, and answers to your questions about this article.
Style a plain HTML form with Tailwind classes, set its action (or a fetch call's URL) to your FormBridge endpoint, and submissions are received, spam-checked, and emailed automatically — no server code needed.
Skip the ceremony: in the FormBridge dashboard, click + Create → Form Endpoint, name it something like contact-form, and copy its endpoint URL. For this tutorial we'll use https://app.formbridge.ai/api/forms/fb_8h2k9p — that's the only "backend" this form needs.
Tailwind handles the look; a plain <form> with a POST method and that endpoint as its action handles the submission. Field names can be anything — FormBridge doesn't require a special prefix — but hyphenated names like full-name show up nicely formatted in your inbox and become merge tags for notification and autoresponder emails.
<form id="contact-form" action="https://app.formbridge.ai/api/forms/fb_8h2k9p" method="POST"
class="mx-auto max-w-md space-y-4 rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
<div>
<label class="block text-sm font-medium text-slate-700">Full name</label>
<input name="full-name" required
class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">Email</label>
<input type="email" name="email" required
class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">Message</label>
<textarea name="message" rows="4" required
class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none"></textarea>
</div>
<button type="submit" class="w-full rounded-lg bg-slate-900 py-2.5 text-sm font-semibold text-white hover:bg-slate-800">
Send message
</button>
<p id="form-status" class="text-sm text-slate-500"></p>
</form>
A plain HTML submission works fine, but it navigates the browser to FormBridge's raw JSON response, which is a poor experience on a marketing site. A small fetch handler keeps visitors on the page:
<script>
const form = document.getElementById('contact-form');
const status = document.getElementById('form-status');
form.addEventListener('submit', async (e) => {
e.preventDefault();
status.textContent = 'Sending...';
const res = await fetch(form.action, {
method: 'POST',
headers: { Accept: 'application/json' },
body: new FormData(form),
});
if (res.ok) {
status.textContent = "Thanks — we'll get back to you shortly.";
form.reset();
} else {
status.textContent = 'Something went wrong. Please try again.';
}
});
</script>
Everything past the POST — spam filtering, who gets notified, whether replies come from your own address — is configured in the dashboard, not in code. Add a honeypot field or reCAPTCHA under Form → Settings → Spam Protection, set a recipient list under Email Settings → Notifications, and the same form keeps working with zero markup changes.
No. Tailwind only handles styling classes; FormBridge just needs a plain HTML form action or a fetch() call pointed at your endpoint URL — there's no FormBridge package to install.
Yes — intercept the form's submit event, call fetch() with the form's action URL and a FormData body, and show a success message based on the response instead of letting the browser navigate to the raw JSON response.
One email when we publish something worth reading. No spam — appropriately enough, we'd know.