Astro Waitlist
Template

Set up this template in Astro

Astro renders the component to HTML at build time. Its native form sends a POST from the visitor’s browser to SiteBackend, so static deployment works without an Astro Action or an API endpoint in your project.

1. 1. Create your SiteBackend form

   Create a site and a form in your dashboard. Copy the form endpoint and replace YOUR_FORM_ID in the downloaded component.

2. 2. Add the .astro component

   Save the download as src/components/WorkflowForm.astro. The frontmatter and scoped style block are included. No integration, client directive or server adapter is needed.

   Full component: src/components/WorkflowForm.astro

   ---
   // Replace YOUR_FORM_ID with the ID from your dashboard.
   ---
   
   <form class="sb-form" action="https://api.sitebackend.com/forms/YOUR_FORM_ID" method="POST">
     <h2>Something good is coming.</h2>
     <p>Leave your email to join our early-access waitlist.</p>
     <label for="name">Your name</label>
     <input id="name" name="name" type="text" placeholder="Alex Morgan" required>
     <label for="email">Email address</label>
     <input id="email" name="email" type="email" placeholder="[email protected]" required>
     <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
     <button type="submit">Join the waitlist</button>
   </form>
   
   <style>
   .sb-form { max-width: 440px; padding: 32px; margin: 24px auto; font-family: system-ui, sans-serif; color: #0b0a16; background: #fff; border: 1px solid #e7e5f0; border-radius: 20px; }
   .sb-form h2 { font-size: 28px; margin: 0 0 8px; }
   .sb-form p { color: #6b6a80; line-height: 1.6; }
   .sb-form label { display: block; font-size: 14px; font-weight: 600; margin-top: 20px; }
   .sb-form input, .sb-form textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #e7e5f0; border-radius: 8px; font: inherit; }
   .sb-form textarea { min-height: 110px; resize: vertical; }
   .sb-form button { width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 8px; background: #6d3fe0; color: #fff; font: inherit; cursor: pointer; }
   .sb-form :focus-visible { outline: 2px solid #6d3fe0; outline-offset: 3px; }
   </style>

3. 3. Use the component on your page

   Create src/pages/waitlist.astro, or import the component into an existing page. Adjust the relative import path if your folders differ.

   src/pages/waitlist.astro

   ---
   import WorkflowForm from "../components/WorkflowForm.astro";
   ---
   
   <WorkflowForm />

4. 4. Connect notifications and test a submission

   Enable email notifications in your form settings if you want an alert for each submission. If you restrict allowed origins, include your production URL and local development origin (typically http://localhost:4321). Submit from your own site and confirm it appears in the dashboard. The preview above demonstrates the form without sending data.