# hapi-recaptcha-html

> hapiform js library with google recaptcha for standard HTML websites

Latest version **1.0.12** (published 2026-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install hapi-recaptcha-html
pnpm add hapi-recaptcha-html
yarn add hapi-recaptcha-html
bun add hapi-recaptcha-html
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2026-04-22 |
| First published | 2023-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 81.2 KB |
| Known vulnerabilities | 0 (+28 in 1 direct dependencies) |
| Install scripts | no |
| Author | chenghuichao |
| Maintainers | chenghuichao |
| Keywords | hapi, hapiform |

## Links

- npm: https://www.npmjs.com/package/hapi-recaptcha-html
- npm.io page: https://npm.io/package/hapi-recaptcha-html

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) ~1.15.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.12 (latest) — 2026-04-22
- 1.0.11 — 2026-04-21
- 1.0.10 — 2026-04-21
- 1.0.9 — 2026-04-10
- 1.0.8 — 2026-04-10
- 1.0.7 — 2026-04-10
- 1.0.6 — 2023-08-18
- 1.0.5 — 2023-08-17
- 1.0.4 — 2023-07-24
- 1.0.3 — 2023-07-24
- 1.0.2 — 2023-05-17
- 1.0.1 — 2023-05-16
- 1.0.0 — 2023-05-16

## README

# HAPI Form JS Library

A lightweight JavaScript library that integrates Alpine JS to enhance HAPI Forms with Google reCAPTCHA support and easy form submission handling.

> ⚠️ **Note:** This library is intended for standard/static HTML websites (e.g., plain HTML/PHP templates). WordPress compatibility is not guaranteed due to theme/plugin script loading and optimization differences, and may require custom integration.

## Usage

```html
<!-- step 1) Load Hapi（provides Hapi.forms support） -->
<script src="https://unpkg.com/hapi-recaptcha-html@latest/dist/hapi.min.js" defer></script>
<!-- step 2) Register Hapi.forms(...) based on your configuration / setup -->
<script src="enquiry-forms.js" defer></script>
```

> **Usage Notes:**
>
> - **Hapi.forms Initialization:**  
> Do not invoke `Hapi.forms()` inline immediately after loading external scripts with `defer`—this can result in a "Hapi is not defined" error if the script hasn’t finished loading.  
> **Best practice:** Place your initialization code in a separate `.js` file and load it with `defer`, or ensure it executes after the DOM is fully loaded.
> - **Version Pinning:**  
> Avoid using `@latest` in CDN URLs. To ensure consistent behavior and prevent unexpected breaking changes, specify an explicit version. Example: `<script src="https://unpkg.com/hapi-recaptcha-html@1.0.12/dist/hapi.min.js" defer></script>` 
> - **Alpine.js Management:**  
> This library automatically injects Alpine.js if not present.  
> **Important:** Do not manually include multiple Alpine.js scripts on the same page to prevent conflicts.

## DataLayer

**DataLayer Integration**  

This library automatically pushes a `form_submission` event to the global `window.dataLayer` when a form is successfully submitted.  

The event payload includes all form field values under the property `enhanced_conversion_data`.

Example pushed object:

```js
{
  event: "form_submission",
  enhanced_conversion_data: {
    name: "John Doe",
    email: "john@example.com"
    // ...other fields
  }
}
```

You do not need to add any extra integration code for DataLayer support; it works out of the box.

## Options

```html
<script>
  Hapi.forms([
        // form 01
        {
          name: 'form01',
          hapiformID: '<hapiform-id-number-1>',
          redirectTo: '/contactus-success.html', // Eg: "/thank-you" or "https://example.com". (Optional)
          captchaId: 'captcha-01',
          integrationScriptUrl: "", // optional, POST current DataForm to external URL (API).
          recaptchaSize: "normal", //optional, normal or compact, default is normal
        },
        // form 02
        {
          name: 'form02',
          hapiformID: '<hapiform-id-number-2>',
          redirectTo: '/contactus-success.html',  // Eg: "/thank-you" or "https://example.com". (Optional)
          captchaId: 'captcha-02', 
          integrationScriptUrl: "", // optional, POST current DataForm to external URL (API).
          recaptchaSize: "normal", //optional, normal or compact, default is normal
        }
      ...
      ]
  );

</script>
```

Please note that you must use `$store.<form-name>.fields.<field-name>` to bind inputs.

```html
<!-- in form01 -->
<input id="form01-name" x-model="$store.form01.fields.name">
...

<!-- in form02 -->
<input id="form02-name" x-model="$store.form02.fields.name">
...


```

- **name**: Alpine component name. Must match the form container `x-data` value (e.g. `x-data="form01"`).
- **hapiformID**: HapiForm ID (UUID). Used to build the submit endpoint: `https://hapiform.sg/api/{hapiformID}`.
- **redirectTo** *(optional)*: Redirect URL after a successful submission. Supports relative paths (e.g. `/thank-you`) and absolute URLs.
- **integrationScriptUrl** *(optional)*: Webhook URL. When provided, the submitted payload will also be POSTed to this endpoint.
- **captchaId** *(optional)*: DOM element id where reCAPTCHA will be rendered (e.g. `<div id="captcha-01"></div>`). Set to `null` to disable reCAPTCHA.
- **recaptchaTheme** *(optional)*: `light` or `dark`. Default: `light`.
- **recaptchaSize** *(optional)*: `normal` or `compact`. Default: `normal`.
- **onSuccess(res)** *(optional)*: Callback invoked when the form submission succeeds.
- **onFailed(err)** *(optional)*: Callback invoked when the submission or validation fails.
- **errors.recaptchaError**: Error message set when reCAPTCHA verification fails (bind to your UI for display).


### Example

[index.html](https://unpkg.com/hapi-recaptcha-html@latest/demo/index.html)

[enquiry-forms.js](https://unpkg.com/hapi-recaptcha-html@latest/demo/enquiry-forms.js)


### Test Case

[index.html](https://unpkg.com/hapi-recaptcha-html@latest/test/index.html)

---
_Source: https://npm.io/package/hapi-recaptcha-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._