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.

Comments

[Stan Kukučka]

@kouliavtsev great post. I have struggle quite a lot. I do plan migrate one international project from Netlify to Vercel because of Vercel's "Serverless Function Region" and now all my troubles with forms seems to be solved

[Surjith S M]

Thanks for marrying Web3Forms. I'm her father :D (I made it)

I'm glad you liked Web3Forms. If you have any questions or feedback, let me know :)

[KangWei Yew]

this post is so underrated, thanks a lot for the suggestion of web3forms!

[kouliavtsev]

🤘

[irishgeoff9]

Checkout for vercel forms

[Surjith S M]

Thank you :)

[Pranav]

This is the closest to netlify forms for vercel. Thanks a lot! The mails didn't end up in promotions tab for me though.

[irishgeoff9]

Take a look at fabform.io its a really great
netlify forms alternative

[Stan Kukučka]

@kouliavtsev only thing i do miss in this exampe is redirect after send to custom made page not to servis itself