Astro's HTML-first approach makes Flowqen integration effortless. Just use a native HTML form — no client-side JavaScript needed.
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 Astro project:
---
// src/pages/contact.astro
---
<html>
<body>
<h1>Contact Us</h1>
<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>
</body>
</html>Use Astro's native patterns for a better developer experience:
---
// For AJAX submission, use a React/Vue/Svelte island:
// src/components/ContactForm.jsx
---
import { useState } from "react";
export default function ContactForm() {
const [sent, setSent] = useState(false);
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),
});
if (res.ok) setSent(true);
}
if (sent) return <p>Thank you!</p>;
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 />
<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.