HAPI Form Plugin

Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.

CDN

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

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

Usage

enquiry-forms.js file:

<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).
        },
        // 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).
        }
      ...
      ]
  );

</script>

please note that you must use $store.<form-name>.fileds.<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