Copy a ready-made Bootstrap 5 form with proper form groups, validation classes, and Flowqen backend. Works in any Bootstrap 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 Bootstrap project:
<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST" class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required />
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required />
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>Use Bootstrap's native patterns for a better developer experience:
<!-- Bootstrap 5 + AJAX submission -->
<form id="contact" class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required />
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required />
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
<div id="status" class="mt-3"></div>
</form>
<script>
document.getElementById("contact").addEventListener("submit", async (e) => {
e.preventDefault();
if (!e.target.checkValidity()) { e.target.classList.add("was-validated"); return; }
const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", { method: "POST", body: new FormData(e.target) });
document.getElementById("status").innerHTML = res.ok
? '<div class="alert alert-success">Sent successfully!</div>'
: '<div class="alert alert-danger">Error — please try again.</div>';
if (res.ok) e.target.reset();
});
</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.