Handling Form Submissions from a SvelteKit Component

Submitting a form from a SvelteKit component to be handled by a server-side form action is simpler than you might think. You don’t need the form to be inside a page. It can live in any component and still interact with SvelteKit’s server-side functionality.

This post will walk you through submitting a form from a component, processing it using a default form action from a +page.server.js, and setting up a +page.svelte to bind the form.

Project Structure

my-sveltekit-project/
├── src/
│   ├── components/
│   │   └── FormTestComponent.svelte
│   ├── routes/
│   │   ├── +page.svelte
│   │   └── test/
│   │       └── +page.server.js
├── static/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

1. Create the FormTestComponent and Add a Form

First, let’s create a FormTestComponent that contains a simple form:

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  export let form;
</script>

<form>
  <input id="test" name="test" />
  <button type="submit"> Submit </button>
</form>

• The FormInput component is a custom input field used here for the form.
• {form} is shorthand for form={form}, which binds the form object passed from the page to this component.

At this point, we have a basic form ready to be used inside a component, but we haven't yet connected it to server-side form handling.

2. Set Up +page.svelte for Form Binding

Now, create a +page.svelte file to use the FormTestComponent and bind its form prop.

<!-- routes/+page.svelte -->
<script>
  import FormTestComponent from "$lib/components/FormTestComponent.svelte";
  export let form; // This comes from the page’s server-side form response
</script>

<FormTestComponent {form} />

Key Points:

• export let form;: The form object comes from the form action response on the server and is passed down to FormTestComponent. This binds the form response data to the form prop in the component.
• Reactivity: As the form is submitted and updated on the server, the form object will reflect these changes client-side, keeping everything in sync.

3. Enhancing the Form Submission in FormTestComponent

To handle form submissions efficiently, SvelteKit provides the use:enhance directive, which allows you to enhance the form with progressive enhancement features like handling submissions without a full page reload.

Here's how you enhance the form submission in FormTestComponent:

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  import { enhance } from "$app/forms";
  import FormInput from "$components/forms/FormInput.svelte";
  import { page } from "$app/stores";

  let loading = false;
  export let form;
  $: console.log(form); // Log form response for debugging
</script>

<form
  method="POST"
  on:submit|preventDefault
  action="/test"
  use:enhance
>
  <FormInput label="test" id="test" />
  <button type="submit"> Submit </button>
</form>

Key Points:

• use:enhance: This directive enhances the form to handle submissions without a full reload. It also makes it easy to handle errors or partial form updates client-side.
• on:submit|preventDefault: This prevents the browser’s default form submission behavior (a page reload), allowing SvelteKit to handle it.
• action="/test": The form points to the /test route, which we’ll create soon. If we were using a named action (like signup), the URL would look like /test?/signup.

4. Creating the Server-side Action

To process the form on the server, create a directory at /test with a +page.server.js (or +page.server.ts if you prefer TypeScript).

Here’s an example of what the form action might look like in +page.server.js:

// - /routes/test/+page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object
        console.log(formEntries); // Log form data on the server
        return {
            success: true,
            message: "Yay!!"
        };
    }
};

Key Points:

• request.formData(): This method retrieves the submitted form data from the request.
• Object.fromEntries(data.entries()): This converts the form data into a more usable object format, where each form field name becomes a key, and its value is the corresponding value.

This is where the server processes the form. In this case, we’re logging the form data and returning a success message. In a real-world scenario, you’d likely perform validation and handle any errors.

5. Seeing the Form Response

Once the form is submitted, you'll see the form data logged both in the terminal (server-side) and in the browser’s console (client-side). This is thanks to the console.log(form) in the component and the console.log(formEntries) in the +page.server.js, which logs the form response and the form respectively.

Conclusion

Now you’ve successfully created a form inside a SvelteKit component that submits data to a server-side form action. You didn’t need to use a full page for the form, and you’ve utilized SvelteKit’s use:enhance to handle submissions seamlessly without a page reload.

You can extend this by adding custom validation, handling errors, or even performing more complex actions like file uploads.

Happy Hacking!