HAPI Form Mixin for Nuxt with reCAPTCHA + DataLayer

It will add form data to the dataLayer once the submission is successful.

Installation

NPM

npm install hapiform-with-recaptcha

Yarn

yarn add hapiform-with-recaptcha

Usage

set recaptcha-el attribute to an element to rendering reCAPTCHA.

<div recaptcha-el></div>

package.json

"dependencies": {
    "hapiform-with-recaptcha": "^0.0.20",
    // ...
  }

vue/nuxt template

<template>
  <div class="container p-5">
    <form @submit.prevent="submit">
      <ul v-if="Object.keys(errors).length > 0" class="alert alert-danger">
        <p>Errors:</p>
        <li v-for="err in errors" class="ml-3">
          <div>{{ err[0] }}</div>
        </li>
      </ul>
      <div class="form-group">
        <label for="name">Name</label>
        <input id="name" type="text" v-model="fields.name" placeholder="Name" class="form-control" :class="{'is-invalid' : (errors && errors.name)}">
        <div v-if="errors && errors.name" class="text-danger">{{ errors.name[0] }}</div>
      </div>

      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" rows="5" class="form-control" v-model="fields.message" :class="{'is-invalid' : (errors && errors.message)}">
        </textarea>
        <div v-if="errors && errors.message" class="text-danger">{{ errors.message[0] }}</div>
      </div>

      <div>
        <div recaptcha-el></div>
        <div class="text-danger">{{ recaptchaError }}</div>
      </div>
      <br>
      <button class="btn btn-primary" type="submit">
        <span v-if="busy">Please wait....</span>
        <span v-else>Submit</span>
      </button>
    </form>
  </div>
</template>

<script>
import hapiMixins from 'hapiform-with-recaptcha';

export default {
  mixins: [hapiMixins],
  data() {
    return {
      hapiformID: "5867aaaa-c53d-bbbb-a50c-abd350eb79d9", // required, replace your form id.
      redirectTo: "/thank-you/",
      integrationScriptUrl: "", // optional, POST current DataForm/Json to external URL (API).
      integrationDataFormat: "FormData", // optional, `FormData` or `Json`, default value is `FormData`.
      recaptchaDisabled: false,  // optional, default value is `false` (enabled)
    };
  },
  methods:{
    // onSuccess(res) {},  // custom success event
    // onFailed(err) {}  // custom failed event

    // ** for file upload: html element 
    // ** e.g.: <input type="file" multiple @change="onSelectFile"> 
    // **  method of onSelectFile
    // onSelectFile(event) {
    //   // clear files
    //   this.files = [];

    //   const fileList = event.target.files;

    //   Array.from(fileList).forEach((file) => {
    //     this.files.push(file);
    //   });
    // },
  }
}
</script>

disable reCAPTCHA by setting the recaptchaDisabled to true.

Errors of reCAPTCHA

use recaptchaError to show the error message of reCAPTCHA.

Busy state

You may make use of the this.busy state to bind attributes or display loading image to give better user experience.