Forms

TL;DR:

• use:enhance suppresses the default page-reload after submitting
• form-props can save the server’s response

<script>
  import { enhance } from '$app/forms';
  let isSubmitting = false;
</script>
 
<form 
  method="POST" 
  use:enhance={() => {
    isSubmitting = true;
    return async ({ update }) => {
      await update();
      isSubmitting = false;
    };
  }}
>
  {#if isSubmitting}
    <p>Submitting...</p>
  {/if}
</form>

Getting responses

Using the props, you can handle the data the server responds with:

<script> import { enhance } from '$app/forms'; 
 
let { form } = $props(); 
</script> 
 
<form method="POST" use:enhance>