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
+15-14Lines changed: 15 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,19 +16,18 @@ The problem is that forms rendered via React don't work out of the box with Netl
16
16
17
17
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
18
19
-
> :point_up: Note that static site generators like Gatsby and Hugo are different beasts and require a different solution than would a CRA build. Documentation here is soley pertinent to CRA.
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.
20
20
21
21
## Reading material
22
22
23
-
[This](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/) is a very informative article; however--for me, at least--it took a while to realize that there needs to be a mirror HTML form in `/public/index.html` of the form being rendered by React.
23
+
[This](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/) is a very informative article; however--for me, at least--it took a while to realize that there needs to be a mirror HTML form in `/public/index.html` of the form being rendered by React. And the info surrouning reCaptcha is a bit lean.
24
24
25
-
Reading [this](https://community.netlify.com/t/common-issue-how-to-debug-your-form/92) can be helpful or send you off on a wild goose-chase or two.
25
+
Reading [this](https://community.netlify.com/t/common-issue-how-to-debug-your-form/92) can be helpful or send you off on a wild goose-chase or three.
-[Axios](https://www.npmjs.com/package/axios) ( with [ qs ](https://www.npmjs.com/package/qs) ) for the post
31
-
- Bootswatch ([ Simplex ](https://bootswatch.com/simplex/)) for CSS
32
31
-[Formik](https://www.npmjs.com/package/formik)
33
32
34
33
Without extra setup, submitting a React form when hosted on Netlify will return a 404 error.
@@ -37,9 +36,9 @@ The 404 error can be a bit misleading because, when you look at the code, the fo
37
36
38
37
The reason is that Netlify's form-bots can't see JavaScript rendered form code.
39
38
40
-
So in order to get this working, you need to do a bit of extra work.
39
+
So in order to get this working, a bit of extra work needs to be done.
41
40
42
-
## Steps to Get it Working
41
+
## Steps to Get Things Working
43
42
44
43
### 1) Add a static HTML version of the form
45
44
@@ -53,6 +52,8 @@ Add the following form block just below the initial `<body>` element tag in `/pu
53
52
</form>
54
53
```
55
54
55
+
I believe you can also just put this form as a separate HTML file somewhere in your build, and it will get picked up, but I haven't tried that yet.
56
+
56
57
> :point_up: This is obviously just an example, so make sure that there is one-to-one match here, whereby each input corresponds with a respective input element/Field component in your Formik form.
57
58
58
59
### 2) Add additional `initial values` to the Formik form
@@ -88,7 +89,7 @@ b) Add those (hidden) fields to the Formik form itself:
88
89
89
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.
90
91
91
-
> :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.
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.
92
93
93
94
### Setup
94
95
@@ -105,9 +106,9 @@ The steps are:
105
106
3. Retrieve the reCaptcha response
106
107
4. Submit the form data along with the reCaptcha response.
107
108
108
-
To do that, I've leveraged the built-in callback functions of `Reaptcha` along with some React Hooks.
109
+
To do that, I've leveraged the built-in callback functions of `reaptcha` along with some React Hooks.
109
110
110
-
The Reaptcha block looks like this:
111
+
The `reaptcha` block looks like this:
111
112
112
113
```jsx
113
114
<Reaptcha
@@ -124,7 +125,7 @@ The Reaptcha block looks like this:
124
125
125
126
#### onLoad
126
127
127
-
`onLoad`, is set as an attribute on the `Reaptcha` in the `FormikForm.js` file
128
+
`onLoad`, is set as an attribute on the `Reaptcha`element in the `FormikForm.js` file
128
129
129
130
In this example, I use the `onLoad` callback function to load the `clearForm` action into a React State Hook:
130
131
@@ -144,15 +145,15 @@ In this example, I'm by-passing the typical onSubmit function used by Formik for
144
145
145
146
#### useRef
146
147
147
-
Once reCaptcha is loaded, reCaptcha needs gets executed. The reason for running `execute()` is for the support of reCaptcha v2 invisible, which I have set via the `size` attribute on the `Reaptcha`component.
148
+
Once reCaptcha is loaded, reCaptcha needs gets executed. The reason for running `execute()` is for the support of reCaptcha v2 invisible, which I have set via the `size` attribute on the `Reaptcha`element.
148
149
149
-
In order to execute reCaptcha, I've setup a [React Ref Hook](https://reactjs.org/docs/hooks-reference.html#useref) on the Reaptcha element.
150
+
In order to execute reCaptcha, I've setup a [React Ref Hook](https://reactjs.org/docs/hooks-reference.html#useref) on the `Reaptcha` element.
150
151
151
152
```jsx
152
153
constrcRef=useRef(null);
153
154
```
154
155
155
-
This, plus the ref attribute on the Reaptcha element, allows us to call execute on `rcRef.current`, which is done when the form is submitted in the Formik onSubmit function.
156
+
This, plus the ref attribute on the `Reaptcha` element, allows us to call execute on `rcRef.current`, which is done when the form is submitted in the Formik onSubmit function.
156
157
157
158
```jsx
158
159
onSubmit={asyncvalues=> {
@@ -169,7 +170,7 @@ The reason for separating this out, is that there is a delay between executing r
169
170
170
171
#### onVerify
171
172
172
-
`onVerify`, is set as an attribute on the `Reaptcha`component in the `FormikForm.js` file.
173
+
`onVerify`, is set as an attribute on the `Reaptcha`element in the `FormikForm.js` file.
173
174
174
175
The onVerify callback runs after `rcRef.current.execute()` and returns the reCaptcha response (in the form of a token).
0 commit comments