Basic Form
Create a contact form component with state management:ContactForm.svelte
<script>
let status = 'idle';
async function handleSubmit(event) {
event.preventDefault();
status = 'loading';
const form = event.target;
const data = new FormData(form);
const res = await fetch('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
status = res.ok ? 'success' : 'error';
if (res.ok) form.reset();
}
</script>
<form on:submit={handleSubmit}>
<input type="text" name="_gotcha" style="display:none" />
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button disabled={status === 'loading'}>
{status === 'loading' ? 'Sending...' : 'Send'}
</button>
{#if status === 'success'}
<p>Thanks for your message!</p>
{/if}
{#if status === 'error'}
<p>Something went wrong. Please try again.</p>
{/if}
</form>
SvelteKit Form Actions
Use SvelteKit form actions for server-side handling:+page.server.js
export const actions = {
default: async ({ request }) => {
const data = await request.formData();
const res = await fetch('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', {
method: 'POST',
body: data
});
if (res.ok) {
return { success: true };
}
return { success: false };
}
};
+page.svelte
<script>
export let form;
</script>
<form method="POST">
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
{#if form?.success}
<p>Thanks!</p>
{/if}
</form>
Simple HTML Form
For basic use cases, submit directly without JavaScript:<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
<input type="hidden" name="_next" value="https://yoursite.com/thanks" />
<input type="text" name="_gotcha" style="display:none" />
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>