hapi-recaptcha-html

HAPI Form Plugin

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

CDN

<script src="https://unpkg.com/hapi-recaptcha-html@latest/dist/hapi.min.js" defer></script>

<script src="enquiry-forms.js" defer></script>

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:

{
  event: "form_submission",
  enhanced_conversion_data: {
    name: "John Doe",
    email: "[e-mail]"
    // ...other fields
  }
}

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

Usage

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

</script>

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

// 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 – The name of the instance, to be matched with x-data="name".
• hapiformID – hapiform ID. (old version endpoint is still accepted.)
• redirectTo – Location to be redirected after success. Eg: "/thank-you" or "https://example.com". (Optional)
• integrationScriptUrl - optional, POST current DataForm to external URL (API).
• captchaId - Id of div element to render the google recaptcha, null means recaptcha is disabled.
• recaptchaTheme - light or dark.
• onSuccess() – On success event.
• onFailed() – On failed event.
• errors.recaptchaError - to display captcha verification errors.

Events

Success Event

When submission is success, Hapi will emit hapi:success event.

Error Event

When submission has error, Hapi will emit hapi:error event.

Example

index.html

enquiry-forms.js