Skip to content
Formwire
Framework guide

Add a contact form to an Astro site

A static Astro build has no server to receive a form, so the form posts to Formwire instead. One .astro page holds the whole form, and the build stays output: static.

4 min read

The form

Replace YOUR-ACCESS-KEY with the key from your form's page. The highlighted line is the one that points the form at Formwire.

src/pages/contact.astro 

            1
            ---
          
            2
            // src/pages/contact.astro
          
            3
            import Base from "../layouts/Base.astro";
          
            4
            ---
          
            5
             
          
            6
            <Base title="Contact">
          
            7
              <form action="https://formwire.io/submit" method="POST">
          
            8
              <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
          
            9
              <input type="hidden" name="redirect" value="https://example.com/thanks" />
          
            10
              <input type="text" name="fax" tabindex="-1" autocomplete="off" style="display:none" />
          
            11
             
          
            12
              <label for="name">Name</label>
          
            13
              <input id="name" type="text" name="name" required />
          
            14
             
          
            15
              <label for="email">Email</label>
          
            16
              <input id="email" type="email" name="email" required />
          
            17
             
          
            18
              <label for="message">Message</label>
          
            19
              <textarea id="message" name="message" rows="5" required></textarea>
          
            20
             
          
            21
              <button type="submit">Send</button>
          
            22
              </form>
          
            23
            </Base>

Steps

  1. 1

    Create a form and copy its access key

    Sign up at app.formwire.com and create a form. Your sign-in address receives its submissions from the start. The access key is on the form's Settings tab, under General.

  2. 2

    Create the contact page

    Add src/pages/contact.astro with the code above, swap in your layout, and replace YOUR-ACCESS-KEY with your key. The form is plain HTML in the component's template, so Astro ships no JavaScript for it.

  3. 3

    Add the thank-you page

    Create src/pages/thanks.astro with your confirmation copy and set the hidden redirect field to that page's full URL. Formwire sends the visitor there after a successful submission.

    astro 
    
            1
            ---
          
            2
            // src/pages/thanks.astro
          
            3
            import Base from "../layouts/Base.astro";
          
            4
            ---
          
            5
             
          
            6
            <Base title="Thanks">
          
            7
              <h1>Thanks, your message is on its way.</h1>
          
            8
              <p>We reply within one working day.</p>
          
            9
            </Base>
  4. 4

    Send a test submission

    Open the page with astro dev, fill the form in and send it. The submission appears in the form's inbox in the dashboard within a few seconds and the notification email follows, with Reply-To set to the address the visitor typed.

Notes for Astro

  • No adapter is needed. The form works with output: static and on every host Astro deploys to, because the POST goes to Formwire, not to your site.
  • To stay on the page after sending, add a <script> tag that submits the form with fetch and shows a message. Astro inlines it on that page only.
  • View transitions do not affect the form. The POST is a full navigation to Formwire, which redirects back to your thank-you page.

Questions

Do I need an Astro adapter or server endpoint for the form?

No. The form posts to Formwire directly, so the site stays fully static. An endpoint in src/pages/api is only needed if you want to run your own code before the submission is stored.

Is the access key safe to put in client-side code?

Yes. The access key is a public ID that can only deliver submissions to the inbox you verified. It cannot read submissions or change settings, and you can rotate it from the form's settings if it is ever abused.

Can I keep visitors on the page instead of redirecting?

Yes. Remove the redirect field and submit the form with fetch and an Accept: application/json header. The response is JSON with success and data.submission_id, and you show your own thank-you message. The React, Vue and Svelte guides do this.

How does the form stop spam without a captcha?

The hidden fax field is a honeypot: a submission that fills it in goes to the Spam folder and nobody is emailed. A spam filter and rate limits also run on every form. Settings, Spam & security has the filter level, and on Pro, allowed domains.

Related guides

All guides