SubscriberForm.svelte

<script lang="ts">
	import type { NewSubscriberSchema } from '$lib/schema/form-schema';
	import type { SuperValidated } from 'sveltekit-superforms';
	import { superForm } from 'sveltekit-superforms/client';
	import TextInput from '$lib/components/TextInput.svelte';
	import { toast } from 'svelte-sonner';
	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';

	export let data: SuperValidated<NewSubscriberSchema>;

	const { form, errors, enhance, constraints } = superForm(data, {
		applyAction: true,
		invalidateAll: true,
		resetForm: true,
		onSubmit: async (formEl) => {
			toast.message('Adding subscriber...');
		},
		onResult: ({ result, formEl, cancel }) => {
			// if the form is submitted successfully, show the confetti
			if (result.type === 'success') {
				toast.success('Subscriber added successfully');
			}

			// if the form is submitted with errors, show the toast
			if (result.type === 'failure') {
				toast.error('There was an error adding the subscriber');
			}
		},
		taintedMessage: 'Do you want to leave this page? Changes you made may not be saved.'
	});
</script>

<SuperDebug data={$form} />

<form
	method="POST"
	action="?/addSubscriber"
	class="flex w-full flex-col space-y-3 sm:col-span-6"
	use:enhance
>
	<TextInput
		name="email"
		label="Email"
		bind:value={$form.email}
		constraints={$constraints.email}
		errors={$errors.email}
	/>

	<TextInput
		name="label"
		label="Label"
		bind:value={$form.label}
		constraints={$constraints.label}
		errors={$errors.label}
	/>

	<div class="flex justify-end">
		<button
			type="submit"
			class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gray-950 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-950"
		>
			Add Subscriber
		</button>
	</div>

	<hr class="border-gray-200" />
</form>