> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formbase.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte

> Submit to Formbase from Svelte components.

Svelte forms can post directly to Formbase or submit with JavaScript. This guide shows a programmatic submission so you can update UI state and handle errors gracefully.

Remember: browser submissions return a `303` redirect, so treat that status as success.

<Steps>
  <Step title="Create the form">
    Bind inputs to `name` attributes and prevent the default submit.
  </Step>

  <Step title="Send the submission">
    <Tabs>
      <Tab title="Basic submission">
        ```svelte theme={null}
        <script>
          let status = '';
          let isSubmitting = false;

          const handleSubmit = async (event) => {
            event.preventDefault();
            status = '';
            isSubmitting = true;

            const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
              method: 'POST',
              body: new FormData(event.currentTarget),
              redirect: 'manual',
            });

            status = response.status === 303 || response.ok
              ? 'Submitted!'
              : 'Submission failed.';

            isSubmitting = false;
          };
        </script>

        <form on:submit|preventDefault={handleSubmit}>
          <input name="name" placeholder="Name" required />
          <input name="email" type="email" placeholder="Email" required />
          <textarea name="message" required></textarea>
          <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? 'Sending...' : 'Send'}
          </button>
          {#if status}<p>{status}</p>{/if}
        </form>
        ```

        Svelte passes the form element via `event.currentTarget`.
      </Tab>

      <Tab title="File upload">
        ```svelte theme={null}
        <script>
          let status = '';

          const handleSubmit = async (event) => {
            event.preventDefault();

            const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
              method: 'POST',
              body: new FormData(event.currentTarget),
              redirect: 'manual',
            });

            status = response.status === 303 || response.ok
              ? 'Uploaded!'
              : 'Upload failed.';
          };
        </script>

        <form on:submit|preventDefault={handleSubmit} enctype="multipart/form-data">
          <input name="resume" type="file" />
          <button type="submit">Upload</button>
          {#if status}<p>{status}</p>{/if}
        </form>
        ```

        Add `enctype="multipart/form-data"` when files are present.
      </Tab>
    </Tabs>
  </Step>
</Steps>

<Callout type="note">
  For a JSON response, forward submissions from a server endpoint or server action.
</Callout>