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 4: Add a Form to Your Site (Using a Third-Party React Library)
The Gatsby framework is based on React. So, a Gatsby project is a React project. And the Gatsby ecosystem is a subset of the React ecosystem.
This is exciting! There are hundreds of Gatsby plugins and themes you can use on your site, with more being added every day. But there are already thousands of free, well-tested React projects that you can use on your site too!
For example, you can hide/show your site header with React headroom, organize your CSS with Theme UI, or control your HTML head with React Helmet.
In this prompt, we invite you to add forms to your Gatsby site using Formik, a popular and powerful React library. We suggest adding the form to the “About” page you created in a previous challenge.
(In a future challenge we will show you how to add your form, or any React component to your Markdown-powered blog pages.)
Challenge Resources
Learn how to import and use almost any React component in your Gatsby project. However, instead of using the example in our documentation, install Formik from npm.
Next, follow Formik’s step-by-step tutorial for creating a newsletter signup form.
Lastly, familiarize yourself with the acessibility guidelines regarding forms, and ensure your form meets those standards.
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, Spectrum, and Dev.
For this challenge, you can also ask the Formik community for help.