You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-13Lines changed: 11 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,17 +6,15 @@ This repo was created to test and document how to get Netlify Forms working with
6
6
7
7
Netlify Forms is a super cool (and free) feature for sites hosted on the [Netlify](https://netlify.com) platform.
8
8
9
-
Formik is a great library that "removes the tears" from form creation in React.
9
+
[Formik](https://www.npmjs.com/package/formik) is a great library that "removes the tears":sob: from form creation in React.
10
10
11
-
The problem is that forms rendered via React don't work out of the box with Netlify forms.
12
-
13
-
> :point_up: This readme is a work in progress as I work toward a solution. Don't take anyting literally until this comment is removed.
11
+
The problem is that forms rendered via React don't work out of the box with Netlify forms. It's not that they're doing anything wrong, it's just kinda how things are. Thankfully, they're nice enough to have given us a way to work around this issue.
14
12
15
13
## tl;dr
16
14
17
15
You need to add a hidden HTML form that mimics the fields in your Formik form to the `/public/index.html` file in the public directory, or Netlify forms won't work.
18
16
19
-
> :point_up: Note that static site generators like Gatsby and Hugo are different beasts and require a different solution than would a Create React App build. Documentation here is soley pertinent to CRA.
17
+
> :point_up: Note that static site generators like Gatsby and Hugo are different beasts and require a different solution (they pretty much just work) than would a Create React App build. Documentation here is soley pertinent to CRA.
20
18
21
19
## Reading material
22
20
@@ -70,9 +68,9 @@ a) Add a `bot-field` and `form-name` field to `initialValues` of the Formik form
70
68
}}
71
69
```
72
70
73
-
While the honeypot is a novel concept, it's not really effective against spam bots, so you check out the section on adding reCaptcha, which is a much more robust solution.
71
+
While the honeypot is a novel concept, it's not really effective against spam bots, so check out the section on adding reCaptcha, which is a much more robust solution.
74
72
75
-
> :point_up: In February 2019, Netflify [announced](https://www.netlify.com/blog/2019/02/12/improved-netlify-forms-spam-filtering-using-akismet/) that all form submissions will be filtered for spam, using Akismet. Huzzah huzzah!
73
+
> :newspaper: In February 2019, Netflify [announced](https://www.netlify.com/blog/2019/02/12/improved-netlify-forms-spam-filtering-using-akismet/) that all form submissions will be filtered for spam, using Akismet. Huzzah huzzah!
76
74
77
75
b) Add those (hidden) fields to the Formik form itself:
78
76
@@ -81,21 +79,21 @@ b) Add those (hidden) fields to the Formik form itself:
81
79
<Fieldtype="hidden"name="bot-field" />
82
80
```
83
81
84
-
> :point_up: The relevant code to see how this works can be found in `/public/index.html` and `FormikForm.js` within this repo.
82
+
> :floppy_disk: The relevant code to see how this works can be found in `/public/index.html` and `FormikForm.js` within this repo.
85
83
86
84
## Adding ReCaptcha
87
85
88
86
### tl;dr
89
87
90
-
Use a library to add Recaptcha (e.g. [reaptcha](https://www.npmjs.com/package/reaptcha)) and don't add anything related to reCaptcha to the `/public/index.html` file. And be sure to send the reCaptcha response along with your form submission.
88
+
Use a library to add Recaptcha (e.g. [reaptcha](https://www.npmjs.com/package/reaptcha)), and be sure to send the reCaptcha response along with your form submission.
91
89
92
-
> :point_up: reCaptcha is notoriously easy to mistype, and `reaptcha` adds another nuance to the pot. I've used abbreviations in variables to help avoid issues around that.
90
+
> :scream: reCaptcha is notoriously easy to mistype, and `reaptcha` adds another nuance to the pot. I've used abbreviations in variable declarations to help avoid issues around that.
93
91
94
92
### Setup
95
93
96
94
There are a lot of libraries out there for adding reCaptcha to a React site. And most reCaptcha libraries are not especially clear in their documentation, IMHO, with to how to get the end-to-end solution working, esp. getting at the reCaptcha response token.
97
95
98
-
After a bit of trial and error, I settled on [reaptcha](https://www.npmjs.com/package/reaptcha).
96
+
After a bit of trial and error, I settled on [reaptcha](https://www.npmjs.com/package/reaptcha). It's clean and documented well.
99
97
100
98
There's actually only one key step to get reCaptcha working with Netlify Forms, which is to send the reCaptcha response token with your form data. The main work here is to get a hold of the Recaptcha response.
0 commit comments