Gatsby sites are static by default — Flowqen adds a dynamic form backend without needing Gatsby Functions or a server.
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 Gatsby project:
<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>Use Gatsby's native patterns for a better developer experience:
import React, { useState } from "react";
export default function ContactForm() {
const [status, setStatus] = useState("");
async function handleSubmit(e) {
e.preventDefault();
const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
method: "POST",
body: new FormData(e.target),
});
setStatus(res.ok ? "Sent!" : "Error — please try again.");
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
{status && <p>{status}</p>}
<button type="submit">Send</button>
</form>
);
}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.