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.
- Go to web3forms.com
- Click on
Create your Access Key
- 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.
所有评论(0)