hapi-recaptcha-html 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/demo/contactus-success.html +14 -0
- package/demo/enquiry-forms.js +20 -0
- package/demo/index.html +131 -0
- package/demo/loading.svg +31 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# HAPI Form Plugin
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A lightweight plugin that integrates Alpine JS to enhance HAPI Forms with Google reCAPTCHA support and easy form submission handling.
|
|
4
4
|
|
|
5
5
|
## CDN
|
|
6
6
|
|
|
@@ -35,8 +35,6 @@ Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.
|
|
|
35
35
|
## Usage
|
|
36
36
|
|
|
37
37
|
```html
|
|
38
|
-
enquiry-forms.js file:
|
|
39
|
-
|
|
40
38
|
<script>
|
|
41
39
|
Hapi.forms([
|
|
42
40
|
// form 01
|
|
@@ -64,7 +62,7 @@ enquiry-forms.js file:
|
|
|
64
62
|
</script>
|
|
65
63
|
```
|
|
66
64
|
|
|
67
|
-
please note that you must use `$store.<form-name>.
|
|
65
|
+
please note that you must use `$store.<form-name>.fields.<field-name>` to bind inputs.
|
|
68
66
|
|
|
69
67
|
```html
|
|
70
68
|
// in form01
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Demo Thank You Page</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<div style="text-align: center; margin-top: 100px;">
|
|
10
|
+
<h1>Thank you!</h1>
|
|
11
|
+
<a href="index.html">Go Back Home</a>
|
|
12
|
+
</div>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Hapi.forms([
|
|
2
|
+
// form 01
|
|
3
|
+
{
|
|
4
|
+
name: "form01",
|
|
5
|
+
hapiformID: "5867eae1-c53d-4734-a50c-abd350eb79d9",
|
|
6
|
+
redirectTo: "contactus-success.html",
|
|
7
|
+
captchaId: "captcha-01",
|
|
8
|
+
integrationScriptUrl: "", // optional, POST current DataForm/Json to external URL (API).
|
|
9
|
+
recaptchaSize: "compact", // normal or compact
|
|
10
|
+
},
|
|
11
|
+
// form 02
|
|
12
|
+
{
|
|
13
|
+
name: "form02",
|
|
14
|
+
hapiformID: "5867eae1-c53d-4734-a50c-abd350eb79d9",
|
|
15
|
+
redirectTo: "contactus-success.html",
|
|
16
|
+
captchaId: "captcha-02",
|
|
17
|
+
integrationScriptUrl: "", // optional, POST current DataForm/Json to external URL (API).
|
|
18
|
+
recaptchaSize: "normal", // normal or compact
|
|
19
|
+
},
|
|
20
|
+
]);
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
8
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
|
|
10
|
+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
11
|
+
<title>Demo Forms</title>
|
|
12
|
+
<style>
|
|
13
|
+
h1 {
|
|
14
|
+
font-size: 20px;
|
|
15
|
+
text-align: center;
|
|
16
|
+
margin: 20px auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
form {
|
|
20
|
+
width: 100%;
|
|
21
|
+
max-width: 550px;
|
|
22
|
+
margin: 10px auto;
|
|
23
|
+
border: 1px solid #dedede;
|
|
24
|
+
border-radius: 5px;
|
|
25
|
+
padding: 10px;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
|
|
30
|
+
<body>
|
|
31
|
+
<div class="container">
|
|
32
|
+
<h1>Demo Forms</h1>
|
|
33
|
+
|
|
34
|
+
<div class="d-lg-flex">
|
|
35
|
+
|
|
36
|
+
<form x-on:submit.prevent="submit" x-data="form01">
|
|
37
|
+
|
|
38
|
+
<template x-if="errors">
|
|
39
|
+
<div x-html="JSON.stringify(errors)" class="text-danger"></div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<div x-text='JSON.stringify($store.form01.fields,null,2)' class="text-success"></div>
|
|
43
|
+
<div>
|
|
44
|
+
<div class="mb-3">
|
|
45
|
+
<div class="form-field">
|
|
46
|
+
<label for="form01-name" class="form-label">Name</label>
|
|
47
|
+
<input type="text" id="form01-name" x-model="$store.form01.fields.name" placeholder="Name" class="form-control">
|
|
48
|
+
|
|
49
|
+
</div>
|
|
50
|
+
<template x-if="errors && errors.name">
|
|
51
|
+
<div x-text="errors.name" class="text-danger"></div>
|
|
52
|
+
</template>
|
|
53
|
+
<div x-text="$store.form01.fields.name"></div>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
<div class="mb-3">
|
|
57
|
+
<div class="form-field">
|
|
58
|
+
<label for="form01-message" class="form-label">Message</label>
|
|
59
|
+
<textarea id="form01-message" x-model="$store.form01.fields.message" rows="4" placeholder="Message"
|
|
60
|
+
class="form-control form-textarea"></textarea>
|
|
61
|
+
</div>
|
|
62
|
+
<template x-if="errors && errors.message">
|
|
63
|
+
<div x-text="errors.message" class="text-danger"></div>
|
|
64
|
+
</template>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="mb-3">
|
|
67
|
+
<div id="captcha-01"></div>
|
|
68
|
+
<template x-if="errors && errors.recaptchaError">
|
|
69
|
+
<div x-text="errors.recaptchaError" class="text-danger"></div>
|
|
70
|
+
</template>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="mb-3">
|
|
73
|
+
<button type="submit" class="btn btn-primary">
|
|
74
|
+
Submit Form 1 <img x-show="busy" src="loading.svg">
|
|
75
|
+
</button>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</form>
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
<form x-on:submit.prevent="submit" x-data="form02">
|
|
82
|
+
|
|
83
|
+
<template x-if="errors">
|
|
84
|
+
<div x-text="JSON.stringify(errors)" class="text-danger"></div>
|
|
85
|
+
</template>
|
|
86
|
+
|
|
87
|
+
<div x-text='JSON.stringify($store.form02.fields,null,2)' class="text-success"></div>
|
|
88
|
+
<div>
|
|
89
|
+
<div class="mb-3">
|
|
90
|
+
<div class="form-field">
|
|
91
|
+
<label for="form02-name" class="form-label">Name</label>
|
|
92
|
+
<input type="text" id="form02-name" x-model="$store.form02.fields.name" placeholder="Name" class="form-control">
|
|
93
|
+
</div>
|
|
94
|
+
<template x-if="errors && errors.name">
|
|
95
|
+
<div x-text="errors.name" class="text-danger"></div>
|
|
96
|
+
</template>
|
|
97
|
+
<div x-text="$store.form02.fields.name"></div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="mb-3">
|
|
100
|
+
<div class="form-field">
|
|
101
|
+
<label for="form02-message" class="form-label">Message</label>
|
|
102
|
+
<textarea id="form02-message" x-model="$store.form02.fields.message" rows="4" placeholder="Message"
|
|
103
|
+
class="form-control form-textarea"></textarea>
|
|
104
|
+
</div>
|
|
105
|
+
<template x-if="errors && errors.message">
|
|
106
|
+
<div x-text="errors.message" class="text-danger"></div>
|
|
107
|
+
</template>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="mb-3">
|
|
110
|
+
<div id="captcha-02"></div>
|
|
111
|
+
<template x-if="errors && errors.recaptchaError">
|
|
112
|
+
<div x-text="errors.recaptchaError" class="text-danger"></div>
|
|
113
|
+
</template>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="mb-3">
|
|
116
|
+
<button type="submit" class="btn btn-success">
|
|
117
|
+
Submit Form 2 <img x-show="busy" src="loading.svg">
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</form>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
<!-- <script src="https://unpkg.com/hapi-recaptcha-html@latest/dist/hapi.min.js" defer></script>-->
|
|
125
|
+
|
|
126
|
+
<script src="../dist/hapi.min.js" defer></script>
|
|
127
|
+
<script src="enquiry-forms.js" defer></script>
|
|
128
|
+
</div>
|
|
129
|
+
</body>
|
|
130
|
+
|
|
131
|
+
</html>
|
package/demo/loading.svg
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
|
|
4
|
+
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
|
|
5
|
+
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
|
|
6
|
+
<stop stop-color="#fff" offset="100%"/>
|
|
7
|
+
</linearGradient>
|
|
8
|
+
</defs>
|
|
9
|
+
<g fill="none" fill-rule="evenodd">
|
|
10
|
+
<g transform="translate(1 1)">
|
|
11
|
+
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
|
|
12
|
+
<animateTransform
|
|
13
|
+
attributeName="transform"
|
|
14
|
+
type="rotate"
|
|
15
|
+
from="0 18 18"
|
|
16
|
+
to="360 18 18"
|
|
17
|
+
dur="0.9s"
|
|
18
|
+
repeatCount="indefinite"/>
|
|
19
|
+
</path>
|
|
20
|
+
<circle fill="#fff" cx="36" cy="18" r="1">
|
|
21
|
+
<animateTransform
|
|
22
|
+
attributeName="transform"
|
|
23
|
+
type="rotate"
|
|
24
|
+
from="0 18 18"
|
|
25
|
+
to="360 18 18"
|
|
26
|
+
dur="0.9s"
|
|
27
|
+
repeatCount="indefinite"/>
|
|
28
|
+
</circle>
|
|
29
|
+
</g>
|
|
30
|
+
</g>
|
|
31
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hapi-recaptcha-html",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "hapiform html js library with google recaptcha",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"files": [
|
|
22
22
|
"dist",
|
|
23
|
+
"demo",
|
|
23
24
|
"README.md"
|
|
24
25
|
],
|
|
25
26
|
"scripts": {
|