Hapiform-with-recaptcha NPM

HAPI Form Plugin For Vue 2 & Nuxt 2 with reCAPTCHA

No other plugin required

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.9",
    // ...
  }

nuxt.config.js

  build: {
    transpile: ["hapiform-with-recaptcha"]
  }

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
  }
}
</script>

disable reCAPTCHA by setting the recaptchaDisabled to true.