Next.js + serverless personal webpage in a couple of hours — Create contact form with Formspree (Part 5)
A common component of any personal webpage is a “Contact” form, since you want to provide a way for the visitors to reach you, while protecting your email address from robot spams.
In a traditional front-end/back-end setup, we implement contact form by hitting posting the payload to the backend, and within your backend web framework of choice (e.g., NodeJS, PHP, Python, etc.), you write code to send the email using some SMTP server that you have access to.
What do we do when we don’t have a backend?
This is part 5 of a series of posts I made for documenting my journey of setting up my personal webpage in an evening:
Part 1: Development Environment Setup
Part 2: Purchasing your own domain name and set up email forwarding
Part 3: Bootstrapping the app with Next.js
Part 4: Deploying to Production with Vercel
Part 5: Integrate your contact form with Formspree(📍 You are here)
Part 6: Pulling blog posts from Medium with a serverless function
Creating a contact form in Formspree (20 mins)
What Formspree and other form providers like FormKeep and Netlify Forms provide is an API for you to submit the form to. So instead of posting the payload of the form to a backend (which is not under our control), we will be submitting the form to the Formspree API. It then triggers a logic on the form provider to send an email notification to your designated email.
Using a form provider, you usually get additional features like spam protection for free. Many form providers integrate with reCAPTCHA, and some also have profanity filters or Machine Learning based spam filters.
It is extremely easy to create a form with Formspree and Versa. Head to https://formspree.io/create/zeit and fill in the email address that you want to receive submission notifications at (use one of the aliases you created in Part 2).
On the next screen you get assigned a unique endpoint for your form submission. It is convenient that Formspree provides you with an oven-ready React component. All you need to do is to modify it slightly and adapt it into your code base.
Go ahead and test a submission from your contact form. It will show up in Formspree’s submission tab and you will get the same details in the email notification so you can get back to your visitor.
What’s the catch?
This is all very convenient and works really well. The catch here is that your contact form now has another dependency on a third-party service. An alternative to using a form provider is to send email from a serverless function. But unless you host your own SMTP server, you will still need to rely on some external API like sendgrid to achieve the nearly same effect.
Do note that the free plan of Formspree have a small limit of 50 submissions per month (which is probably fine for starting out). There are other free providers which offer a more generous limit so you should be able to find one that suits your needs.
Conclusion
In this part we have extended our serverless app to have a working contact us form by using an external API. In the next part we are going to explore using serverless functions to achieve some backend functionality in a serverless deployment.
Part 1: Development Environment Setup
Part 2: Purchasing your own domain name and set up email forwarding
Part 3: Bootstrapping the app with Next.js
Part 4: Deploying to Production with Vercel
Part 5: Integrate your contact form with Formspree(📍 You are here)
Part 6: Pulling blog posts from Medium with a serverless function
