Skip to content
Formwire
Hosting guide

Add a contact form to a site on Vercel

Vercel has no built-in form handling, so a contact form on Vercel usually means writing a function. Posting the form to Formwire removes that step for static sites and Next.js alike.

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.

public/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

    For a static site, paste the form above into your contact page and replace YOUR-ACCESS-KEY with your key. For Next.js, use the component in the Next.js guide; it posts to the same endpoint.

  3. 3

    Add the thank-you page

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

  4. 4

    Deploy

    Push, or run vercel. No API route, environment variable or vercel.json 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 Vercel

  • No function means nothing to count against the Hobby plan's function invocations and no cold start before the form sends.
  • Preview deployments work too. If you restrict posting to your own domains in the form's settings (Pro), add the *.vercel.app preview pattern or test on the production domain.
  • Next.js on Vercel: a client component with fetch is enough. A server action is optional and only needed to run your own code first.

Questions

Do I need a Vercel serverless function for the form?

No. The form posts to Formwire directly. A function or a Next.js server action 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.

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.

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