| title | description |
|---|---|
Quickstart |
Create a form endpoint and receive your first submission in minutes. |
Formbase gives you a single endpoint per form. Post to it from any frontend and Formbase stores the submission, shows it in the dashboard, and optionally sends you an email.
This quickstart uses a plain HTML form and a JavaScript fetch example so you can pick the approach that fits your site.
Open the Formbase dashboard, create a new form, and copy the endpoint URL.<Frame>
<img src="/images/dashboard-overview.png" alt="Formbase dashboard" />
</Frame>
<Tabs>
<Tab title="HTML form">
```html index.html
<form action="https://formbase.dev/s/YOUR_FORM_ID" method="POST">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
```
Browsers will redirect to the Formbase success page automatically.
</Tab>
<Tab title="JavaScript fetch">
```html index.html
<form id="contact-form">
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
<p id="status" role="status" aria-live="polite"></p>
<script>
const form = document.getElementById('contact-form');
const status = document.getElementById('status');
form.addEventListener('submit', async (event) => {
event.preventDefault();
status.textContent = '';
const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
method: 'POST',
body: new FormData(form),
redirect: 'manual',
});
if (response.status === 303 || response.ok) {
status.textContent = 'Thanks! We received your message.';
form.reset();
return;
}
status.textContent = 'Something went wrong. Please try again.';
});
</script>
```
For browser requests, Formbase responds with a `303` redirect. Treat that as success.
</Tab>
</Tabs>