Forms with Formik — Gatsby — Netlify
I was struggle to have the contact form worked using above Formik, Gatsby, Netlify. Plus adding recaptcha form was not straight forward. After spending lot of time research, trying, fixing, I’ve got it worked. I hope this can help someone new to Formik/Gatsby/Netlify.
Install Gatsby client:
npm install -g gatsby-cli
Open VS Code and create a new project call formik-netlify with this command line:
gatsby new formik-netlify https://github.com/gatsbyjs/gatsby-starter-hello-world
cd formik-netlify
code .
install the package needed for this project
npm install — save formik react-recaptcha
create git respository on github
https://github.com/ttngocthao/recaptcha-formik-gatsby-netlify.git
Add git to the project:
git init
git commit -m “first commit”
git remote add origin https://github.com/ttngocthao/recaptcha-formik-gatsby-netlify.git
git push -u origin master
create a contact form component in src > components > form > ContactForm.js
In ContactForm.js , create form with 2 inputs (fullName,email)
using <Formik> passing initial values are fullName and email, validates and onSubmit props
Inside <Formik> , add <label> , input using <Field/> component add <ErrorMessage/> to display error for that field. Add submit button and wrap every thing in <Form> component
Add the ContactForm component to index page in /src/pages/index.js
Run npm start to see how it looks and to check if the form works as expected,
then commit and push all the changes to github
Log in your netlify account, and click on New site form Git, follow the proceess
1. Connect to Git provider
2. Pick a repository: ttngocthao/recaptcha-formik-gatsby-netlify
3. add build command: gatsby build , add publish directory: public/
4. click Deploy site and you will be given an url (https://adoring-minsky-34eb30.netlify.app/)
To use form in Netlify, we need to add props(data-netlify, name,data-netlify-honeypot) and 2 hidden fields to Form component
add function encode above the ContactForm function
Add fetch method to the onSubmit prop, make sure the ‘form-name’ in the fetch’s body is as same as the name of the form
Commit and push changes to github. wait for the site the redeploy automatically on Netlify (make sure you’ve this option on). When published, test form if it works and check the result
add recaptcha to the form
go to this site https://developers.google.com/recaptcha/intro and click on sign up fro an API key pair. choose create to register a new site, add label (site url), domain, agree with term and submit. then you will be given site key and secret key
Save that sitekey and secret key to Netlify at Settings > Build & deploy > Environment > Edit variables
Edit build command in Settings > Build & deploy > Continuous Deployment
Back to our code, we need to add that key site to the project. In the root folder, create .env.development (for local host) and .env.production(for Netlify) , add the key site to them
Import Recaptcha from “react-recaptcha”, then add Recaptcha to the <Form> (before submit button)
For this to work, we need state to keep track the token. We use Usestate hook here to do that.
Add condition to onSubmit method. if there is a token, allow to submit form. also in the fetch’s body, need to add “g-recaptcha-response” with the token
Also need the recaptcha/api.js for it work. we add that using useEffect hook
Last but not least, add data-netlify-recaptcha=”true” to <Form>
Finally, commit and push changes. wait for it to redeploy and THIS IS IT. Hooray!!!
Note: if you want to reset form, you can use action.resetForm from Formik.
If you want to redirect the page to thanks page, you can use navigate from ‘gatsby’, make sure you import {navigate} from ‘gatsby’ and create the page called Thanks.js in src>pagest>Thanks.js
That’s all from me. I hope this helps. If anyone has a better way / cleaner way to achieve this, please enlighten me.
Thank you for reading
You can find the code here: https://github.com/ttngocthao/recaptcha-formik-gatsby-netlify and live example here: https://adoring-minsky-34eb30.netlify.app/
