Challenge 6 – Use Serverless Functions and Services to Collect Form Data

Hashim Warren
Hashim Warren
February 4th, 2020

Gatsby was named the #1 new technology to learn in 2020!

To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.

Learn more about #100DaysOfGatsby here!

Challenge 6: Collect Form Data Without Managing Your Own Database or Server

In the last two challenges you added forms to Markdown and JSX-powered pages. This week we’d like you to create a home for your form data, using a new class of services that work well with serverless websites, like your Gatsby project.

Below we’ve provided resources for two paths that you can choose based on the needs of your project, and your own interests and abilities.

Path A introduces you to form services for static sites, like Formik (the cloud service), Statickit, and FormKeep. Instead of giving you an all-in-one form builder to work with, these powerful, flexible, and inexpensive services provide you with endpoints to send form data to.

Path B welcomes you to the world of functions-as-a-service from the major cloud platforms. By using a combination of code and configuration, you can create your own data workflow with providers like AWS, Google, and Azure. There are two benefits to this approach. First, instead of using yet another SaaS, you’ll enhance your Gatsby site with the cloud provider services your employer has already invested in. Second, if you’re not familiar with the serverless tools provided by AWS, Google, and Azure, this challenge can be your first introduction to them.

Challenge Resources

Path A

Visit the Power of Serverless, a directory of serverless services. You’ll find many form options that work well with a Gatsby site. If you are already using Netlify, we recommend their built-in form service. If you are using Formik’s React library, you may want to try their new form service. Statickit, FormKeep, and Getform also seem worth comparing. Each service has its own documentation and support that you can use.

Path B:

Follow Adnan Rahić’s tutorial for “Building a serverless contact form with AWS Lambda and AWS SES”. It’s an AWS specific tutorial, but the basic concepts will help you get acquainted with similar tools on Azure and Google Cloud.

What to Do If You Need Help

If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.

If you follow Path B, you can find responsive, helpful support directly from AWS.

Hashim Warren
Written by
Hashim Warren

Full Stack Marketer, writing copy and code - https://www.configmag.com

Follow Hashim Warren on Twitter

Talk to our team of Gatsby Experts to supercharge your website performance.