Skip to content

Latest commit

 

History

History
99 lines (79 loc) · 3.32 KB

File metadata and controls

99 lines (79 loc) · 3.32 KB
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>
Use a standard HTML form for the simplest setup, or submit with fetch when you need full UI control.
<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>
Submit the form and check the Formbase dashboard for the new entry. If email notifications are enabled, you will also receive a message. Self-hosted? Replace `https://formbase.dev` with your own domain. The endpoint path remains `/s/YOUR_FORM_ID`.

Next steps

Copy-paste examples for React, Vue, Svelte, Remix, and more. Accept files using standard `multipart/form-data`.