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.
Create the form
Bind inputs to name attributes and prevent the default submit.
Send the submission
Basic submission
File upload
<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>
event.currentTarget.<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>
enctype="multipart/form-data" when files are present.For a JSON response, forward submissions from a server endpoint or server action.
