Create vuejs-invisible-recaptcha.html

depadiernos · web-flow · commit b7c8a07a003b · 2018-07-24T12:42:00.000-05:00
diff --git a/forms/vuejs-invisible-recaptcha.html b/forms/vuejs-invisible-recaptcha.html
@@ -0,0 +1,55 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-recaptcha exmaple</title>
+  </head>
+  <body>
+    <h1>This is example to use vue-recaptcha</h1>
+    <div id="root">
+      <div>
+        <h3> Invisible ReCAPTCHA </h3>
+        <form @submit.prevent="onSubmit" data-netlify-recaptcha data-netlify>
+          <vue-recaptcha
+            ref="invisibleRecaptcha"
+            @verify="onVerify"
+            @expired="onExpired"
+            size="invisible"
+            :sitekey="sitekey">
+          </vue-recaptcha>
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+    </div>
+    <script src="https://unpkg.com/vue@latest/dist/vue.js" defer></script>
+    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
+    </script>
+    <script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>
+    <script>
+      new Vue({
+	      el: '#root',
+	      data: {
+	        sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
+	      },
+	      components: {
+	        'vue-recaptcha': VueRecaptcha
+	      },
+	      methods: {
+	        onSubmit: function () {
+	          this.$refs.invisibleRecaptcha.execute()
+	        },
+	        onVerify: function (response) {
+	          console.log('Verify: ' + response)
+	        },
+	        onExpired: function () {
+	          console.log('Expired')
+	        },
+	        resetRecaptcha () {
+	          this.$refs.recaptcha.reset() // Direct call reset method
+	        }
+	      }
+	    })
+    </script>
+  </body>
+</html>
