Style your form with Tailwind CSS utility classes and submit to Flowqen. Copy this ready-made template into any project.
Go to flowqen.com/create and create a form in 10 seconds. No account needed. Copy the form ID from the URL.
The simplest approach — just paste this HTML into your Tailwind CSS project:
<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST" class="max-w-md mx-auto space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" name="name" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Message</label>
<textarea name="message" rows="4" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
</div>
<button type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">
Send Message
</button>
</form>Use Tailwind CSS's native patterns for a better developer experience:
<!-- Tailwind + AJAX version -->
<form id="contact" class="max-w-md mx-auto space-y-4">
<input type="text" name="name" placeholder="Name" required
class="block w-full rounded-lg border border-gray-300 px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none" />
<input type="email" name="email" placeholder="Email" required
class="block w-full rounded-lg border border-gray-300 px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none" />
<textarea name="message" rows="4" placeholder="Message" required
class="block w-full rounded-lg border border-gray-300 px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none"></textarea>
<button type="submit"
class="w-full bg-indigo-600 text-white py-2.5 rounded-lg hover:bg-indigo-700 font-medium transition">
Send Message
</button>
<p id="status" class="text-sm text-center hidden"></p>
</form>
<script>
document.getElementById("contact").addEventListener("submit", async (e) => {
e.preventDefault();
const btn = e.target.querySelector("button");
btn.textContent = "Sending...";
const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", { method: "POST", body: new FormData(e.target) });
const p = document.getElementById("status");
p.textContent = res.ok ? "Sent successfully!" : "Error — please try again.";
p.classList.remove("hidden");
if (res.ok) e.target.reset();
btn.textContent = "Send Message";
});
</script>Submit a test entry. Go to your Flowqen dashboard to see the submission. Set up email notifications, Slack alerts, or any of our 22+ integrations.