Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All guides

Svelte guide

Svelte contact form powered by Formserve

Add Formserve to a Svelte or SvelteKit form with a small submit handler.

No backend API route Honeypot spam trap Works with any host

Overview

What you are building

Svelte forms can post directly to Formserve with a small submit handler. Keep the component markup and use FormData so your fields map cleanly into the Formserve inbox.

Requirements

Before you start

Submit handler

Use on:submit|preventDefault in Svelte.

FormData

Read fields from the submitted form element.

Honeypot

Include _honeypot as a hidden field.

Message state

Show a success or retry message after submit.

Setup steps

Connect the form

1

Keep the component markup

Do not replace the UI generated by your app or AI tool.

2

Wire the submit event

Prevent default navigation and submit FormData with fetch.

3

Handle the response

Set a local message when Formserve accepts or rejects the submission.

4

Deploy and validate

Send a production test after configuring allowed domains.

Code

Minimal HTML contract

Every framework eventually sends these same fields. If your tool generates a component, ask it to preserve styling and only adjust the submission behavior. 

<script>
  let status = "";

  async function submit(event) {
    const response = await fetch("https://formserve.io/f/YOUR_ENDPOINT_KEY", {
      method: "POST",
      body: new FormData(event.currentTarget)
    });

    status = response.ok ? "Thanks, we received your message." : "Please try again.";
    if (response.ok) event.currentTarget.reset();
  }
</script>

<form on:submit|preventDefault={submit}>
  <input name="_honeypot" tabindex="-1" autocomplete="off" class="hidden" />
  <input name="email" type="email" required />
  <textarea name="message" required />
  <button type="submit">Send</button>
  {#if status}<p>{status}</p>{/if}
</form>

Testing checklist

  • ✓ Check all controls have name attributes.
  • ✓ Keep action-free JavaScript submit or use a plain action form.
  • ✓ Show status text accessibly.
  • ✓ Submit from the deployed domain.

Common mistakes

  • ! Using component variables without field names.
  • ! Throwing errors without showing feedback.
  • ! Skipping allowed-domain setup.
  • ! Removing the honeypot during cleanup.