Contact form for Svelte — no backend required

SvelteKit form actions are great when you want server code. When you do not, FormHeron is the external action URL.

Setup

Create a FormHeron form.
Use a native form action in your .svelte component.
Include the honeypot.
Optionally enhance with progressive enhancement later.

Working example

ContactForm.svelte

<form action="https://formheron.com/f/YOUR_KEY" method="POST">
  <input type="email" name="email" required bind:value={email} />
  <textarea name="message" required bind:value={message}></textarea>
  <input type="text" name="_hp" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
</form>

<script>
  let email = ''
  let message = ''
</script>

Common problems

SvelteKit form actions

You can proxy through a +page.server.ts action, but a direct FormHeron action is simpler for contact forms.

Adapter-static hosts

Static adapters cannot run form actions. FormHeron works on pure static output.

CSRF tokens

Cross-origin form POST to FormHeron does not use your app’s CSRF token — origin allowlisting is the abuse control.

FAQ

How do I add a contact form to Svelte?

Point the form action at FormHeron. No SvelteKit endpoint required.

Does it work with SvelteKit?

Yes — same HTML form on any page.

Where are submissions stored?

In FormHeron (Amsterdam database). Retention is 30/90/365 days by plan.

Start free Docs