How to Use Form Actions in SvelteKit: Simple Guide

In SvelteKit, use form actions by exporting an actions object in your +page.server.js file to handle form submissions on the server. The form's method attribute should match the action name, and SvelteKit automatically calls the corresponding server function to process the data.

Syntax

To use form actions in SvelteKit, export an actions object from your server file (e.g., +page.server.js). Each key in this object is an action name matching the form's method. The value is an async function that receives the form data and returns a response.

The form in your Svelte component uses method to specify which action to call.

svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get('name');
    // process data
    return { success: true, name };
  }
};

<!-- In your Svelte component -->
<form method="post">
  <input name="name" required />
  <button type="submit">Send</button>
</form>

Example

This example shows a simple form that submits a name. The server action receives the data and returns a success message, which the page displays.

svelte

// +page.server.js
export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get('name');
    if (!name) {
      return { status: 400, errors: { name: 'Name is required' } };
    }
    return { success: true, name };
  }
};

// +page.svelte
<script>
  export let form;
</script>

<form method="post">
  <input name="name" placeholder="Enter your name" required />
  <button type="submit">Submit</button>
</form>

{#if form?.success}
  <p>Hello, {form.name}!</p>
{:else if form?.errors?.name}
  <p style="color: red;">{form.errors.name}</p>
{/if}

Output

A form with an input and submit button. When submitted with a name, the page shows "Hello, [name]!" below the form. If empty, it shows an error message in red.

Common Pitfalls

• Mismatch between form method and action name: The form's method must match a key in the exported actions object, or the action won't be called.
• Not returning data properly: Always return an object from the action to send data or errors back to the page.
• Using client-side form handlers instead of server actions: Form actions run on the server; avoid mixing client-side event handlers for the same form submission.

svelte

/* Wrong: form method does not match action key */
export const actions = {
  save: async ({ request }) => {
    // ...
  }
};

<!-- form method="post" but no 'post' action -->
<form method="post">
  <!-- ... -->
</form>

/* Right: matching method and action key */
export const actions = {
  post: async ({ request }) => {
    // ...
  }
};

<form method="post">
  <!-- ... -->
</form>

Quick Reference

Remember these key points when using form actions in SvelteKit:

• Export an actions object in +page.server.js.
• Each key in actions matches a form method.
• Action functions receive { request } and return data or errors.
• Use form prop in your Svelte page to access action results.
• Form submissions are handled server-side automatically.

Key Takeaways

Export an actions object in +page.server.js with keys matching form methods.

Form submissions call server actions automatically based on the method attribute.

Return objects from actions to send success or error data back to the page.

Use the form prop in your Svelte component to access action results and show feedback.

Ensure form method and action keys match exactly to avoid silent failures.