Documentation

Components

Components

NetlifyForm

Initializes state and functions with

useNetlifyForm

and provides them with a context with

<NetlifyFormProvider/>

. Renders a form using

<NetlifyFormComponent/>

inside the context.

Available props:

| Name | Req | Description | | --------- | --- | -------------------------------------------------------------------------------------------------------------------------- | | children | Y | Children rendered inside the form like inputs. | | formProps | N | Additional props for the

<NetlifyFormComponent/>

. Can be used to override default methods like

onSubmit

and

onReset

. | | props | N | Passed as arguments to

useNetlifyForm

for setting options for the Netlify Form. |

useNetlifyForm

Hook used by

<NetlifyForm />

to create handlers and state which are used inside the form context.

Available props:

| Name | Req | Description | | --------------- | --- | ----------------------------------------------------------------------- | | name | Y | Name of the form. | | action | Y | Form action to fallback to when JavaScript is disabled. | | honeypotName | N | Needed when a honeypot is used because SSR needs to know it in advance. | | enableRecaptcha | N | Set this if reCAPTCHA is used because SSR needs to know it in advance. | | onSuccess | N | Handler when data has been submitted to Netlify. | | onFailure | N | Handler when Netlify sent an error. |

NetlifyFormProvider

Providing values to

NetlifyFormContext

Available props:

| Name | Req | Description | | -------- | --- | -------------------- | | children | Y | Children of context. | | props | Y | Context values. |

NetlifyFormContext

Form context which exposes form state, handlers and actions for consumers.

For an usage example have a look at Contact form example.

useNetlifyFormContext

Hook-based variant for consuming

<NetlifyFormContext />

NetlifyFormComponent

Renders a form with handlers provided by

NetlifyFormContext

Available props:

| Name | Req | Description | | -------- | --- | ----------------------------------------------------------------------------------------------------------- | | Children | Y | Form content like inputs. | | props | Y | Additional props passed to the form. Can be used to override default methods like

onSubmit

and

onReset

. |

Honeypot

Component to create a honeypot field which provides extra spam prevention. If a bot fills this field, Netlify dismisses the submitted form data.

Available props:

| Name | Req | Description | | ----- | --- | ------------------------------------------- | | label | N | Label as text before honeypot field. | | props | N | Additional props for input of the honeypot. |

reCAPTCHA

In Netlify dashboard you have to set SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET. Also, make sure to provide SITE_RECAPTCHA_KEY to the reCAPTCHA component on the client using

siteKey

-prop.

Available props:

| Name | Req | Description | | --------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------ | | siteKey | Y | Recaptcha public site key. | | invisible | N | Set whether reCAPTCHA should be invisible or not. | | (any) | N | Any other prop will be passed through to the underlying component. |

Table of Contents

Components

NetlifyForm

useNetlifyForm

NetlifyFormProvider

NetlifyFormContext

useNetlifyFormContext

NetlifyFormComponent

Honeypot

reCAPTCHA