Creating a Contact Form with Next.js and Formspree
“Focusing on the front-end is the most customer-obsessive way to build your products.” — Guillermo Rauch, CEO Vercel
Why use this solution?
Sometimes you are under pressure building a client's website or a project and you find in the situation where saving time is essential. I was trying different solutions for small and simple contact form integration and I have to say that Formspree is the quickest and easiest way to get your contact forms up and running, just take a couple of minutes to get everything up and running. Their simplicity in their React API really makes a good developer experience when is combined with Next.js. Let's see this in action.
Before to show the code sample we will need to start a Next.js project and create a Formspree account if you don’t have one yet. first visit formspree website, sign in and fill in your data:
Then in the next section is important to create a project and not a form, because we'll be using Formspree CLI in order to configure our project
After clicking New Project, assign any name you like and then select the option Commnad Line Project
At the end the platform will provide us 2 diferent access keys, the first one is the Project ID which will be used to access from our project to Formspree API, and the Deploy Key that we'll gonna use later:
Up and Running with Next.js
For this small example I'm goint to use the Next.js + TailwindCSS starter in order to create a custom design for the contact form, you can dive deep into installing Tailwind and Next.js in the official docs site.
Open your project's directory and install the
@formspree/cli dependencies, with this we can setup our project correctly and it’s everything we'll need.
As I mentioned before, for this example I'm going to use a custom layout for the contact form, feel free to use it and customize it if you need. the full project is located on this GitHub repository
Now it's time to code
First we need to modify the
_app.js file using the Formspree provider with the right project ID
Before to use the Formspree hook, it's fundamental to create a
formspree.json file which is the configuration file and contains information about our form, the email you want to use to receive the form submissions and here we can add other supported integrations as well, this file can be generated automatically using the
formspree init command.
It's important don't forget to assign a name for this form which is the first attribute under "forms" attribute, in this case "contactForm" and a name for this project in this case "Next.js Formspree". here's a small sample of a basic config:
After this let's create a component file which or where your form UI resides and now we can import two of the dependencies. In this point just
useForm hook is needed,
ValidationErroris just provided if you don't want to handle form validation from sratch. You can read more about in the formspree docs
Then it’s time to use the
useForm hook, this needs only one parameter which is the form's name created on the
formspree.json file, "contactForm" in this case. Here I'm using
useRef hook in order to handle form event submission, reading the state status and reset the form's input fields as a side effect with the help of
useEffect (this is something optional and depends on your own custom implementation)
From here everything is almost done, don't forget to add
type="submit" attribute inside the submit button and formspree provides an state value in order to track if the submission is done or in process, with this in mind we can set
disabled attribute in order to disable the button after clicking and before submission is complete
That's everything about the formspree integration, as you see is really simple and quite easy to connect, the last thing beyond the code is to deploy our
formspree.json file to the platform in order to upload our custom configuration, but don't worry this process is easy as this and we just need the command:
formspree deploy -k your-deploy-key as you see below:
Then after this deploy, you can see the platform is showing the actual project and the configuration we added before
After this process we can test our contact form and see that everything it's working properly and just takes us few steps
Inside Submission section in formspree's platform you can see all email submissions and the specific date and time when they were sent
And the form is actually sending all the information to my own email, that was configured on
Your contact form is done! 🎉
Now you have a fully functional contact form, you can find the whole project on this GitHub repository , you can see this small example as an starter kit, feel free to use it on your next project.
If you want to deep dive into this API you can find more info on the Official Forsmpree docs. I reccomend to read this article from Vercel about how to deploy a form with Formpree on Vercel's platform, is really useful and valuable content. Thanks for reading me! ✌️