A React component to make using Netlify & React forms easier.
npm install react-netlify-formA React component to make using Netlify & React forms easier.
With npm:
``bash`
npm install --save react-netlify-form
With Yarn:
`bash`
yarn add react-netlify-form
`jsx
import NetlifyForm from 'react-netlify-form'
{({ loading, error, success }) => (
{loading &&
Loading...
}
{error &&
Your information was not sent. Please try again later.
}
{success &&
Thank you for contacting us!
}
{!loading && !success &&
}
)}
`
Note: In order for Netlify to find your forms, they must be server-side rendered somewhere. If you use react-netlify-form on the client side accidently the form will still render but it won't work. You can work around this by adding a hidden form that renders server-side elsewhere.
This module uses react-google-recaptcha under the hood, so you can pass all the same options through the recaptcha prop.
You will also need to follow Netlify's instructions on bringing your own reCAPTCHA to Netlify Forms, which basically just involves setting some environment variables.
`jsx`
recaptcha={{
sitekey: 'my_recaptcha_site_key',
size: 'normal'
}}
>
{({ loading, error, recaptchaError, success, recaptcha }) => (
{loading &&
Loading...
}
{error &&
Your information was not sent. Please try again later.
}
{recaptchaError &&
Recaptcha did not match. Please make sure the box is checked.
}
{success &&
Thank you for contacting us!
}
{!loading && !success &&
{recaptcha}
}
)}
`jsx`
recaptcha={{
sitekey: 'my_recaptcha_site_key',
size: 'invisible'
}}
>
{({ loading, error, recaptchaError, success, recaptcha }) => (
{loading &&
Loading...
}
{error &&
Your information was not sent. Please try again later.
}
{recaptchaError &&
Recaptcha did not match. Please make sure the box is checked.
}
{success &&
Thank you for contacting us!
}
{!loading && !success &&
}
{/ Invisible reCAPTCHA must be kept outside of conditionals /}
{recaptcha}
)}
- name: The form name that will show up in your Netlify dashboard. Default: "Form"
- : Set this to false to disable the form. Useful for things like live validation. Default: true
- : Your recaptcha options object for react-google-recaptchaonSubmit
- : A function that runs as soon as the form is submit.onSuccess
- : A function that runs as soon as the data has successfully posted to Netlify.onError
- : A function that runs if there are errors posting to Netlify.validate
- : A promise function that runs before form submission. Return true to prevent the form from submitting.honeypotName
- : The name of the honeypot field. Default: "__bf"`