🔥

Add a Contact Form to Svelte

Svelte's reactive simplicity pairs perfectly with Flowqen's minimal API. No stores, no boilerplate — just a fetch call.

1

Create a form on Flowqen

Go to flowqen.com/create and create a form in 10 seconds. No account needed. Copy the form ID from the URL.

2

Add the HTML form

The simplest approach — just paste this HTML into your Svelte 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>
3

Svelte-specific code

Use Svelte's native patterns for a better developer experience:

<script>
  let status = "";

  async function handleSubmit(e) {
    const data = new FormData(e.target);
    const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
      method: "POST",
      body: data,
    });
    status = res.ok ? "Sent!" : "Error";
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required />
  {#if status}<p>{status}</p>{/if}
  <button type="submit">Send</button>
</form>
4

Done — check your dashboard

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.

What you get with every Flowqen form

Spam filtering (honeypot + Turnstile)
Email notifications
File upload support
Real-time analytics dashboard
22+ integrations (Slack, Discord, Notion, etc.)
Lead tracking pipeline
Auto-reply emails
Custom redirect URLs
CORS support for AJAX
API access (REST)
Create a form free →Read the full docs