Basic Astro Form
In Astro, you can use standard HTML forms that submit directly to FormBnB:src/pages/contact.astro
---
// Contact page
---
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
<input type="text" name="_gotcha" style="display:none" />
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</body>
</html>
Astro Component
Create a reusable contact form component:src/components/ContactForm.astro
---
interface Props {
formSlug: string;
redirectUrl?: string;
}
const { formSlug, redirectUrl } = Astro.props;
---
<form
action={`https://api.formbnb.com/f/YOUR_ORG/${formSlug}`}
method="POST"
class="contact-form"
>
{redirectUrl && (
<input type="hidden" name="_next" value={redirectUrl} />
)}
<input type="text" name="_gotcha" style="display:none" />
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit">Send</button>
</form>
Client-Side Submission
For AJAX submissions without page reload:src/components/AjaxForm.astro
---
interface Props {
formSlug: string;
}
const { formSlug } = Astro.props;
---
<form id="ajax-form" data-form-slug={formSlug}>
<input type="email" name="email" placeholder="your@email.com" required />
<textarea name="message" placeholder="Your message" required></textarea>
<button type="submit">Send</button>
<p id="form-status" style="display:none"></p>
</form>
<script>
const form = document.getElementById('ajax-form') as HTMLFormElement;
const status = document.getElementById('form-status');
const formSlug = form.dataset.formSlug;
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form);
try {
const res = await fetch(`https://api.formbnb.com/f/YOUR_ORG/${formSlug}`, {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
if (res.ok) {
status.textContent = 'Message sent!';
status.style.display = 'block';
form.reset();
} else {
throw new Error('Failed');
}
} catch (err) {
status.textContent = 'Error sending message';
status.style.display = 'block';
}
});
</script>
With React Island
Use React components in Astro with client directives:src/components/ReactForm.tsx
import { useState } from 'react';
export default function ReactForm({ formSlug }: { formSlug: string }) {
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setStatus('loading');
const form = e.currentTarget;
const data = new FormData(form);
try {
const res = await fetch(`https://api.formbnb.com/f/YOUR_ORG/${formSlug}`, {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
if (res.ok) {
setStatus('success');
form.reset();
} else {
setStatus('error');
}
} catch {
setStatus('error');
}
};
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" required />
<textarea name="message" required />
<button type="submit" disabled={status === 'loading'}>
{status === 'loading' ? 'Sending...' : 'Send'}
</button>
{status === 'success' && <p>Thanks!</p>}
{status === 'error' && <p>Error, try again</p>}
</form>
);
}
src/pages/contact.astro
---
import ReactForm from '../components/ReactForm';
---
<ReactForm client:load formSlug="YOUR_FORM" />