react-zapier-form
A React component for creating forms that post to Zapier's API. It posts directly to a catch hook, so you don't have to use another third party service to collect data from forms on your website.
- Honeypot to prevent spam
- Pass in your own form elements to render however you want
- Custom success/error messages & handlers
- Perfect for forms on static websites
Installation
With npm:
npm install --save react-zapier-form
Or Yarn:
yarn add react-zapier-form
Usage
A simple example with a small contact form:
import ZapierForm from 'react-zapier-form' ... <ZapierForm ='https://hooks.zapier.com/hooks/catch/2384321/kcli8e/'> error loading success return <div> !success && !loading && <div> <input ='email' ='Email' ='Email' /> <textarea ='Message' ='Your message' /> <button>Submit</button> </div> loading && <div>Loading...</div> error && <div>Something went wrong Please try again later</div> success && <div>Thank you for contacting us!</div> </div> </ZapierForm>
Options
Prop | Description | Default |
---|---|---|
canSubmit | Enable/disable form submission | true |
honeyPotName | The name of your honeypot field | "p_number" |
onSubmit | Call a function on every submission | None |
onSuccess | Call a function on success | None |
onError | Call a function on error | None |
validate | Validate before form is submit to stop submission (async, return true or false ) |
None |