Code Examples

Ready-to-use code snippets for every framework. Copy, replace YOUR_FORM_ID, and you're live.

Basic HTML Form

The simplest approach — works everywhere.

<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>

AJAX / Fetch

Submit without page reload using the Fetch API.

const form = document.getElementById("myForm");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(form);
  const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
    method: "POST",
    body: data,
  });
  const json = await res.json();
  alert(json.success ? "Sent!" : "Error: " + json.error);
});

React / Next.js

React component with state and async submission.

export default function ContactForm() {
  const [status, setStatus] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
      method: "POST",
      body: new FormData(e.currentTarget),
    });
    setStatus(res.ok ? "sent" : "error");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send"}
      </button>
      {status === "sent" && <p>Thank you!</p>}
    </form>
  );
}

Vue 3 (Composition API)

Vue component with ref-based form handling.

<script setup>
import { ref } from "vue";

const status = ref("");

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

<template>
  <form @submit.prevent="handleSubmit">
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required />
    <button type="submit">Send</button>
    <p v-if="status === 'sent'">Thank you!</p>
  </form>
</template>

Svelte

Svelte component with reactive status.

<script>
  let status = "";

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

<form on:submit|preventDefault={handleSubmit}>
  <input name="name" placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required />
  <button type="submit">
    {status === "sending" ? "Sending..." : "Send"}
  </button>
  {#if status === "sent"}<p>Thank you!</p>{/if}
</form>

cURL (API)

Submit via command line or server-side scripts.

curl -X POST https://flowqen.com/api/f/YOUR_FORM_ID \
  -H "Content-Type: application/json" \
  -d '{"name": "Jane", "email": "jane@example.com", "message": "Hello!"}'
Create a form free →Browse all platformsAPI reference