How To Create A Reusable Form

The reusable components.

<script>
	import { enhance } from '$app/forms'
	import { page } from '$app/state'
</script>

<form method="POST" use:enhance action="?/submit">
	<input type="text" name="name" placeholder="Your Name" required />
	<button type="submit">Submit</button>
	<div>
		{page.form?.message}
	</div>
</form>

export const submit = async ({ request }) => {
	const formData = await request.formData()
	const name = formData.get('name')

	return {
		message: `Your message has been sent successfully ${name}!`,
	}
}

The components being used in different +page.svelte

playground

<script>
	import ContactForm from '$lib/contact_form/Component.svelte'
</script>

<ContactForm />

import { submit } from '$lib/contact_form/form_action.js'

export const actions = {
	submit,
}

<script>
	let { children } = $props()
</script>

<header>
	<nav>
		<a href="/">/root</a>
		<a href="/contact">/contact</a>
	</nav>
</header>

<main>
	{@render children()}
</main>

<script>
	import ContactForm from '$lib/contact_form/Component.svelte'
</script>

<ContactForm />

import { submit } from '$lib/contact_form/form_action.js'

export const actions = {
	submit,
}

# Why repeat the form action on multiple endpoints instead of reusing the endpoint

For progressive enhancement and support for form prop.

Form actions are built on top of native forms, on submission, users are redirected to the page the form action is on [src]. By reusing the same endpoint, users without Javascript enabled may be redirected to routes without a +page.svelte.