Get the next one in your inbox.
One email when we publish something worth reading. No spam — appropriately enough, we'd know.
Skip SvelteKit's +page.server.ts form actions for a simple contact form — submit the form directly to an external endpoint like FormBridge instead.
Get an instant summary, key takeaways, action items, and answers to your questions about this article.
For a contact form whose only job is sending an email, you can skip SvelteKit's +page.server.ts form actions entirely and set the form's action attribute directly to an external endpoint like a FormBridge form URL — form actions are for logic that needs to run on your own server, which a simple contact form doesn't.
SvelteKit's form actions (export const actions in a +page.server.ts) exist so a form can run trusted logic on your own server — write to a database, check a session, redirect based on business rules. They're one of SvelteKit's best features. They're also more machinery than a contact form needs if the form's only job is "send this to someone's inbox."
If that's all you need, you can skip +page.server.ts entirely and submit straight to an external endpoint.
<!-- src/routes/contact/+page.svelte -->
<script>
let sending = false
</script>
<form
action="https://app.formbridge.ai/api/forms/fb_8h2k9p"
method="POST"
on:submit={() => (sending = true)}
>
<label for="full-name">Full name</label>
<input id="full-name" name="full-name" type="text" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit" disabled={sending}>
{sending ? 'Sending…' : 'Send message'}
</button>
</form>
That's the entire route. No +page.server.ts, no actions object, no fail() or redirect() calls to write, and nothing added to load to support it.
Form actions are built around the assumption that the destination is your own app — that's the whole value: SvelteKit progressively enhances the submission, gives you typed form data back in the component, and can redirect on success. None of that applies when the destination is a URL outside your app entirely. Submitting to FormBridge is a plain cross-origin POST, so use:enhance — which wires up your own action's progressive enhancement — isn't the right tool here, because you're not calling your own action at all.
If you later want an inline success message instead of a full navigation, add a small on:submit handler that calls preventDefault() and does its own fetch() — but that's an incremental upgrade, not a requirement to get the form working.
Everything SvelteKit gives you for free still applies: the route is prerenderable, the page ships no more JS than the tiny sending toggle needs, and there's no server-side code in your app tied to sending email at all.
When the form needs to run logic that only your server can do — checking a session, writing to your own database, controlling a redirect based on business rules. A form that just needs to email someone doesn't need any of that.
use:enhance progressively enhances a call to your own SvelteKit form action, so it isn't the relevant tool when the form's action points at a URL outside your app — that's a plain cross-origin POST instead.
No. The page can still be prerendered and ships minimal JavaScript; you're only skipping the +page.server.ts file, not any client-side SvelteKit feature.
One email when we publish something worth reading. No spam — appropriately enough, we'd know.