Best Netlify forms alternative on Vercel! 🔥

After migrating from Netlify to Vercel, I do miss Netlify Forms... A lot!

With Netlify Forms I could add a simple form to a website in couple of seconds, without having to worry about backend implementation.

Simply, add a snippet to your project and you are ready to go.

<form name="contact" method="POST" data-netlify="true">
  <label>Your Name: <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

It was what I call "A form bootstrap heaven". 🙏

The move 🚚💔

After a while, I have stopped working with Netlify due to my relocation to Vercel. I was heartbroken for a while, yet got over it.

Dating Formspree 🌹

At some point I have met Formspree. The implementation is quite close to Netlify.

<form action="https://formspree.io/f/{form_id}" method="post">
  <label for="email">Your name: <input name="Name" id="name" type="name"></label>
  <button type="submit">Submit</button>
</form>

At first sight things looked very promising. Yet, you have to do a bit more extra work to get started.

• 1. Install a npm package yarn add @formspree/react
• 2. Generate form-id here.
• 3. And a react hook.

import { useForm } from '@formspree/react';

function MyForm() {
  const [state, handleSubmit] = useForm('{form-id}');
  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <label for="email">Your name: <input name="Name" id="name" type="name"></label>
      <button type="submit" disabled={state.submitting}>Sign up</button>
    </form>
  )
}

To be honest, I a quite happy with Formspree, yet the experience that I would have with Netlify Forms is not the same.

Love of my life Web3Forms ❤️

Recently, I have a met the love of my life. We are engaged and soon are getting married.

The cool thing about Web3Forms is that it is slightly easier to get started.

1. Go to web3forms.com
2. Click on Create your Access Key
3. Enter your email address

And voila you have generated access_key!

<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <label for="email">Your name: <input type="text" name="name" required></label>
    <input type="hidden" name="redirect" value="https://web3forms.com/success">
    <button type="submit">Submit Form</button>
</form>

Copy the forms with the access_key into your project and be happily married for the rest of your life. 💒

PS: If you are using gmail and not getting any emails, check the promotions tab.