Form Integration

Svelte contact form that posts with fetch

Drop a .svelte component into SvelteKit or a Vite Svelte app. Formbold takes the POST, stores the entry and emails you. Free covers 250 submissions a month and 10 forms.

Contact Form for Svelte

What does a Svelte contact form look like?

The homepage example uses a plain HTML action. This one uses fetch with Accept: application/json and a loading state, which suits SvelteKit pages better. Replace FORM_ID. On Svelte 5 you can write onsubmit instead of on:submit.

svelte.js
<!-- src/lib/ContactForm.svelte (works in SvelteKit too) -->
<script>
  let loading = false;
  let status = "";

  async function handleSubmit(event) {
    event.preventDefault();
    loading = true;

    const payload = Object.fromEntries(new FormData(event.currentTarget));

    try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
      });
      const result = await response.json();

      if (response.ok) {
        status = result.message || "Message sent.";
        event.currentTarget.reset();
      } else {
        status = result.message || "Something went wrong.";
      }
    } catch {
      status = "Could not reach Formbold.";
    } finally {
      loading = false;
      setTimeout(() => (status = ""), 4000);
    }
  }
</script>

<form on:submit={handleSubmit}>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Subject
    <input type="text" name="subject" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="5" required></textarea>
  </label>
  <button type="submit" disabled={loading}>
    {loading ? "Sending..." : "Send message"}
  </button>
  {#if status}
    <p>{status}</p>
  {/if}
</form>
How it works

How do I connect SvelteKit to Formbold?

Create the form, paste the endpoint, submit once from the Kit app.

1

Create the form

In the Formbold dashboard, create a form and copy https://formbold.com/s/FORM_ID from Form Setup.

2

Add the component

Save ContactForm.svelte under src/lib or a route. Give every control a name attribute so FormData keys stay readable.

3

Test in npm run dev

Submit once, then check Submissions and your inbox. No +page.server.js handler is required for this path.

Features

What Formbold covers for a Svelte app

Kit can run form actions, but you still need storage, email and spam tools for production contact pages.

No +page.server required

Browser fetch to Formbold is enough for a contact page. Keep server actions for app-specific logic.

Spam filter in the dashboard

Basic Spam Filter is a Settings toggle. Add Custom reCAPTCHA when traffic gets noisy.

File size limits on paid plans

Starter and up accept uploads at 10 MB, 25 MB or 50 MB by plan. Send FormData without setting Content-Type.

Integrations from Starter

Slack, Telegram, Notion, Sheets, webhooks and more sit on the Integrations tab for Starter and higher.

FAQs

Svelte questions after the first deploy

Things people hit once the form is on a Kit route.

You can, and post from the server action to Formbold if you want. The fetch example keeps everything in the component and matches how the homepage Ajax tab works.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs