Astro

Adding a Form to Astro

Astro outputs static HTML by default, which makes it a perfect match for Formward: no API routes or server middleware required. Drop a plain HTML form into any .astro file and you are done.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://formward.eu/f/your-form-id).

2. 02Add the form to a page or component

   Open the .astro file for the page where you want the form (e.g. src/pages/contact.astro) and paste the markup below inside the template section. No imports or client-side JavaScript are required.

   ---
   // src/pages/contact.astro
   import Layout from '../layouts/Layout.astro';
   ---
   
   <Layout title="Contact">
     <main>
       <h1>Get in touch</h1>
       <form action="https://formward.eu/f/your-form-id" method="POST">
         <label>
           Name
           <input type="text" name="name" required />
         </label>
         <label>
           Email
           <input type="email" name="email" required />
         </label>
         <label>
           Message
           <textarea name="message" rows="5" required></textarea>
         </label>
         <!-- honeypot: keep hidden -->
         <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
         <button type="submit">Send</button>
       </form>
     </main>
   </Layout>

3. 03Style with your project's CSS

   Add a <style> block inside the .astro file or import a global stylesheet. Astro scopes styles by default, so your form inputs will inherit your project tokens without leaking out to the rest of the page.

4. 04Test and view submissions

   Run astro dev, navigate to /contact, and submit the form. Check the Formward dashboard to confirm the entry arrived. For a production Astro site deployed to a CDN (Netlify, Vercel, Cloudflare Pages), the form works identically because all processing happens on Formward's servers.