Skip to content
Formwire
Hosting guide

Add a contact form to a site on Netlify

A site on Netlify can post its contact form to Formwire with a plain HTML form and no Netlify Forms setup. This guide gives you the form, the redirect to a thank-you page and the notes that matter on Netlify.

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. Do not add a data-netlify attribute: that hands the form to Netlify Forms instead.

  3. 3

    Add the thank-you page

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

  4. 4

    Deploy

    Push, or run netlify deploy. No environment variable, function or netlify.toml change is needed.

  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 Netlify

  • Netlify Forms needs data-netlify="true" and a build-time scan. Leave the attribute off; a form without it is ignored by Netlify and posts straight to Formwire.
  • If you are moving off Netlify Forms, delete the attribute and the hidden form-name input, then add the access_key field. Nothing else in the markup changes.
  • Netlify's free tier includes 100 form submissions a month; Formwire's includes 250, with the inbox and CSV export.
  • Works with every framework Netlify builds. For Astro, Hugo, Eleventy and Next.js the framework guides have the same form in their own file layout.

Questions

Why use Formwire instead of Netlify Forms?

More free submissions (250 against 100 a month), a searchable inbox with CSV export, notification emails with Reply-To set to the visitor, signed webhooks on Pro, and a form that keeps working if you move hosts.

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.

What does the free plan include?

250 submissions a month, email notifications with Reply-To set to the visitor, the submissions inbox with CSV and JSON export, spam filtering and hCaptcha. File uploads, webhooks and multiple recipients are on Pro.

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.

Related guides

All guides