Using SvelteKit Form Actions

Form actions in SvelteKit provide seamless integration with the endpoint system, allowing you to work with real HTML forms and enhance them using Svelte actions. In this guide, we will explore how to use form actions in SvelteKit to handle form submissions, process form data, and enhance form interactions.

Copy link to headingPrerequisites

Before we begin, make sure you have the following:

• Basic knowledge of Svelte and SvelteKit.
• SvelteKit project set up and running.

Copy link to headingAdding a Form to Your SvelteKit Component

To get started, let's add a form to your SvelteKit component. Open the page.svelte file and add the following code:

<script>
  // Your component's script code goes here
</script>

<form method="POST">
  <!-- Form fields go here -->
  <input name="email"/>
  <button type="submit">Submit</button>
</form>

Ensure that each form element has a name attribute to identify them. The name attribute is essential for processing user inputs on the server.

Copy link to headingCreating a Form Action

To handle the form submission, we need to create a +page.server.js file that exports an asynchronous function named actions. This function will be responsible for processing the form data.

Create a +page.server.js file in the same directory as your page.svelte file. Inside the +page.server.js file, add the following code:

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const email = formData.get('email');
    // Process the form data and perform actions
    return { success: true };
  },
};

We've added a default action that is triggered when the user clicks the submit button in the form. This action is an asynchronous function that accepts a parameter { request }. We use the request.formData() method to retrieve the form data. You can access specific form field values using the formData.get() method, passing in the form element name as a parameter. Within the action, you can process the form data and perform any desired actions. Finally, you can return a value from the action, such as { success: true }, to indicate a successful form submission.

Copy link to headingAccessing the Returned Value of the Form Action

We can access the returned value of our form action in our page by exporting the form prop. In our +page.svelte file, add the following code:

<script>
  export let form;
</script>

Now, after submitting the form, our form action will run, and the value of form will be updated accordingly. For example, if the form action returns { success: true }, the value of form will be { success: true }. You can then use the form prop to conditionally render UI components or perform other actions based on the form submission result.

Copy link to headingNamed Actions

In addition to the default action, you can define named actions to handle different form submissions on the same page. To implement named actions, follow these steps:

1. Update the

   +page.server.js

   file to include named actions:

export const actions = {
  default: async ({ request }) => {
    // Default action implementation
  },
  addUser: async ({ request }) => {
    // Add user action implementation
  },
  getUser: async ({ request }) => {
    // Get user action implementation
  },
};

1. Modify the form element in the

   page.svelte

   file to include an

   action

   attribute with the name of the desired action as the value:

<form action="addUser" method="POST">
  <!-- Form fields go here -->
  <input name="email" />
  <button type="submit">Add User</button>
</form>

Note: The returned value of our form prop will include the result of the form action. For example, if the addUser action returns { success: true, user: user }, the value of form will be { success: true, user: user }.

With named actions, you can define different actions for different form submissions on the same page, allowing you to handle each submission independently.

Copy link to headingEnhancing Form Interactions with Progressive Enhancement

SvelteKit provides the use:enhance action to enhance form interactions when JavaScript is available. The use:enhance action emulates browser-native behavior without full-page reloads.

To enable progressive enhancement, add the use:enhance action to your <form> element, as shown in the following code:

<script>
  import { enhance } from '$app/forms'; // Import the enhance action

  // Your script code goes here
</script>

<form action="your-action-endpoint" method="POST" use:enhance>
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

By adding the use:enhance action, certain default behaviors are applied:

• The

  page.form

  and

  page.status

  properties are updated on successful or invalid responses, but only if the action is on the same page where the form is submitted from.

• The

  <form>

  element is reset, and all data is invalidated on a successful response.

• For a redirect response, the

  goto

  function is called to navigate to the specified location.

• If an error occurs, the nearest

  +error

  boundary is rendered.

• Focus is reset to the appropriate element after form submission.

You can also customize the behavior by providing a SubmitFunction that runs just before the form submission. This function can handle tasks such as showing loading UI or handling specific response types.

Alternatively, you can implement progressive enhancement without using use:enhance by adding a normal event listener on the <form> element.

Copy link to headingConclusion

In this guide, we have learned how to use SvelteKit form actions to handle form submissions, process form data, and enhance form interactions. By following these steps, you can seamlessly integrate HTML forms into your SvelteKit application and provide a better user experience.

Happy coding with SvelteKit!