@lub-crm/forms 1.0.0 → 1.0.2
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 +14 -14
- package/dist/index.html +119 -0
- package/dist/lub-forms.es.js +1927 -3082
- package/dist/lub-forms.es.js.map +1 -1
- package/dist/lub-forms.standalone.js.map +1 -1
- package/dist/lub-forms.umd.js +99 -99
- package/dist/lub-forms.umd.js.map +1 -1
- package/dist/vite.svg +1 -0
- package/package.json +10 -8
- package/src/embed.ts +4 -4
- package/src/main.tsx +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @lub/forms
|
|
1
|
+
# @lub-crm/forms
|
|
2
2
|
|
|
3
3
|
Embeddable form library for Lub CRM. Render dynamic forms that integrate with Lub CRM for lead capture and data collection.
|
|
4
4
|
|
|
@@ -18,9 +18,9 @@ Embeddable form library for Lub CRM. Render dynamic forms that integrate with Lu
|
|
|
18
18
|
### NPM Package (React Apps)
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
npm install @lub/forms
|
|
21
|
+
npm install @lub-crm/forms
|
|
22
22
|
# or
|
|
23
|
-
bun add @lub/forms
|
|
23
|
+
bun add @lub-crm/forms
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
### Script Tag (Standalone)
|
|
@@ -28,7 +28,7 @@ bun add @lub/forms
|
|
|
28
28
|
No build step required. Includes React and all dependencies:
|
|
29
29
|
|
|
30
30
|
```html
|
|
31
|
-
<script src="https://forms.lub.
|
|
31
|
+
<script src="https://forms.lub.marketing/v1/lub-forms.standalone.js"></script>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
### Script Tag (UMD)
|
|
@@ -38,8 +38,8 @@ For pages that already have React loaded:
|
|
|
38
38
|
```html
|
|
39
39
|
<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
|
|
40
40
|
<script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
|
|
41
|
-
<script src="https://forms.lub.
|
|
42
|
-
<link rel="stylesheet" href="https://forms.lub.
|
|
41
|
+
<script src="https://forms.lub.marketing/v1/lub-forms.umd.js"></script>
|
|
42
|
+
<link rel="stylesheet" href="https://forms.lub.marketing/v1/lub-forms.css" />
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
## Usage
|
|
@@ -47,14 +47,14 @@ For pages that already have React loaded:
|
|
|
47
47
|
### React Component
|
|
48
48
|
|
|
49
49
|
```tsx
|
|
50
|
-
import { LubForm } from "@lub/forms";
|
|
51
|
-
import "@lub/forms/styles";
|
|
50
|
+
import { LubForm } from "@lub-crm/forms";
|
|
51
|
+
import "@lub-crm/forms/styles";
|
|
52
52
|
|
|
53
53
|
function ContactPage() {
|
|
54
54
|
return (
|
|
55
55
|
<LubForm
|
|
56
56
|
formId="abc123"
|
|
57
|
-
baseUrl="https://api.lub.
|
|
57
|
+
baseUrl="https://api.lub.marketing"
|
|
58
58
|
onSuccess={(data) => {
|
|
59
59
|
console.log("Submission ID:", data.submission_id);
|
|
60
60
|
window.location.href = "/thank-you";
|
|
@@ -74,7 +74,7 @@ Forms automatically mount to elements with `data-lub-form-id`:
|
|
|
74
74
|
```html
|
|
75
75
|
<div
|
|
76
76
|
data-lub-form-id="abc123"
|
|
77
|
-
data-lub-base-url="https://api.lub.
|
|
77
|
+
data-lub-base-url="https://api.lub.marketing"
|
|
78
78
|
data-lub-class="my-custom-class"
|
|
79
79
|
data-lub-on-success="handleSuccess"
|
|
80
80
|
data-lub-on-error="handleError"
|
|
@@ -97,7 +97,7 @@ Forms automatically mount to elements with `data-lub-form-id`:
|
|
|
97
97
|
|
|
98
98
|
<script>
|
|
99
99
|
LubForms.render("abc123", "my-form", {
|
|
100
|
-
baseUrl: "https://api.lub.
|
|
100
|
+
baseUrl: "https://api.lub.marketing",
|
|
101
101
|
onSuccess: (data) => {
|
|
102
102
|
console.log("Success!", data);
|
|
103
103
|
},
|
|
@@ -215,7 +215,7 @@ conditional_logic: {
|
|
|
215
215
|
Register custom field types for advanced use cases:
|
|
216
216
|
|
|
217
217
|
```tsx
|
|
218
|
-
import { registerFieldComponent } from "@lub/forms";
|
|
218
|
+
import { registerFieldComponent } from "@lub-crm/forms";
|
|
219
219
|
|
|
220
220
|
registerFieldComponent("rating", ({ field, register, error }) => (
|
|
221
221
|
<div className="rating-field">
|
|
@@ -235,9 +235,9 @@ registerFieldComponent("rating", ({ field, register, error }) => (
|
|
|
235
235
|
Use the client directly for custom integrations:
|
|
236
236
|
|
|
237
237
|
```tsx
|
|
238
|
-
import { LubFormsClient } from "@lub/forms";
|
|
238
|
+
import { LubFormsClient } from "@lub-crm/forms";
|
|
239
239
|
|
|
240
|
-
const client = new LubFormsClient("https://api.lub.
|
|
240
|
+
const client = new LubFormsClient("https://api.lub.marketing");
|
|
241
241
|
|
|
242
242
|
// Fetch form definition
|
|
243
243
|
const form = await client.getForm("abc123");
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Lub Forms - Embeddable Forms</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
body {
|
|
14
|
+
font-family:
|
|
15
|
+
system-ui,
|
|
16
|
+
-apple-system,
|
|
17
|
+
sans-serif;
|
|
18
|
+
background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
color: #f8fafc;
|
|
21
|
+
}
|
|
22
|
+
.container {
|
|
23
|
+
max-width: 800px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
padding: 60px 24px;
|
|
26
|
+
}
|
|
27
|
+
h1 {
|
|
28
|
+
font-size: 2.5rem;
|
|
29
|
+
margin-bottom: 16px;
|
|
30
|
+
}
|
|
31
|
+
.subtitle {
|
|
32
|
+
font-size: 1.25rem;
|
|
33
|
+
opacity: 0.8;
|
|
34
|
+
margin-bottom: 48px;
|
|
35
|
+
}
|
|
36
|
+
.card {
|
|
37
|
+
background: rgba(255, 255, 255, 0.1);
|
|
38
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
39
|
+
border-radius: 12px;
|
|
40
|
+
padding: 24px;
|
|
41
|
+
margin-bottom: 24px;
|
|
42
|
+
}
|
|
43
|
+
.card h2 {
|
|
44
|
+
font-size: 1.125rem;
|
|
45
|
+
margin-bottom: 16px;
|
|
46
|
+
color: #60a5fa;
|
|
47
|
+
}
|
|
48
|
+
pre {
|
|
49
|
+
background: #0f172a;
|
|
50
|
+
border-radius: 8px;
|
|
51
|
+
padding: 16px;
|
|
52
|
+
overflow-x: auto;
|
|
53
|
+
font-size: 0.875rem;
|
|
54
|
+
line-height: 1.6;
|
|
55
|
+
}
|
|
56
|
+
code {
|
|
57
|
+
font-family: "Monaco", "Menlo", monospace;
|
|
58
|
+
}
|
|
59
|
+
.highlight {
|
|
60
|
+
color: #60a5fa;
|
|
61
|
+
}
|
|
62
|
+
.string {
|
|
63
|
+
color: #34d399;
|
|
64
|
+
}
|
|
65
|
+
.comment {
|
|
66
|
+
color: #64748b;
|
|
67
|
+
}
|
|
68
|
+
a {
|
|
69
|
+
color: #60a5fa;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<div class="container">
|
|
75
|
+
<h1>Lub Forms</h1>
|
|
76
|
+
<p class="subtitle">Embeddable form library for Lub CRM</p>
|
|
77
|
+
|
|
78
|
+
<div class="card">
|
|
79
|
+
<h2>Quick Start - Standalone Script</h2>
|
|
80
|
+
<pre><code><span class="comment"><!-- Add this to your HTML --></span>
|
|
81
|
+
<span class="highlight"><script</span> src="<span class="string">https://forms.lub.marketing/lub-forms.standalone.js</span>"<span class="highlight">></script></span>
|
|
82
|
+
|
|
83
|
+
<span class="comment"><!-- Add a container with your form ID --></span>
|
|
84
|
+
<span class="highlight"><div</span>
|
|
85
|
+
data-lub-form-id="<span class="string">YOUR_FORM_ID</span>"
|
|
86
|
+
data-lub-base-url="<span class="string">https://api.lub.marketing</span>"
|
|
87
|
+
<span class="highlight">></div></span></code></pre>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="card">
|
|
91
|
+
<h2>Manual Render with Callbacks</h2>
|
|
92
|
+
<pre><code><span class="highlight"><div</span> id="<span class="string">my-form</span>"<span class="highlight">></div></span>
|
|
93
|
+
|
|
94
|
+
<span class="highlight"><script></span>
|
|
95
|
+
LubForms.render('<span class="string">YOUR_FORM_ID</span>', '<span class="string">my-form</span>', {
|
|
96
|
+
baseUrl: '<span class="string">https://api.lub.marketing</span>',
|
|
97
|
+
onSuccess: (data) => {
|
|
98
|
+
console.log('Submitted!', data.submission_id);
|
|
99
|
+
window.location.href = '/thank-you';
|
|
100
|
+
},
|
|
101
|
+
onError: (err) => {
|
|
102
|
+
console.error('Error:', err);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
<span class="highlight"></script></span></code></pre>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="card">
|
|
109
|
+
<h2>Available Files</h2>
|
|
110
|
+
<pre><code><span class="comment"># Standalone (includes React)</span>
|
|
111
|
+
https://forms.lub.marketing/lub-forms.standalone.js
|
|
112
|
+
|
|
113
|
+
<span class="comment"># UMD (requires React on page)</span>
|
|
114
|
+
https://forms.lub.marketing/lub-forms.umd.js
|
|
115
|
+
https://forms.lub.marketing/lub-forms.css</code></pre>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</body>
|
|
119
|
+
</html>
|