Skip to content
Formwire
Hosting guide

Add a contact form to a Cloudflare Pages site

Cloudflare Pages serves static files, and handling a form there means writing a Pages Function. Posting the form to Formwire skips the function.

3 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.

contact.html 

            1
            <form action="https://formwire.io/submit" method="POST">
          
            2
              <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
          
            3
              <input type="hidden" name="redirect" value="https://example.com/thanks" />
          
            4
              <input type="text" name="fax" tabindex="-1" autocomplete="off" style="display:none" />
          
            5
             
          
            6
              <label for="name">Name</label>
          
            7
              <input id="name" type="text" name="name" required />
          
            8
             
          
            9
              <label for="email">Email</label>
          
            10
              <input id="email" type="email" name="email" required />
          
            11
             
          
            12
              <label for="message">Message</label>
          
            13
              <textarea id="message" name="message" rows="5" required></textarea>
          
            14
             
          
            15
              <button type="submit">Send</button>
          
            16
            </form>

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

    Add the form to your site

    Paste the form above into your contact page and replace YOUR-ACCESS-KEY with your key. No functions/ directory or binding is needed.

  3. 3

    Add the thank-you page

    Create /thanks and set the hidden redirect field to its full URL on your pages.dev or custom domain.

  4. 4

    Deploy

    Push, or run wrangler pages deploy. Nothing in wrangler.toml changes.

  5. 5

    Send a test submission

    Open the deployed site, 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 Cloudflare Pages

  • A Pages Function is optional. Write one only if you want to run your own code before the submission is stored, and post to Formwire from it with fetch.
  • Works with every framework Pages builds. Astro, Svelte, Hugo and Eleventy have their own guides with the same form in their file layout.

Questions

Do I need a Pages Function or Worker for the form?

No. The form posts to Formwire directly, so the site stays static. A Function is only useful if your own code needs to run first.

Can I use Cloudflare Turnstile with Formwire?

Yes, on Pro. Pick Turnstile in the form's settings, add your own site key and secret, and drop the widget in your form; Formwire verifies the token on every post. The honeypot and spam filter cover most forms without a captcha.

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.

Where do submissions go?

Each submission is stored in the form's inbox in the dashboard and emailed to you with Reply-To set to the visitor. On Pro it can also go to more recipients and to webhooks. The inbox exports to CSV and JSON.

Related guides

All guides